'csr' 태그의 글 목록

csr

[Next.js] SSG, CSR, SSR, ISR 내부 작동원리(feat. Next.js) 2025.10.10

[Next.js] SSG, CSR, SSR, ISR 내부 작동원리(feat. Next.js)

busybusysociety 2025. 10. 10. 17:40

2025. 10. 10. 17:40

오늘은 브라우저 렌더링 방식인 SSG, CSR, SSR, ISR 내부 작동원리에 대해 살펴볼 것이다.

1. SSG (Static Site Generation) 작동원리

전체 흐름도

[빌드 타임]                    [런타임]
개발자 코드                     사용자 요청
    ↓                              ↓
npm run build                  CDN/Server
    ↓                              ↓
데이터 페칭 (API 호출)         정적 HTML 파일 전송
    ↓                              ↓
HTML 생성 (모든 페이지)        브라우저에서 즉시 렌더링
    ↓                              ↓
.next/static 폴더에 저장       (Hydration으로 인터랙티브)

1. 빌드타임(Build Time)

개발자가 코드를 작성하고 nun run build 명령어를 실행하면, 모든 페이지가 미리 HTML로 생성된다.
이 과정에서 필요한 데이터가 있다면 API를 호출해 가져오고, 가져온 데이터를 바탕으로 HTML 파일을 만들어 .next/static (Next라면) 같은 폴더에 저장한다.
즉, 사용자가 페이지를 요청하기 전 미리 모든 페이지를 준비하는 단계이다.

2. 런타임(Runtime)

사용자가 브라우저에서 페이지를 요청하면, 서버나 CDN이 미리 만들어둔 정적 HTML파일을 즉시 전송한다.
브라우저에서는 받은 HTML을 바로 화면에 보여주고, 필요하면 React의 Hydration 과정을 통해 인터랙티브 기능(버튼 클릭, 폼 입력 등)을 사용할 수 있다.

상세 작동 과정

1단계: 빌드 타임 (Build Time)

npm run build

내부에서 일어나는 일

1. Next.js가 모든 페이지 스캔
   ├─ app/page.tsx
   ├─ app/about/page.tsx
   ├─ app/blog/[slug]/page.tsx
   └─ ...

2. 각 페이지별로 실행:
   ├─ generateStaticParams() 호출 (동적 라우트)
   ├─ 데이터 페칭 함수 실행
   ├─ React 컴포넌트 렌더링
   └─ HTML 파일 생성

3. 출력물:
   ├─ .next/server/app/page.html
   ├─ .next/server/app/about.html
   ├─ .next/server/app/blog/post-1.html
   └─ JavaScript 번들 (.next/static/chunks/)

Next.js SSG 내부에서 일어나는 과정

페이지 스캔
- Next.js는 빌드 과정에서 프로젝트 내 모든 페이지를 확인합니다.
- 예를 들어:
  - app/page.tsx → 홈 페이지
  - app/about/page.tsx → 소개 페이지
  - app/blog/[slug]/page.tsx → 동적 블로그 글 페이지
- 이렇게 모든 페이지를 자동으로 찾아서 처리 대상으로 등록합니다.
페이지별 처리
- 동적 라우트 처리: generateStaticParams() 함수가 호출되어, 동적 URL(slug 등)에 필요한 모든 조합을 생성합니다.
- 데이터 가져오기: 각 페이지의 데이터 페칭 함수(API 호출 등)를 실행해서 필요한 데이터를 불러옵니다.
- React 컴포넌트 렌더링: 가져온 데이터를 이용해 React 컴포넌트를 HTML로 렌더링합니다.
- HTML 파일 생성: 렌더링된 결과를 정적 HTML 파일로 변환합니다.
출력물 생성
- 생성된 HTML 파일과 JavaScript 번들이 프로젝트 내부 .next 폴더에 저장됩니다.
- 예시:
  - .next/server/app/page.html → 홈 페이지
  - .next/server/app/about.html → 소개 페이지
  - .next/server/app/blog/post-1.html → 블로그 글
  - .next/static/chunks/ → React 기능과 인터랙티브를 위한 JS 번들

