🚀 01. SSR과 HTML: Next.js가 HTML을 만드는 방법

2026년 3월 5일 수정됨

📋 개요

CSR vs SSR vs SSG vs ISR — 각 렌더링 전략이 생성하는 HTML의 차이, Hydration이란 무엇인가, Next.js App Router의 서버 컴포넌트를 HTML 관점에서 파헤칩니다.

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 20분 / 핵심 파트만: 12분

🎯 이 문서의 위치

이 문서는 HTML 심화 섹션입니다. HTML guide 01번(HTML 멘탈 모델)과 Next.js 렌더링 전략에 대한 기본 이해가 있어야 합니다.

🗺️ 이 문서의 흐름

[CSR의 한계] → [SSR이 다른 이유] → [Next.js가 HTML을 만드는 방법] → [Hydration] → [서버 컴포넌트와 HTML]

🎯 이 문서를 다 읽으면 할 수 있는 것

CSR과 SSR에서 브라우저가 받는 초기 HTML의 차이를 설명할 수 있다.
Hydration이 무엇이며 왜 필요한지 원리로 설명할 수 있다.
Next.js App Router의 서버 컴포넌트가 HTML 생성에 어떻게 기여하는지 설명할 수 있다.
Hydration Mismatch 에러가 왜 발생하는지 알 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철 ( 신입 ): "영호 님, Next.js 쓰면 SEO가 좋다고 했는데, 그게 HTML이랑 어떤 관계예요? React는 JavaScript로 HTML을 만드는 거잖아요. 그럼 구글 봇이 페이지 긁을 때 뭘 보는 건가요?"
🦁 영호 ( 리드 ): "정확히 거기서부터 시작해야 해요. 구글 봇이 영수네 커뮤니티에 접속하면, 첫 번째로 받는 HTML 파일이 뭐냐가 SEO의 핵심이거든요. CSR은 빈 껍데기 HTML을 주고, SSR은 콘텐츠가 채워진 HTML을 줘요. 그 차이가 Google 검색 순위에 직결돼요."

🤔 왜 알아야 하는가

영수네 커뮤니티 출시 후, 게시글이 구글에 안 걸리는 문제가 발생했다.

👔 영수(PM): "영철 님, 우리 게시글을 구글에서 검색하면 안 나와요. SEO 설정 다 했다고 하지 않았어요?"

영철이의 기존 셋업: 순수 React CRA(Create React App). 즉 CSR(Client-Side Rendering) 이었다.

🆚 1. CSR vs SSR — 브라우저가 받는 HTML의 차이

CSR (Client-Side Rendering)

<!-- 구글 봇이 CSR 사이트에 접속해서 받는 HTML -->
<!doctype html>
<html>
  <head>
    <title>영수네 커뮤니티</title>
  </head>
  <body>
    <!-- 빈 껍데기! 콘텐츠가 없음 -->
    <div id="root"></div>
    <!-- JS 번들이 실행되어야 이 div 안에 콘텐츠가 채워짐 -->
    <script src="/static/js/bundle.js"></script>
  </body>
</html>

구글 봇은 JavaScript를 실행하긴 하지만, 실행에 시간 지연이 있고 JS가 무거울수록 크롤링 품질이 떨어져. 콘텐츠가 없는 초기 HTML은 SEO에 불리해.

SSR (Server-Side Rendering)

<!-- 구글 봇이 Next.js SSR 사이트에 접속해서 받는 HTML -->
<!doctype html>
<html lang="ko">
  <head>
    <title>리액트 상태관리 비교 | 영수네 커뮤니티</title>
    <meta name="description" content="Zustand, Jotai 실무 비교 분석" />
  </head>
  <body>
    <!-- 이미 콘텐츠가 채워져 있음! -->
    <main>
      <article>
        <h1>리액트 상태관리 비교: Zustand vs Jotai</h1>
        <p>저는 요즘 Zustand를 쓰는데, Jotai와 성능 차이가...</p>
        <section>
          <h2>댓글 5개</h2>
          <!-- 댓글들도 HTML에 포함 -->
        </section>
      </article>
    </main>
    <!-- JS는 Hydration을 위해 로드 -->
    <script src="/_next/static/chunks/app.js" defer></script>
  </body>
