Next.js Static Rendering(정적 렌더링)과 Dynamic Rendering(동적 렌더링)

 

Next.js 13 이상에서는 App Router를 도입하며 정적 렌더링(Static Rendering)과 동적 렌더링(Dynamic Rendering)을 보다 유연하고 선언적으로 사용할 수 있게 되었습니다. 아래는 App Router에서 각각의 렌더링 방식을 구현하는 예시입니다.

---

1. Static Rendering (정적 렌더링)

정적 렌더링은 빌드 시점에 페이지를 생성하여 클라이언트 요청 시 미리 준비된 HTML을 제공하는 방식입니다. App Router에서 정적 렌더링은 기본 설정이며, 데이터를 가져오지 않거나 fetch를 사용하여 빌드 타임에 데이터를 가져옵니다.

구현 예시

async function fetchPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  return res.json();
}

export default async function PostPage({ params }) {
  const post = await fetchPost(params.id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Static Rendering이 적용됨 (기본값)
export const revalidate = 60; // ISR (Incremental Static Regeneration)을 위해 60초마다 재검증

특징

• 기본적으로 fetch는 빌드 시점에 실행됩니다.
• revalidate를 설정하면 ISR을 통해 페이지를 주기적으로 업데이트할 수 있습니다.
• 빌드 시 모든 데이터를 미리 가져오므로 빠른 응답이 가능합니다.

---

2. Dynamic Rendering (동적 렌더링)

동적 렌더링은 사용자의 요청 시점에 데이터를 가져와 페이지를 생성하는 방식입니다. 이는 실시간 데이터가 필요하거나 사용자 맞춤형 페이지를 생성할 때 유용합니다.

구현 예시

async function fetchPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`, { cache: "no-store" });
  return res.json();
}

export default async function PostPage({ params }) {
  const post = await fetchPost(params.id);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Dynamic Rendering을 위해 cache: "no-store" 사용

특징

• fetch의 옵션에 cache: "no-store"를 설정하여 데이터를 매번 새로 가져옵니다.
• 사용자 요청 시마다 새로운 HTML이 생성되므로 실시간 데이터 반영이 가능합니다.
• 서버 요청 시간이 길어질 수 있으므로 적절한 캐싱 및 로딩 처리 필요.

---

Static vs Dynamic 설정 비교

렌더링 유형설정 예시특징

정적 렌더링	revalidate: 60 (ISR)	주기적으로 데이터를 갱신하며 SEO 친화적
동적 렌더링	fetch에 cache: "no-store" 설정	실시간 데이터 제공, 사용자 맞춤형 페이지에 적합

---

3. 혼합 사용 (Static + Dynamic)

Next.js App Router에서는 페이지의 일부는 정적으로, 일부는 동적으로 렌더링하는 혼합 접근법도 가능합니다.

구현 예시

async function fetchStaticPost(id) {
  const res = await fetch(`https://api.example.com/static-posts/${id}`, { next: { revalidate: 60 } });
  return res.json();
}

async function fetchDynamicData(id) {
  const res = await fetch(`https://api.example.com/dynamic-data/${id}`, { cache: "no-store" });
  return res.json();
}

export default async function PostPage({ params }) {
  const staticPost = await fetchStaticPost(params.id);
  const dynamicData = await fetchDynamicData(params.id);

  return (
    <article>
      <h1>{staticPost.title}</h1>
      <p>{staticPost.content}</p>
      <section>
        <h2>Dynamic Data:</h2>
        <p>{dynamicData.realtimeInfo}</p>
      </section>
    </article>
  );
}

 

특징

• 정적 데이터(revalidate: 60)와 동적 데이터(cache: "no-store")를 결합하여 효율성과 유연성을 모두 충족합니다.
• 정적 데이터는 캐싱되어 빠르게 제공되며, 동적 데이터는 실시간으로 최신 상태를 유지합니다.