Next.js 코드 예제

// app/blog/[slug]/page.tsx

// 1. 빌드 시 생성할 경로 정의
export async function generateStaticParams() {
  console.log('🏗️  빌드 타임: 경로 생성 중...');

  // API에서 모든 포스트 가져오기
  const posts = await fetch('<https://api.example.com/posts>')
    .then(res => res.json());

  // 각 포스트마다 정적 페이지 생성
  return posts.map((post: any) => ({
    slug: post.slug, // /blog/post-1, /blog/post-2 등
  }));
}

// 2. 각 페이지의 데이터 페칭
export default async function BlogPost({
  params
}: {
  params: Promise<{ slug: string }>
}) {
  console.log(`🏗️  빌드 타임: ${params.slug} 페이지 생성 중...`);
  const { slug } = await params;

  // 이 fetch는 빌드 시 한 번만 실행됨
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    cache: 'force-cache' // SSG의 핵심 설정(DEFAULT)
  }).then(res => res.json());

  // React 컴포넌트를 HTML로 변환
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );

2단계: 빌드 결과물

.next/
├── static/
│   ├── chunks/          # JavaScript 코드 조각들
│   │   ├── main.js      # React 런타임
│   │   └── pages/       # 페이지별 JS
│   └── css/             # CSS 파일들
├── server/
│   └── app/
│       ├── page.html           # 미리 생성된 HTML
│       ├── about.html
│       └── blog/
│           ├── post-1.html     # 각 포스트의 HTML
│           └── post-2.html

생성된 HTML 예시

<!DOCTYPE html>
<html>
<head>
  <title>My Blog Post</title>
  <link rel="stylesheet" href="/_next/static/css/app.css" />
</head>
<body>
  <!-- 이미 렌더링된 콘텐츠 -->
  <article>
    <h1>내 첫 번째 포스트</h1>
    <div>
      <p>이것은 내용입니다...</p>
    </div>
  </article>

  <!-- JavaScript는 Hydration을 위해 로드 -->
  <script src="/_next/static/chunks/main.js"></script>
  <script src="/_next/static/chunks/pages/blog/post-1.js"></script>
</body>
</html>

3단계: 사용자 요청 (Request Time)

사용자가 /blog/post-1 접속
         ↓
CDN/Server가 미리 생성된 HTML 전송
         ↓
브라우저가 HTML 즉시 렌더링 (0.1초)
         ↓
JavaScript 다운로드 & 실행
         ↓
Hydration (HTML에 이벤트 리스너 연결)
         ↓
인터랙티브한 페이지 완성

Hydration 과정

// 1. 서버에서 생성된 HTML (정적)
<button>클릭하세요</button>

// 2. JavaScript 로드 후 Hydration
<button onClick={() => alert('클릭!')}>클릭하세요</button>
//      ↑ 이벤트 리스너가 추가됨

Hydration 코드 흐름:

// React가 내부적으로 수행
ReactDOM.hydrateRoot(
  document.getElementById('root'),
  <App />
);

// 과정:
// 1. 기존 HTML 요소 찾기
// 2. Virtual DOM 생성
// 3. 기존 DOM과 비교
// 4. 이벤트 리스너 연결
// 5. 상태 관리 활성화

2. ISR (Incremental Static Regeneration) 작동원리

전체 흐름도

[빌드 타임]              [첫 요청]            [revalidate 후]
모든 페이지 생성      → 정적 HTML 제공 →         백그라운드 재생성
                          ↓                    ↓
                    캐시된 버전 제공           새 버전으로 교체

ISR 상세 작동 과정

시나리오: revalidate: 60 설정

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: {
      revalidate: 60 // 60초마다 재검증
    }
  }).then(res => res.json());

  return <article>{post.title}</article>;
}

타임라인 분석

