Next.js 13 - 서버에서 데이터 가져오기(SSR)

Next.js 13은 애플리케이션에서 데이터를 가져오고 관리하는 새로운 방법을 도입했습니다. 아래는 서버 구성요소에서 데이터를 fetch하여 가져오는 방법을 설명한 글입니다.

업데이트되기 이전에는 getServerSideProps 함수를 사용하여 해당 함수안에서 코드를 작성하면 작성된 코드는 서버에서만 랜더링될 수 있도록 만들어주었습니다.

서버에서 랜더링 되는 데이터를 가져와 화면에 그려주기위한 방법으로, 업데이트 된 현재는 아래와 같이 서버구성 요소에서 데이터를 가져올 수 있습니다.

** useState와 useEffect를 이용하여 클라이언트 측에서 데이터를 가져왔던 이전 방식 **
  
"use client";
import { useEffect, useState } from "react";

export default function Home() {
  const [movies, setMovies] = useState();
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`/api/movies`)).json();
      setMovies(results);
    })();
  }, []);

  return (
    <div className="container">
      <title>Home | Next Movies</title>
      {!movies && <h4>Loading..</h4>}
      {movies?.map((movie) => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

🔥 서버에서 데이터를 가져오는 최신 방식 🔥

"use client";

🔥 async function getData() {
  const { results } = await (
    // 📌 url에 localhost 붙여줘야 함
    await fetch(`http://localhost:3000/api/movies`, { cache: "no-store" }) 
  ).json();
  return results;
}

export default async function Home() {
🔥 const data = await getData();

  return (
    <div className="container">
      <title>Home | Next Movies</title>
   🔥 {data?.map((movie) => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

위와같이 서버에서 데이터를 가져와서 브라우저에 그려주게 되면 데이터가 유효할때(필요한 파일 데이터가 다 들어왔을 때) 모든 화면이 보여지게 되는 SSR(Server Side Rendering)방식으로 동작하게 됩니다. 이러한 방식은 SEO(검색엔진최적화)에 유리하다는 장점이 있습니다.

하지만 SSR 방식으로 동작하게 될 경우 데이터가 느리게 들어온다면 유저가 흰 화면만 보게되는 시간이 길어질 수 있다는 단점이 있습니다.

또한 서버에서만 동작한다는 특징을 이용하여 해당 데이터는 유저에게 보여지지 않기 때문에 API key를 숨길 수 있는 방법으로도 사용할 수 있습니다.

⭐️ chach 옵션 설정하기(중요)

최신 방법으로 데이터를 가져올 때 fetch() 안에서 { chach: no-store } 옵션을 설정해 주어야 무한으로 데이터가 가져와 지는 현상을 막아줄 수 있습니다.