Next.js 15의 렌더링 방식 및 적용법

김현준·2025년 4월 7일

넥스트JS

목록 보기

6/8

1. Static Site Generation (SSG)

설명: 빌드 시 HTML을 미리 생성하여 정적 파일로 제공
사용법: export const generateStaticParams, generateMetadata, fetch cache: 'force-cache'

대표 예시:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchPosts();
  return posts.map(post => ({ slug: post.slug }));
}

export default function Page({ params }: { params: { slug: string } }) {
  return <div>{params.slug} 페이지</div>;
}

특징:
- 페이지는 빌드 시 생성됨
- 빠른 응답 속도
- 자주 바뀌지 않는 데이터에 적합

2. Server-Side Rendering (SSR)

설명: 사용자가 요청할 때마다 서버에서 HTML을 동적으로 생성
사용법: fetch에서 cache: 'no-store' 또는 dynamic = 'force-dynamic'

대표 예시:

export const dynamic = 'force-dynamic';

export default async function Page() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store',
  });
  const data = await res.json();

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

특징:
- 최신 데이터를 보여줄 수 있음
- 사용자에 따라 페이지가 달라지는 경우 적합
- 응답 속도는 SSG보다 느릴 수 있음

3. Incremental Static Regeneration (ISR)

설명: SSG와 SSR의 장점을 결합한 방식. 일부 페이지를 백그라운드에서 재생성
사용법: revalidate 옵션 사용

대표 예시:

export const revalidate = 60; // 60초마다 새로 고침

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data.message}</div>;
}

특징:
- 빌드 후에도 일정 주기로 페이지 갱신 가능
- 업데이트 빈도가 적당한 페이지에 적합

4. Client-Side Rendering (CSR)

설명: HTML은 껍데기만 보내고, 자바스크립트가 실행된 후 브라우저에서 데이터 fetch 후 렌더링
사용법: 컴포넌트에 'use client' 선언 + 클라이언트에서 fetch

대표 예시:

'use client';

import { useEffect, useState } from 'react';

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

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

  return <div>{data?.message}</div>;
}

특징:
- 상호작용이 필요한 컴포넌트에 적합
- 초기 로딩이 느릴 수 있음

추가로 알아두면 좋은 옵션들

옵션	설명
`export const dynamic = 'auto'`	Next.js가 알아서 판단 (기본값)
`export const fetchCache = 'force-cache'`	SSG 유도
`export const fetchCache = 'force-no-store'`	SSR 유도
`export const revalidate = N`	ISR 유도 (N초마다 재생성)

상황별 렌더링 방식 추천

상황	추천 렌더링 방식	이유
변경되지 않는 정적인 페이지 예: 소개 페이지, 블로그 글	SSG	한 번 생성하면 계속 동일. 빠르고 효율적
페이지 내용이 자주 바뀌지만 꼭 최신일 필요는 없음 예: 뉴스 목록, 인기 글	ISR	새로고침 주기 설정 가능. 캐싱도 되고 성능도 좋음
매 요청마다 최신 데이터가 필요함 예: 대시보드, 관리자 페이지	SSR	매번 서버에서 새 데이터 가져옴
사용자별로 다른 페이지가 필요한 경우 예: 로그인한 유저의 마이페이지	SSR 또는 CSR	쿠키/세션 기반 데이터 필요시 SSR, 토큰 기반이면 CSR도 가능
로그인 후 유저 정보 기반 동작 예: 내 댓글 관리	CSR	클라이언트에서 토큰으로 유저 정보 fetch
검색 필터 등 유저 상호작용이 많음 예: 검색 페이지, 쇼핑몰	CSR	빠른 상호작용을 위해 클라이언트에서 처리
SEO가 중요한 페이지 예: 제품 상세, 블로그, 이벤트	SSG 또는 ISR	HTML이 미리 렌더되므로 검색엔진에 유리
정적 파일로 배포하고 싶을 때 (정적 호스팅) 예: GitHub Pages	SSG	완전 정적이라 정적 호스팅과 궁합 좋음