시간         요청          응답            내부 동작
──────────────────────────────────────────────────────────
00:00    빌드 완료      -              HTML v1 생성
         (초기 상태)

01:00    사용자 A      HTML v1 제공    ✅ 캐시 히트
         방문          (0.1초)         (타임스탬프: 00:00)

01:30    사용자 B      HTML v1 제공    ✅ 캐시 히트
         방문          (0.1초)         (아직 60초 안됨)

02:00    사용자 C      HTML v1 제공    🔄 재생성 트리거!
         방문          (0.1초)         (60초 경과)
                                      백그라운드에서:
                                      - API 재호출
                                      - HTML v2 생성
                                      - 캐시 교체 (10초 소요)

02:05    사용자 D      HTML v1 제공    ⏳ 재생성 진행 중
         방문          (0.1초)

02:10    재생성 완료    -              ✅ 캐시 업데이트
                                      HTML v2 준비 완료

02:15    사용자 E      HTML v2 제공    ✅ 새 버전!
         방문          (0.1초)

03:00    사용자 F      HTML v2 제공    ✅ 캐시 히트
         방문          (0.1초)

ISR 내부 캐시 메커니즘

// Next.js 내부 캐시 구조 (단순화)
const cache = {
  '/blog/post-1': {
    html: '<article>...</article>',
    timestamp: 1704067200000,      // 생성 시각
    revalidateAfter: 60,            // 재검증 간격 (초)
    isRevalidating: false           // 재생성 중인지
  }
};

// 요청 처리 로직
async function handleRequest(path) {
  const cached = cache[path];
  const now = Date.now();
  const age = (now - cached.timestamp) / 1000; // 초 단위

  // 1. 캐시가 유효한 경우
  if (age < cached.revalidateAfter) {
    console.log('✅ 캐시 히트: 신선한 데이터');
    return cached.html;
  }

  // 2. 캐시가 만료되었지만 재생성 중이 아닌 경우
  if (!cached.isRevalidating) {
    console.log('🔄 Stale-While-Revalidate: 오래된 캐시 제공 + 백그라운드 재생성');

    // 오래된 캐시 즉시 반환
    const staleResponse = cached.html;

    // 백그라운드에서 재생성
    cached.isRevalidating = true;
    regeneratePage(path).then(newHtml => {
      cache[path] = {
        html: newHtml,
        timestamp: Date.now(),
        revalidateAfter: 60,
        isRevalidating: false
      };
      console.log('✅ 재생성 완료: 캐시 업데이트됨');
    });

    return staleResponse;
  }

  // 3. 이미 재생성 중인 경우
  console.log('⏳ 재생성 진행 중: 오래된 캐시 제공');
  return cached.html;
}

ISR의 Stale-While-Revalidate 전략

ISR의 핵심은 "오래된 콘텐츠를 제공하면서 동시에 새 콘텐츠를 준비"하는 것입니다.

요청 → 캐시 확인
       ├─ 신선함 → 즉시 반환 ✅
       └─ 오래됨 → 오래된 것 반환 + 백그라운드 갱신 🔄
                   (다음 요청부터 새 버전)

On-Demand Revalidation

수동으로 캐시를 무효화할 수도 있습니다.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path');

  if (path) {
    // 특정 경로 재검증
    revalidatePath(path);
    console.log(`🔄 수동 재검증: ${path}`);
    return Response.json({ revalidated: true });
  }

  return Response.json({ revalidated: false });
}

// 사용 예:
// POST /api/revalidate?path=/blog/post-1

ISR 내부 동작:

// revalidatePath 내부 로직
function revalidatePath(path) {
  // 1. 캐시에서 해당 경로 찾기
  const cached = cache[path];

  if (cached) {
    // 2. 타임스탬프를 과거로 설정 (만료시킴)
    cached.timestamp = 0;
    console.log(`✅ ${path} 캐시 무효화됨`);

    // 3. 다음 요청 시 자동으로 재생성됨
  }
}

3. SSR (Server-Side Rendering) 작동원리

