[Next.js 14] 서버 컴포넌트에서의 data fetching

🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 

 

 

 

외부 라이브러리나 패키지 없이 React 컴포넌트에서 데이터를 fetch하는 방법은 보통 아래와 같다.

"use client";

import { useEffect, useState } from "react";

export default function Home() {
    const [isLoding, setIsLoading] = useState(true);
    const [movies, setMovies] = useState([]);
    const getMovies = async () => {
        const response = await fetch("https://nomad-movies.nomadcoders.workers.dev/movies");
        const json = await response.json();
        setMovies(json);
        setIsLoading(false);
    };

    useEffect(() => {
        getMovies();
    }, []);

    return <div>{isLoding ? "Loading..." : JSON.stringify(movies)}</div>;
}

 

위와 같은 방식으로 코드를 작성하면 data fetching이 항상 클라이언트에서 일어난다.

(= 브라우저가 API에 요청을 보낸다.)

 

따라서, 요청하는 url에 API key 등 보안에 중요한 정보는 넣을 수 없다. 당연히 데이터베이스와 직접 통신할 수도 없다.

 

그래서 보통 React앱을 개발하면 App에서 API를 통해 데이터베이스에 요청하고,

다시 API를 이용해 데이터베이스에서 React앱으로 응답을 전달한다.

 

 

 

 

 

하지만 Next.js의 server component에서 fetch를 한다면?

export const metadata = {
    title: "HOME",
};

const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

async function getMovies() {
    const response = await fetch(URL);
    const json = await response.json();
    return json;
}

export default async function Home() {
    const movies = await getMovies();

    return <div>{JSON.stringify(movies)}</div>;
}

 

useEffect, useState, loading state 모두 구현하지 않아도 된다.

그리고 client component에서는 사용하지 못하는 metadata도 사용할 수 있다.

사용자에게 노출될 일이 없어 API key를 쓰든 데이터베이스와 통신하든 안전하다.

 

 

server component에서 data fetch를 구현하면 해당페이지에 첫 진입 시를 제외하고는 로딩이 거의 없는 것처럼 보여지는데 이는 server component에서 fetch된 데이터를 기억하고 있기 때문이다.

 

최신 데이터로 업데이트가 필요한 경우에는 캐싱과 revalidation에 대해 알아야한다.

이 부분은 추후에 다루기로 하자.

 

 

 

 

이렇게 백엔드에서 data를 fetching하면 로딩도 백엔드로 옮겨가기 때문에 만약 데이터를 가져오는 동안 모종의 이유로 시간이 지연되었다고 가정하면

async function getMovies() {
    await new Promise((resolve) => setTimeout(resolve, 5000)); // 백엔드 응답이 5초 지연

    const response = await fetch(URL);
    const json = await response.json();
    return json;
}

 

getMovies함수가 완료되기 전까지는 백엔드에서는 렌더링이 일어나지않는다.

이는 브라우저의 새탭에서 해당 페이지로 접근 시 5초간 페이지에 진입조차 할 수가 없다는 뜻이다.

 

이는 매우 좋지 않은 사용자 경험으로 이어진다.

페이지에는 진입한 후 웹페이지 내에서 로딩이 진행 중이라는 ui를 띄우는 것이 더 좋은 방법이다.

 

그러기위해서는 loading 컴포넌트를 만들어주면 된다.

export default function Loading() {
    return <h2>Loading...</h2>;
}

 

이렇게 loading 컴포넌트를 만드는 것만으로 간단하게 로딩을 구현할 수 있다.

Next.js라는 프레임워크가 모든 것을 해준다.

 

이렇게 될 수 있는 이유는 백엔드가 컨텐츠를 streaming하고 있기 때문이다.

 

streaming을 사용하면 next.js가 우리의 페이지를 navigation bar, loading component 등 작은 HTML부분으로 나눠서 준비된 HTML부분을 브라우저에게 줄 수 있다.