</html>

서버에서 이미 렌더링된 HTML을 브라우저에 전달해. 구글 봇이 JavaScript 실행 전에도 콘텐츠를 읽을 수 있어.

💧 2. Hydration — 정적 HTML에 인터랙티비티 심기

SSR로 렌더링된 HTML은 화면에 바로 보이지만, 아직 인터랙티브하지 않아 (버튼 클릭, 상태 변화 없음). Hydration은 이 정적 HTML에 React의 이벤트 처리와 상태 관리를 연결하는 과정이야.

[서버] → HTML 생성 → 브라우저에 전송
     ↓
[브라우저] HTML 즉시 표시 (사용자가 빠르게 봄)
     ↓
[브라우저] JS 번들 다운로드 + 실행
     ↓
[React] 기존 DOM을 다시 렌더링하지 않고,
        이미 있는 DOM에 이벤트 핸들러 + 상태 연결
        = Hydration 완료 → 인터랙티브한 앱이 됨

// Next.js Pages Router: 서버에서 데이터를 props로 전달
export async function getServerSideProps() {
  const post = await fetchPost(params.id);
  return { props: { post } };
}
 
export default function PostPage({ post }) {
  const [liked, setLiked] = useState(false);
 
  return (
    <article>
      <h1>{post.title}</h1>
      {/* 이 버튼은 Hydration 전엔 클릭 안 됨 */}
      <button onClick={() => setLiked(!liked)}>
        {liked ? "❤️" : "🤍"} 좋아요
      </button>
    </article>
  );
}

Hydration Mismatch 에러:
서버에서 렌더링한 HTML과 클라이언트에서 React가 만들려는 VDOM이 다르면 에러 발생.

// ❌ Hydration Mismatch 원인: 서버/클라이언트 환경 차이
function Greeting() {
  // 서버: typeof window === 'undefined' → 다른 결과
  // 클라이언트: typeof window === 'object' → 다른 결과
  return <div>{typeof window === 'undefined' ? 'Server' : 'Client'}</div>;
}
 
// ✅ 해결: useEffect로 클라이언트에서만 실행
function Greeting() {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);
  return <div>{isClient ? 'Client' : 'Loading...'}</div>;
}

🏗️ 3. Next.js App Router — 서버 컴포넌트와 HTML

Next.js App Router의 서버 컴포넌트는 클라이언트로 JavaScript를 전혀 보내지 않고 HTML만 생성해.

// app/posts/[id]/page.tsx — 서버 컴포넌트 (기본)
// 이 컴포넌트는 서버에서만 실행, 클라이언트 JS 번들에 포함 안 됨
async function PostPage({ params }: { params: { id: string } }) {
  // 서버에서 직접 DB나 API 호출 가능
  const post = await db.post.findUnique({ where: { id: params.id } });
 
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* 클라이언트 컴포넌트는 'use client' 선언 필요 */}
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

// components/LikeButton.tsx — 클라이언트 컴포넌트
"use client"; // 이 선언이 있어야만 JS가 클라이언트로 전송됨
 
function LikeButton({ postId, initialLikes }: Props) {
  const [likes, setLikes] = useState(initialLikes);
 
  return (
    <button onClick={() => setLikes(l => l + 1)}>
      ❤️ {likes}
    </button>
  );
}

결과적으로 브라우저가 받는 HTML:

PostPage 의 h1, p = 서버에서 만들어진 정적 HTML (JS 없음)
LikeButton = 초기 HTML에 포함되나, Hydration을 위한 JS가 클라이언트로 전송됨

🏁 핵심 비교표

