Next.js 데이터 페칭 방법: SSR, SSG, CSR 비교

작성일 : 2024-07-23

Next.js 데이터 페칭 방법: SSR, SSG, CSR 비교

Next.js는 데이터 페칭을 위한 다양한 방식을 제공합니다. 각각의 방식은 특정 요구사항과 사용 사례에 적합하도록 설계되었습니다. 이번 글에서는 Next.js에서 지원하는 3가지 주요 데이터 페칭 방식인 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)의 특징과 그 차이점을 살펴보겠습니다.

서버사이드 렌더링 (SSR)

서버사이드 렌더링(SSR)은 서버에서 페이지를 완전히 렌더링한 후 클라이언트에 전송하는 방식입니다. Next.js에서는 getServerSideProps 함수를 사용해 SSR을 구현할 수 있습니다. 이 함수는 서버에서 모두 실행되며, 페이지를 요청할 때마다 데이터를 가져옵니다.


javascript
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  return {
    props: { data },
  };
}

SSR의 장점

SEO 친화적: 서버에서 렌더링된 HTML을 전달하므로, 검색엔진 크롤러가 페이지 내용을 쉽게 인덱스할 수 있습니다.
실시간 데이터 제공: 각 요청마다 최신 데이터를 가져와 렌더링합니다.

SSR의 단점

높은 서버 부하: 모든 요청을 서버가 처리하므로 서버 부하가 증가할 수 있습니다.
느린 초기 로드: 데이터 페칭과 HTML 렌더링을 서버에서 처리해야 하므로 초기 로드 시간이 길어질 수 있습니다.

정적 사이트 생성 (SSG)

정적 사이트 생성(SSG)은 빌드 시점을 기준으로 페이지를 생성하고, 이를 정적 파일로 저장합니다. Next.js에서는 getStaticProps 함수를 사용하여 SSG를 구현할 수 있습니다. 이 접근 방식은 빌드 타임에 데이터를 가져와 페이지를 생성하므로, 정적 자산으로 배포됩니다.


javascript
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

SSG의 장점

빠른 초기 로드 시간: 정적 파일로 제공되므로, 페이지 로드 속도가 매우 빠릅니다.
저비용 배포: 정적 파일로 배포되므로 서버 리소스가 최소화됩니다.
높은 안정성: 서버의 상태에 관계없이 페이지를 접근할 수 있습니다.

SSG의 단점

실시간 데이터 제공 불가능: 빌드 타임 이후 데이터가 변경될 경우 페이지에 반영되지 않습니다.
고빈도 데이터 업데이트: 자주 업데이트되는 데이터에는 적합하지 않습니다.

클라이언트 사이드 렌더링 (CSR)

클라이언트 사이드 렌더링(CSR)은 클라이언트에서 JavaScript를 사용해 데이터를 페칭하고, 렌더링하는 방식입니다. Next.js에서는 useEffect 훅을 사용해 CSR을 구현할 수 있습니다.


javascript
import { useEffect, useState } from 'react';

function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  if (!data) return <div>Loading...</div>;

  return <div>{data.title}</div>;
}

CSR의 장점

실시간 데이터 제공: 클라이언트가 데이터를 직접 가져오기 때문에 실시간 데이터를 제공할 수 있습니다.
낮은 서버 부하: 초기 로드 시에 서버 요청이 없기 때문에 서버 부하가 적습니다.

CSR의 단점

느린 초기 로드 시간: 클라이언트가 데이터를 가져오는 동안 로딩 상태를 보여줘야 하므로 초기 로드 시간이 느려질 수 있습니다.
SEO 문제: 클라이언트에서 렌더링되기 때문에, 검색엔진 크롤러가 콘텐츠를 제대로 인덱스하지 못할 수 있습니다.

데이터 페칭 방식 비교

각 데이터 페칭 방식은 특정 상황에 적합하도록 설계되었습니다.

방식	특징	사용 사례
SSR	서버에서 데이터 페칭 후 렌더링	실시간 데이터 제공이 필요하거나 SEO가 중요한 경우
SSG	빌드 타임에 데이터 페칭 및 정적 페이지 생성	업데이트 빈도가 낮고 빠른 로드 시간이 필요한 경우
CSR	클라이언트에서 데이터 페칭 및 렌더링	실시간 데이터가 필요하고 서버 부하를 줄이고 싶은 경우

Next.js에서의 데이터 페칭 방식은 각각의 장단점이 있으며, 애플리케이션의 요구사항에 맞게 선택하여 사용하는 것이 중요합니다. SSR, SSG, CSR 각 접근 방식들을 잘 이해하고, 적절히 조합하여 최적의 사용자 경험을 제공할 수 있도록 설계하는 것이 필수적입니다.