📖 TIL - Next.js의 렌더링 방식 총정리: CSR, SSR, ISR, SSG

오늘은 Next.js에서 사용할 수 있는 4가지 렌더링 방식에 대해 알아봤다. 각 방식이 어떻게 다른지, 어떨 때 쓰면 좋은지, 그리고 제대로 동작하는지 어떻게 테스트하는지 정리했다.

📌 1. CSR (Client-Side Rendering)

CSR은 클라이언트(브라우저)에서 데이터를 가져오고 렌더링하는 방식이다.
처음에 빈 HTML을 받아온 다음, 자바스크립트가 실행되면서 API로 데이터를 가져온다. 그래서 처음엔 빈 화면이 보이다가 나중에 데이터가 채워지는 경험을 하게 된다.

구현 코드

"use client";
import React from "react";
import PostListPage from "../components/PostListPage";

const page = () => {
  return (
    <>
      <h1>CSRPage</h1>
      <PostListPage />
    </>
  );
};

export default page;

테스트 방법

1. 개발자 도구(F12) 열고 Network 탭 확인했다
2. Disable Cache 체크하고 페이지 새로고침했다
3. HTML 소스 보기(Ctrl+U) 해보니 데이터 없이 비어있었다
4. Network 탭에서 데이터 요청이 클라이언트(브라우저)에서 이루어지는 것을 확인했다

적합한 사용 케이스

사용자 대시보드처럼 개인화된 페이지
SEO가 중요하지 않은 페이지
많은 상호작용이 필요한 페이지

---

📌 2. SSR (Server-Side Rendering)

SSR은 서버에서 데이터를 가져와서 HTML을 완성시킨 다음에 클라이언트에 보내주는 방식이다.
따라서 사용자는 첫 로딩부터 완성된 페이지를 볼 수 있다!

구현 코드

import { DEFAULT_POST_URL } from "../constants/postConstant";
import { Post } from "../types/posts";
import PostList from "../components/PostList";

const page = async () => {
  const res = await fetch(`${DEFAULT_POST_URL}/posts`, {
    cache: "no-store",  // 이 옵션이 SSR의 핵심!
  });
  const data: Post[] = await res.json();
  return (
    <>
      <h1>SSRPage</h1>
      <PostList data={data} />
    </>
  );
};

export default page;

여기서 cache: "no-store" 옵션이 중요하다! 이 옵션은 "캐시 사용하지 말고 항상 서버에서 최신 데이터를 가져와!"라는 의미다.

테스트 방법

1. 개발자 도구 Network 탭 열고 Disable Cache 체크했다
2. 페이지 새로고침했다
3. HTML 소스 보기(Ctrl+U)했더니 이미 데이터가 들어있었다!
4. Network 탭에서 클라이언트에서 추가 API 요청이 없는 것을 확인했다

적합한 사용 케이스

• SEO가 중요한 페이지 (블로그, 뉴스 등)
• 항상 최신 데이터를 보여줘야 하는 페이지
• 첫 로딩 경험이 중요한 페이지

---

📌 3. ISR (Incremental Static Regeneration)

ISR은 정적 페이지(SSG)이지만 일정 시간마다 다시 생성되는 하이브리드 방식이다.
미리 생성된 페이지를 제공하면서도, 설정한 시간이 지나면 새로운 데이터로 업데이트되는 방식이다!

구현 코드

import React from "react";
import { DEFAULT_POST_URL } from "../constants/postConstant";
import { Post } from "../types/posts";

const page = async () => {
  const res = await fetch(`${DEFAULT_POST_URL}/posts`, {
    next: {
      revalidate: 20,  // 20초마다 페이지 재생성!
    },
  });

  const data: Post[] = await res.json();
  return (
    <>
      <h1>ISRPage</h1>
      <ul>
        {data.map((e) => (
          <li key={e.id} className="flex flex-col">
            <span>title: {e.title}</span>
            <span>author: {e.author}</span>
          </li>
        ))}
      </ul>
    </>
  );
};

export default page;

next: { revalidate: 20 } 옵션이 핵심이다! 20초마다 서버에서 새 데이터를 가져와 페이지를 다시 생성한다는 의미다.

테스트 방법

1. 개발자 도구 Network 탭 열고 Disable Cache 체크했다
2. 페이지 새로고침 후 HTML 소스 확인했더니 데이터가 포함되어 있었다
3. 20초 후에 다시 새로고침했더니 데이터가 업데이트되었다!
4. (테스트를 위해 API 데이터를 변경한 다음 revalidate 시간 이후에 확인했다)

적합한 사용 케이스

• 데이터가 자주 변하지는 않지만 완전히 정적이지도 않은 페이지
• 마케팅 페이지, 제품 목록 등
• 트래픽이 많지만 실시간 데이터가 아니어도 괜찮은 페이지

---

📌 4. SSG (Static Site Generation)

SSG는 빌드 타임에 HTML을 생성해두고 계속 재사용하는 방식이다.
한 번 생성된 HTML은 변경되지 않고 계속 같은 내용을 제공한다.

구현 코드

import React from "react";
import { DEFAULT_POST_URL } from "../constants/postConstant";
import { Post } from "../types/posts";
import PostList from "../components/PostList";

const page = async () => {
  const res = await fetch(`${DEFAULT_POST_URL}/posts`);  // 기본값이 force-cache
  const data: Post[] = await res.json();
  return (
    <>
      <h1>SSGPage</h1>
      <PostList data={data} />
    </>
  );
};

export default page;

fetch 함수에 아무런 캐시 옵션을 지정하지 않으면 기본값은 force-cache로, 이는 SSG 방식으로 동작한다.

테스트 방법

1. next build && next start 실행했다 (개발 모드에서는 제대로 테스트 불가)
2. 페이지 방문 후 HTML 소스 보기했더니 데이터가 포함되어 있었다
3. Network 탭에서 API 요청이 없는 것을 확인했다
4. API 데이터를 변경해도 빌드하기 전까지는 페이지 내용이 변하지 않았다

적합한 사용 케이스

• 데이터가 거의 변하지 않는 페이지
• 회사 소개, 마케팅 랜딩 페이지
• 문서, 튜토리얼 등 정적 콘텐츠
• 가장 빠른 로딩 시간이 필요한 페이지

---

🎯 한눈에 비교

렌더링 방식	데이터 로딩 시점	HTML 소스에 데이터 포함?	특징	적합한 사용 케이스
CSR	브라우저에서	❌ 없음	처음에 빈 화면, 후에 데이터 로드	대시보드, 관리자 페이지
SSR	매 요청마다 서버에서	✅ 포함	항상 최신 데이터 제공	블로그, 뉴스, SEO 중요 페이지
ISR	일정 시간마다 서버에서	✅ 포함	정적이지만 주기적으로 업데이트	제품 목록, 중간 정도 변경 빈도
SSG	빌드 시 한번만	✅ 포함	항상 같은 내용 제공, 매우 빠름	회사 소개, 마케팅 페이지

• 실시간 데이터가 중요한 페이지: SSR
• 자주 변하지 않는 데이터: ISR
• 상호작용이 많은 동적 페이지: CSR
• 정적인 콘텐츠: SSG