Next.js SSR vs SSG 완벽 정리 — Pre-rendering 개념부터 App Router까지 (2026 업데이트)

안녕친구들! 스타일링까지 잘 따라오고 있어?

Next.js 스타일링 팁 (classnames, postCSS, Sass)

오늘은 Next.js의 완전 킬포! Pre-rendering 기능에 대해 이야기 할꺼야!

Pre-rendering이 뭐야?

Next.js는 기본적으로, 모든 페이지를 pre-render 해! 보통 성능이 더 좋고 SEO(Search Engin Optimization)에 더 좋아.

"Pre"라는 말이 붙으면 "미리", "먼저" 한다는걸 말해. 예를들면  predict-예측하다, preview-미리보기, prepay-선불.

어때? 감이오지?

"rendering"은  컴퓨터 연산에 의해서 어떤 결과물을 만들어내는 걸 말해, 주로 컴퓨터 그래픽중 3D 결과물을 이미지파일이나 동영상 결과물로 만들때 많이 쓰지. 

요기서는 "HTML" 이 그 결과물이야!

그래서 Pre-Rendering이란?

Pre-rendering은 미리 HTML을 만드는 기능! 땅!땅!

 

무슨 차이가 있는거지?

그림으로 한번 볼까?

Pre-rendering 사용하지 않을때 (React.js만 사용할 때)

Pre-rendering(Next.js를 사용할때)

어때? 사용자에 따라서 JS를 꺼놓거나, 브라우저 버전이 낮아서 리액트를 실행시킬수 없을 수도 있는데, 이 경우에도 Next.js는 미리 만들어둔 HTML이 있어서 화면에 나와! 어때 멋지지? 

오키도키?

근데 Hydration은 뭐야?

한글로 번역하면 수화화 뭐 그런말인데....

수화

머리아픈데, 화학까지 공부하진 말자!

"미리 생성된 초소형 HTML이 가지고 있던 Javascript가 실행되면서 완전체가 된다!"

요렇게 이해하면 될듯!

좀 자세히 이야기 하자면, 각 생성된 HTML들은 필요한 최소한의 javascript코드만 있어. 페이지가 브라우저에 의해 로드되면, javascript 코드가 실행되고, 그 코드가 완전히 동작가능한 페이지로 만들어줘. 이 과정이 hydration! 쉽게말해 화면에 버튼이 있으면 눌러지기 시작해.

Photo by  Lucas Benjamin  on  Unsplash

 

그런데 이 Pre-rendering 기능에 두가지 방식이 있어!

HTML을 만드는 시점에 따라 달라지지!

• Static Generation : HTML을 빌드타임에 생성해 두고 요청시마다 재사용하는 방법 "next build"하면 생성!
• Server-side Rendering : 요청시마다 HTML을 생성해주는 방법

참고로 우리는 계속 개발모드로 띄우고 있어서(npm run dev) 모든페이지가 Server-side Rendering하고 있어. 

더욱 힙한건, Next.js는 페이지 별로 두가지 방식을 선택할 수 있다는 사실!

항상 같은 화면만 나오는 페이지라면, 굳이 요청할때마다 새로 생성할 필요 있겠어? 그냥 만들어 둔거 내려주기만 하면되지. 안그래?

안그래도 React로 만든 페이지들 HTML내려주랴, JS 번들 내려주라 CSS번들 내려주고, 또 리액트 실행하랴 시간보내는데, 요거 완전 빠를것 같지?

오키도키? 다음 시간에 Static-Generation부터 먼저 시작해 볼께!

 

Next.js 킬포 Pre-rendering 1. Static-Generation

 

---

📅 최종 업데이트: 2026년 3월 | 원문 작성: 2020년 5월
이 글은 Next.js Pages Router 기준으로 작성되었습니다. 아래에 2026년 App Router 기준 업데이트를 추가했습니다.

2026 업데이트: App Router 시대의 렌더링

2020년에 이 글을 작성했을 때는 Next.js의 Pre-rendering이 SSG와 SSR 두 가지였습니다. 하지만 Next.js 13+ App Router가 도입되면서 렌더링 방식이 완전히 바뀌었습니다.

🔑 App Router의 새로운 렌더링 모델

App Router에서는 SSG/SSR이라는 구분 대신, Server Components와 Client Components로 나뉩니다.

구분	Pages Router (2020 원문)	App Router (2026)
정적 생성 (SSG)	getStaticProps + getStaticPaths	기본값! Server Component = 자동 정적 렌더링
서버 렌더링 (SSR)	getServerSideProps	dynamic = 'force-dynamic' 또는 cookies()/headers() 사용 시
ISR	revalidate 옵션	fetch의 next: { revalidate: 60 } 옵션
클라이언트	useEffect + useState	'use client' 선언한 컴포넌트

✅ App Router에서의 렌더링 예시

// app/blog/page.tsx — 기본적으로 정적 렌더링 (SSG와 동일)
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // 1시간마다 재생성 (ISR)
  }).then(res => res.json());

  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

// 동적 렌더링이 필요한 경우 (SSR과 동일)
import { cookies } from 'next/headers';
export default async function DashboardPage() {
  const token = cookies().get('session'); // 쿠키 사용 = 자동으로 동적 렌더링
  const data = await fetchUserData(token);
  return <Dashboard data={data} />;
}

💡 2026년 핵심 포인트

• 기본이 정적: App Router는 별도 설정 없이도 가능한 한 정적으로 렌더링합니다
• 자동 최적화: Next.js가 코드를 분석해서 정적/동적을 자동으로 결정합니다
• 스트리밍: loading.tsx와 Suspense로 점진적 로딩이 가능해졌습니다
• 원문의 핵심은 유효: "미리 HTML을 만든다"는 Pre-rendering의 핵심 개념은 App Router에서도 동일합니다!

원문에서 설명한 Pre-rendering의 개념과 SSG/SSR의 차이는 여전히 중요합니다. App Router는 이 개념을 더 쉽고 자동화된 방식으로 제공할 뿐이죠!

---

PPSU의 다른 유용한 글

• Next.js에서 fs 모듈 사용하기 — Can't resolve 'fs' 에러 해결법 (2026 업데이트)
• 전동킥보드 빔(Beam) 타는 법, 요금, 쿠폰코드 총정리 (2026 업데이트)

---

관련 글

• AI로 1인 사업하기 — 내가 매일 쓰는 AI 도구 전체 공개 (2026)