Next.js 15에서 데이터 페칭 및 렌더링: 완벽 가이드

Next.js 15는 데이터 페칭과 렌더링 방식에 있어서 많은 발전을 이루었습니다. 특히, App Router의 도입으로 더욱 유연하고 효율적인 데이터 관리가 가능해졌습니다. 이번 포스팅에서는 Next.js 15에서 제공하는 다양한 데이터 페칭 및 렌더링 방법을 자세히 살펴보고, 실제 예시를 통해 각 방법의 특징과 적절한 사용 시나리오를 설명합니다.

Next.js에서 데이터 페칭 및 렌더링의 중요성

데이터 페칭과 렌더링은 웹 애플리케이션 개발에서 가장 기본적이면서도 중요한 부분입니다. 사용자에게 동적인 콘텐츠를 제공하고, 최신 정보를 보여주기 위해서는 효율적인 데이터 관리가 필수적입니다. Next.js는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하며, 다양한 데이터 페칭 방법을 제공하여 개발자들이 최적의 성능을 내는 애플리케이션을 개발할 수 있도록 돕습니다.

Next.js 15에서 제공하는 데이터 페칭 방법

Next.js 15에서는 다음과 같은 다양한 데이터 페칭 방법을 제공합니다.

• getStaticProps: 빌드 타임에 데이터를 페칭하여 정적 HTML을 생성합니다.
• getServerSideProps: 사용자 요청 시마다 데이터를 페칭하여 동적으로 페이지를 생성합니다.
• useSWR: SWR (stale-while-revalidate) 패턴을 기반으로 데이터를 페칭하고 캐싱합니다.
• fetch: 브라우저 내장 API인 fetch를 사용하여 데이터를 페칭합니다.

각 방법의 특징과 적절한 사용 시나리오

getStaticProps

• 빌드 타임에 데이터 페칭: 빌드 시점에 미리 데이터를 가져와 정적 HTML을 생성합니다.
• 사용 시나리오:
  • 데이터가 자주 변경되지 않는 경우
  • SEO 최적화가 필요한 경우
  • 빠른 초기 로딩이 필요한 경우

getServerSideProps

• 요청 시마다 데이터 페칭: 사용자 요청 시마다 서버에서 데이터를 가져와 동적으로 페이지를 생성합니다.
• 사용 시나리오:
  • 데이터가 자주 변경되는 경우
  • 사용자별 맞춤 데이터가 필요한 경우
  • 로그인 정보 등 보안이 필요한 데이터를 다룰 때

useSWR

• SWR 패턴 기반: 데이터를 캐싱하고, 백그라운드에서 데이터를 갱신합니다.
• 사용 시나리오:
  • 데이터를 자주 조회하지만, 최신 데이터가 아니어도 문제가 없는 경우
  • 데이터를 로컬에 캐싱하여 성능을 향상시키고 싶은 경우

fetch

• 브라우저 내장 API: 클라이언트 사이드에서 데이터를 페칭하는 가장 일반적인 방법입니다.
• 사용 시나리오:
  • 클라이언트 사이드에서만 필요한 데이터를 가져올 때
  • 사용자 인터랙션에 따라 데이터를 동적으로 가져올 때

실제 예시

getStaticProps 예시

// pages/blog/[slug].js
export async function getStaticPaths() {
  const paths = [{ params: { slug: 'post-1' } }, { params: { slug: 'post-2' } }];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`);
  const post = await res.json();
  return { props: { post } };
}

function Post({ post }) {
  return <h1>{post.title}</h1>;
}

 

getServerSideProps 예시

// pages/profile.js
export async function getServerSideProps(context) {
  const { req } = context;
  const user = await getUserFromSession(req);
  return { props: { user } };
}

function Profile({ user }) {
  return <h1>Hello, {user.name}!</h1>;
}

 

useSWR 예시

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return <div>Hello, {data.name}!</div>;
}

 

결론

Next.js 15는 다양한 데이터 페칭 방법을 제공하여 개발자들이 자신에게 맞는 방법을 선택하여 사용할 수 있도록 합니다. 각 방법의 특징과 적절한 사용 시나리오를 이해하고, 프로젝트의 요구사항에 맞게 적절한 방법을 선택하는 것이 중요합니다.