렌더링 방식	초기 HTML	JS 필요	FCP	SEO
CSR	빈 껍데기	필수	느림	불리
SSR	콘텐츠 포함	Hydration용	빠름	유리
SSG	콘텐츠 포함 (빌드 시 생성)	Hydration용	매우 빠름	매우 유리
서버 컴포넌트	콘텐츠 포함	최소화	매우 빠름	매우 유리

📝 마무리 퀴즈

Q1. 다음 중 SEO 관점에서 초기 HTML에 콘텐츠가 포함되어 구글 봇이 JavaScript 실행 없이도 페이지 내용을 읽을 수 있는 렌더링 방식은?

A) CSR (Create React App 기본 방식)
B) SSR (Next.js getServerSideProps)
가) CSR + SWR 데이터 페칭
라) CSR + React Query

✅ 정답: B

💡 상세 해설:

SSR은 서버에서 HTML을 완성해서 보내주므로 구글 봇이 JavaScript 없이도 콘텐츠를 읽을 수 있어요. CSR 방식은 초기 HTML이 빈 껍데기이고 JavaScript가 실행되어야 콘텐츠가 채워지므로 SEO에 불리해요.
📌 핵심 기억법: "SSR/SSG = 구글 봇에게 콘텐츠 담긴 명함, CSR = 빈 명함"

Q2. Hydration이란 무엇인가?

✅ 정답: 서버에서 렌더링된 정적 HTML에 React 이벤트 핸들러와 상태를 연결하여 인터랙티브한 앱으로 만드는 과정

💡 상세 해설:

SSR로 생성된 HTML은 사용자 눈에 바로 보이지만, 버튼 클릭이나 상태 변화는 React JS가 Hydration을 완료해야 작동해요. Hydration은 기존 DOM을 다시 렌더링하지 않고 이벤트 핸들러와 상태를 연결하는 효율적인 과정이에요.

Q3. 영철이의 테스트 타임

Next.js App Router 프로젝트에서 'use client' 선언 없이 컴포넌트를 만들었다.
이 컴포넌트에서 useState 를 사용하려고 했더니 에러가 났다. 왜 그런가?

✅ 정답: 서버 컴포넌트는 클라이언트에서 실행되지 않으므로 useState, useEffect 같은 React hooks를 사용할 수 없다. 클라이언트측 상태/인터랙션이 필요하면 'use client' 를 선언해야 한다

💡 상세 해설:

서버 컴포넌트는 서버에서만 실행되어 HTML을 생성하고 클라이언트로 JS를 보내지 않아요. useState 는 클라이언트에서 브라우저 메모리에 상태를 유지하는 훅이므로 서버 환경에서는 의미가 없어요.
📌 핵심 기억법: "상태/이벤트/브라우저 API = 'use client' 필수"

🐣 영철이의 퇴근 일기

오늘 드디어 "왜 Next.js가 SEO에 좋은가" 를 HTML 레벨에서 이해했다. CRA로 만든 앱을 구글 봇이 보면 <div id="root"></div> 한 줄짜리 페이지를 보는 거였다. 그러니까 검색 결과에 안 나왔던 거지. SSR로 바꾸니까 구글 봇이 실제 게시글 내용이 담긴 HTML을 받게 되고, 2주 후에 검색 결과에 우리 게시글이 나오기 시작했다.

💡 "HTML은 첫인상이다. SSR은 구글 봇에게 콘텐츠가 담긴 HTML을 먼저 보여주는 것, CSR은 빈 종이를 주는 것이다."

Hydration Mismatch는 아직도 고통스럽지만... 이제 왜 생기는지는 알겠다. 서버랑 클라이언트의 초기 렌더링 결과가 달라서 React가 혼란스러워하는 거라는 걸. 이 에러를 보면 "아, 서버/클라이언트 분기가 문제구나" 하고 바로 찾을 수 있게 됐다.

🔗 더 알아보기