전체 흐름도

사용자 요청
    ↓
Next.js 서버
    ↓
데이터 페칭 (API 호출)
    ↓
React 컴포넌트 렌더링
    ↓
HTML 생성
    ↓
브라우저로 전송
    ↓
Hydration

상세 작동 과정

요청별 처리 흐름

// app/dashboard/page.tsx
export default async function Dashboard() {
  console.log('🖥️  서버에서 실행 중...');

  const data = await fetch('<https://api.example.com/user>', {
    cache: 'no-store', // SSR 활성화
    headers: {
      cookie: cookies().toString() // 쿠키 포함
    }
  }).then(res => res.json());

    return (
    <div>
      <h1>환영합니다, {data.name}님</h1>
      <p>마지막 로그인: {data.lastLogin}</p>
    </div>
  );
}

SSR 타임라인 분석

사용자 A가 /dashboard 요청 (10:00:00)
│
├─ [10:00:00.000] 요청 도착
│   └─ 서버: "새 요청 받음"
│
├─ [10:00:00.050] 쿠키/헤더 파싱
│   └─ 서버: "인증 토큰 확인"
│
├─ [10:00:00.100] API 호출 시작
│   └─ 서버 → API: "사용자 데이터 요청"
│
├─ [10:00:00.500] API 응답 대기 중...
│   └─ 서버: "응답 대기 중"
│
├─ [10:00:00.800] API 응답 도착
│   └─ 서버: "데이터 수신 완료"
│
├─ [10:00:00.850] React 렌더링
│   └─ 서버: "컴포넌트를 HTML로 변환"
│
├─ [10:00:00.900] HTML 생성 완료
│   └─ 서버: "최종 HTML 준비"
│
└─ [10:00:00.950] 브라우저로 전송
    └─ 사용자: "페이지 표시"

──────────────────────────────────────────

사용자 B가 /dashboard 요청 (10:00:01)
│
└─ 위 과정 반복 (캐시 없음!)
   └─ 총 소요시간: ~1초

서버 내부 처리

// Next.js 서버의 요청 핸들러 (단순화)
async function handleSSRRequest(req, res) {
  console.log('🖥️  SSR 요청 처리 시작');
  const startTime = Date.now();

  try {
    // 1. 라우트 매칭
    const route = matchRoute(req.url);
    console.log(`📍 라우트: ${route.path}`);

    // 2. 페이지 컴포넌트 가져오기
    const PageComponent = await import(route.componentPath);

    // 3. 서버 컴포넌트 실행 (데이터 페칭 포함)
    console.log('🔄 데이터 페칭 시작...');
    const props = await PageComponent.getServerSideProps?.(req, res);

    // 4. React 렌더링
    console.log('🎨 React 렌더링 시작...');
    const html = ReactDOMServer.renderToString(
      <PageComponent {...props} />
    );

    // 5. HTML 템플릿에 삽입
    const fullHtml = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${props.title}</title>
          <link rel="stylesheet" href="/styles.css" />
        </head>
        <body>
          <div id="root">${html}</div>
          <script src="/runtime.js"></script>
          <script>
            window.__INITIAL_DATA__ = ${JSON.stringify(props)};
          </script>
        </body>
      </html>
    `;

    const endTime = Date.now();
    console.log(`✅ 렌더링 완료 (${endTime - startTime}ms)`);

    // 6. 응답 전송
    res.setHeader('Content-Type', 'text/html');
    res.send(fullHtml);

  } catch (error) {
    console.error('❌ SSR 에러:', error);
    res.status(500).send('Server Error');
  }
}

SSR 인증/쿠키 처리

// app/profile/page.tsx
import { cookies, headers } from 'next/headers';

export default async function Profile() {
  // 1. 쿠키 읽기
  const cookieStore = cookies();
  const token = cookieStore.get('auth_token');

  console.log('🔐 인증 토큰:', token?.value);

  if (!token) {
    redirect('/login');
  }

  // 2. 헤더 읽기
  const headersList = headers();
  const userAgent = headersList.get('user-agent');

  console.log('👤 User-Agent:', userAgent);

  // 3. 인증된 API 호출
  const user = await fetch('<https://api.example.com/profile>', {
    headers: {
      'Authorization': `Bearer ${token.value}`,
      'User-Agent': userAgent || ''
    },
    cache: 'no-store'
  }).then(res => res.json());

  return

성능 최적화: Streaming SSR

// app/dashboard/page.tsx
import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>

      {/* 즉시 렌더링 */}
      <QuickStats />

      {/* 느린 부분은 나중에 */}
      <Suspense fallback={<Loading />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

async function SlowComponent() {
  // 3초 걸리는 API 호출
  const data = await fetch('https://slow-api.com/data', {
    cache: 'no-store'
  });

  return <HeavyChart data={data} />;
}

Streaming 동작:

클라이언트로 전송되는 HTML:

[0.1초]
<div>
  <h1>대시보드</h1>
  <div>빠른 통계: ...</div>
  <div id="suspense-boundary">로딩 중...</div>
</div>

[3.1초 - 추가 청크]
<script>
  // Suspense 경계 업데이트
  replaceSuspenseBoundary('suspense-boundary', `
    <div>느린 컴포넌트 내용...</div>
  `);
</script>

4. CSR (Client-Side Rendering) 작동원리

전체 흐름도

사용자 요청
    ↓
빈 HTML + JavaScript 번들 전송
    ↓
브라우저에서 JavaScript 실행
    ↓
React 앱 초기화
    ↓
API 호출 (fetch/axios)
    ↓
컴포넌트 렌더링
    ↓
화면에 표시

상세 작동 과정

초기 HTML (거의 비어있음)

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- 거의 빈 껍데기 -->
  <div id="root"></div>

  <!-- JavaScript 번들만 로드 -->
  <script src="/static/js/runtime.js"></script>
  <script src="/static/js/vendors.js"></script>
  <script src="/static/js/main.js"></script>
</body>
</html>

JavaScript 실행 흐름

// app/dashboard/page.tsx
'use client'; // CSR 명시

import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    console.log('🌐 브라우저에서 실행 중...');
    console.log('📡 API 호출 시작...');

    fetch('/api/user')
      .then(res => {
        console.log('✅ API 응답 받음');
        return res.json();
      })
      .then(data => {
        console.log('📦 데이터 파싱 완료');
        setUser(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('❌ 에러:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>로딩 중...</div>;
  }

  return (
    <div>
      <h1>환영합니다, {user.name}님!</h1>
    </div>
  );
}

CSR 타임라인 분석

[0.0초] 사용자가 /dashboard 요청
│
├─ [0.1초] HTML 다운로드 (5KB)
│   └─ 화면: 빈 페이지
│
├─ [0.2초] JavaScript 다운로드 시작
│   ├─ runtime.js (50KB)
│   ├─ vendors.js (200KB - React 등)
│   └─ main.js (100KB - 앱 코드)
│   └─ 화면: 여전히 빈 페이지
│
├─ [1.0초] JavaScript 파싱 & 실행
│   └─ 화면: 여전히 빈 페이지
│
├─ [1.2초] React 앱 초기화
│   └─ ReactDOM.render(<App />)
│   └─ 화면: "로딩 중..." 표시
│
├─ [1.3초] useEffect 실행
│   └─ fetch('/api/user') 호출
│   └─ 화면: "로딩 중..."
│
├─ [1.8초] API 응답 도착
│   └─ 화면: "로딩 중..."
│
└─ [2.0초] setState 완료 & 리렌더링
    └─ 화면: 실제 콘텐츠 표시 ✅

CSR 브라우저 내부 처리

// React의 CSR 초기화 (단순화)
window.addEventListener('DOMContentLoaded', () => {
  console.log('📄 DOM 로드 완료');

  // 1. React 루트 생성
  const root = ReactDOM.createRoot(document.getElementById('root'));
  console.log('🌱 React 루트 생성');

  // 2. 앱 렌더링
  console.log('🎨 앱 렌더링 시작');
  root.render(<App />);

  // 3. 컴포넌트 마운트
  // App → Dashboard → useEffect 순서로 실행
});

CSR 상태 관리와 리렌더링

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  console.log('🔄 Counter 컴포넌트 렌더링:', count);

  const increment = () => {
    console.log('➕ 증가 버튼 클릭');
    setCount(prev => {
      const newCount = prev + 1;
      console.log(`상태 변경: ${prev} → ${newCount}`);
      return newCount;
    });
    // 상태 변경 후 자동으로 리렌더링 트리거
  };

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

실행 흐름:

[초기 렌더링]
└─ 🔄 Counter 컴포넌트 렌더링: 0

[버튼 클릭]
├─ ➕ 증가 버튼 클릭
├─ 상태 변경: 0 → 1
└─ 🔄 Counter 컴포넌트 렌더링: 1
   └─ Virtual DOM 생성
      └─ 실제 DOM과 비교 (Reconciliation)
         └─ 변경된 부분만 업데이트
            └─ <p>카운트: 1</p> ✅

React의 Reconciliation (재조정)

// React 내부 로직 (단순화)
function updateComponent(Component, newProps) {
  // 1. 새로운 Virtual DOM 생성
  const newVDOM = Component(newProps);
  console.log('🆕 새 Virtual DOM:', newVDOM);

  // 2. 이전 Virtual DOM과 비교
  const diff = compareVDOM(oldVDOM, newVDOM);
  console.log('🔍 변경 사항:', diff);

  // 3. 변경된 부분만 실제 DOM 업데이트
  diff.forEach(change => {
    if (change.type === 'UPDATE_TEXT') {
      const element = document.querySelector(change.selector);
      element.textContent = change.newValue;
      console.log(`✏️  텍스트 업데이트: ${change.oldValue} → ${change.newValue}`);
    }
  });

  // 4. 이전 VDOM을 새 VDOM으로 교체
  oldVDOM = newVDOM;
}

'Developing👩‍💻 > Front-end' 카테고리의 다른 글

[원문 번역] 서버 상태에서 클라이언트 상태 끌어오기 - tkdodo (0)	2025.10.07
[원문 번역] useCallback의 쓸모없음 - tkdodo (0)	2025.10.07
[Next.js] nuqs의 useQueryState (0)	2025.10.06
[FE] 비동기 대신 동시성을 구현하는 Web Worker, WebAssembly 알아보기(멀티스레드) (0)	2025.08.24
[FE] Webpack, Rollup.js, 그리고 Vite (0)	2025.08.22

PREV 이전 1 NEXT 다음

🎧

csr

[Next.js] SSG, CSR, SSR, ISR 내부 작동원리(feat. Next.js)

1. SSG (Static Site Generation) 작동원리

전체 흐름도

상세 작동 과정

Next.js SSG 내부에서 일어나는 과정

Hydration 과정

2. ISR (Incremental Static Regeneration) 작동원리

전체 흐름도

ISR 상세 작동 과정

타임라인 분석

ISR 내부 캐시 메커니즘

ISR의 Stale-While-Revalidate 전략

On-Demand Revalidation

3. SSR (Server-Side Rendering) 작동원리

전체 흐름도

상세 작동 과정

요청별 처리 흐름

SSR 타임라인 분석

서버 내부 처리

SSR 인증/쿠키 처리

성능 최적화: Streaming SSR

4. CSR (Client-Side Rendering) 작동원리

전체 흐름도

상세 작동 과정

JavaScript 실행 흐름

CSR 타임라인 분석

CSR 브라우저 내부 처리

CSR 상태 관리와 리렌더링

React의 Reconciliation (재조정)

'Developing👩‍💻 > Front-end' 카테고리의 다른 글

+ Recent posts

티스토리툴바