Next.js 到底是 SSR、SSG、ISR 還是 SPA？一次搞懂常見 Rendering 模式

2026/08/26

搞懂 Next.js 的 CSR、SSR、SSG、ISR、PPR 與 RSC 差異，理解 Rendering 時機、Server Component、Client Component，以及現代 Next.js 如何在同一頁混合多種 Rendering 模式。

Monochrome Next.js concepts banner with a stylized N

環境版本

本文內容以以下版本為基準：

json

1{
2  "next": "16.3.3",
3  "react": "19.2.8",
4  "@tanstack/react-query": "5.102.3"
5}

本文主要以 Next.js App Router 為例，整理 CSR、SSR、SSG、ISR、PPR、RSC 與 Client Component 之間的差異。

Next.js 的 Rendering 與 Cache 機制仍持續演進，不同版本的實際行為請以對應版本官方文件為準。

在學 Next.js 時，很容易同時看到：

每個縮寫都長得像考試範圍，但其實它們不是全部都在講同一件事。

最重要的是先分清楚：

有些是在講「什麼時候 Render」，有些是在講「React Component 在哪裡執行」。

常見 Rendering 模式

模式	全名	主要在哪裡 Render	特性
CSR	Client-Side Rendering	Browser	JS 載入後才產生 UI
SSR	Server-Side Rendering	Server，每次 Request	每次請求即時產生
SSG	Static Site Generation	Build time	Build 時預先產生
ISR	Incremental Static Regeneration	Build + 後續更新	靜態內容可以重新產生
PPR	Partial Prerendering	Static + Request-time	同頁混合靜態與動態內容

1. CSR：在 Browser Render

典型 React SPA 通常就是 CSR。

text

1Browser
2  ↓
3載入 HTML + JS
4  ↓
5React 執行
6  ↓
7取得 API
8  ↓
9Render UI

例如：

text

1Vite
2React
3React Router
4TanStack Query

通常就是這種模式。

CSR 的優點是前端互動彈性很高，但初始畫面通常需要等待 JavaScript 執行與資料取得。

2. SPA 是什麼？

SPA 全名是：

Single Page Application

但 SPA 其實比較偏向「應用程式架構」，不是單純的 Rendering Strategy。

例如：

text

1/products
2   ↓
3/products/123
4   ↓
5/cart

切換頁面時不會重新載入整份 HTML，而是由 JavaScript 處理 routing。

所以常見情況是：

SPA 通常搭配 CSR。

但兩個不能完全畫上等號。

Next.js 也可以做到 client-side navigation，但不代表整個網站就是傳統 CSR SPA。

3. SSR：每次 Request 都 Render

SSR 的概念很簡單：

text

1User Request
2  ↓
3Server
4  ↓
5Render HTML / RSC
6  ↓
7Response

例如使用者資料：

tsx

1import { cookies } from 'next/headers'
2
3export default async function Page() {
4  const cookieStore = await cookies()
5
6  const user = await getUser(cookieStore)
7
8  return <Dashboard user={user} />
9}

因為 Cookie、Session 只有 Request 進來時才知道，所以這類內容適合 Request-time Rendering。

常見用途：

使用者 Dashboard
Session
Authorization
個人化內容

4. SSG：Build 時先產生

SSG 是：

在 Build 階段先把內容產生好。

例如：

tsx

1export default function AboutPage() {
2  return <h1>About</h1>
3}

Build：

text

1next build
2   ↓
3產生內容
4   ↓
5之後使用者直接拿現成結果

適合：

Landing Page
文件
很少更新的公開頁面
靜態內容

優點通常是速度快，而且不需要每次 Request 都重新運算。

5. ISR：SSG，但之後可以更新

ISR 可以理解成：

SSG + Revalidation

內容一開始先產生，但之後可以重新生成新版。

例如 Next.js 16：

tsx

1import { cacheLife } from 'next/cache'
2
3async function getPosts() {
4  'use cache'
5
6  cacheLife('hours')
7
8  return db.post.findMany()
9}

概念：

text

1Build
2 ↓
3Version A
4 ↓
5使用者取得 A
6 ↓
7一段時間後重新產生
8 ↓
9Version B

所以很適合：

Blog
商品頁
CMS
公開資料頁

這些資料不是每秒更新，但也不能永遠不變。

6. PPR：一個頁面不用只能選一種

PPR 全名：

Partial Prerendering

這是現在 Next.js 很重要的概念。

以前比較容易把頁面想成：

text

1Static
2vs
3Dynamic

但實際網站通常不是這麼單純。

例如商品頁：

tsx

1<ProductPage>
2  <Header />
3  <ProductInfo />
4
5  <Suspense fallback={<Skeleton />}>
6    <UserCart />
7  </Suspense>
8</ProductPage>

其中：

text

1ProductPage
2├─ Header
3│  └─ 可以預先 Render
4│
5├─ ProductInfo
6│  └─ Cached
7│
8└─ UserCart
9   └─ Request-time

PPR 可以讓：

text

1Header + ProductInfo

先送給使用者。

然後：

text

1UserCart

再透過 Suspense stream 回來。

所以不用因為頁面裡有一小塊 Dynamic Content，就整頁全部等待 SSR。

7. 那 RSC 又是什麼？

RSC 是：

React Server Components

這跟 SSR、SSG、ISR 不是完全同一層概念。

RSC 描述的是：

React Component 在 Server 還是 Client 執行。

例如：

tsx

1export default async function Page() {
2  const posts = await db.post.findMany()
3
4  return <PostList posts={posts} />
5}

這是一個 Server Component。

但這個 Component 最後可能：

Build time Render
Request time Render
使用 Cache
參與 PPR

所以：

text

1RSC ≠ SSR

Server Component 不代表一定每次 Request 都重新 Render。

8. Client Component 也不等於 CSR

例如：

tsx

1'use client'
2
3export function Counter() {
4  // interactive UI
5}

這是 Client Component。

但整個 Page 仍然可能是 Server Render 出來的。

所以：

text

1Client Component
2≠
3整頁 CSR

Client Component 比較代表：

這段 React 需要在 Browser 執行與 Hydrate。

例如：

onClick
useState
useEffect
Browser API

9. 最好用兩個層面理解

不要把全部名詞混在同一張表。

Rendering Timing

text

1CSR
2SSR
3SSG
4ISR
5PPR

回答的是：

這份內容什麼時候被產生？

React Execution Model

text

1Server Component
2Client Component

回答的是：

這個 React Component 在哪裡執行？

這樣就比較不容易混亂。

10. 一個 Next.js Page 可以同時包含很多模式

例如：

text

1Product Page
2│
3├─ Header
4│   └─ SSG / Cached Server Component
5│
6├─ Product Info
7│   └─ ISR / Cached Server Component
8│
9├─ User Profile
10│   └─ SSR / Request-time Server Component
11│
12└─ Add To Cart Button
13    └─ Client Component

再透過 PPR：

text

1先送：
2Header + Product Info
3
4再 Stream：
5User Profile
6
7Browser：
8Client Component 接手互動

所以現在問：

Next.js 是 SSR 還是 SPA？

其實已經不太精確。

更好的問題是：

這個頁面的哪些內容是預先產生、哪些需要 Request-time、哪些需要在 Client 執行？

最後整理

名詞	最簡單的理解
CSR	Browser Render
SPA	不重新載入整頁的應用架構
SSR	每次 Request 由 Server Render
SSG	Build 時預先 Render
ISR	Static Content 可以重新產生
PPR	同頁混合 Static 與 Dynamic
RSC	React Component 在 Server 執行
Client Component	React Component 在 Browser 執行

最重要的觀念是：

現代 Next.js 不需要整個網站只選 SSR、SSG 或 CSR 其中一種。

同一個頁面可以混合 Static、Cached、Request-time 與 Client-side Interactive Content。

也因此，比起問「這個網站是哪一種模式」，現在更值得問的是：

每一塊內容究竟需要在哪裡、什麼時候 Render？

當這個問題想清楚，SSR、SSG、ISR、PPR 這些縮寫就不會再像一群專門來佔記憶體的英文字母。

這篇文章對你有幫助嗎？

你的意見會幫助我們持續改善內容。

← 回到所有文章

Next.js 到底是 SSR、SSG、ISR 還是 SPA？一次搞懂常見 Rendering 模式

2026/08/26

搞懂 Next.js 的 CSR、SSR、SSG、ISR、PPR 與 RSC 差異，理解 Rendering 時機、Server Component、Client Component，以及現代 Next.js 如何在同一頁混合多種 Rendering 模式。

Nextjs App Router React

環境版本

本文內容以以下版本為基準：

json

1{
2  "next": "16.3.3",
3  "react": "19.2.8",
4  "@tanstack/react-query": "5.102.3"
5}

本文主要以 Next.js App Router 為例，整理 CSR、SSR、SSG、ISR、PPR、RSC 與 Client Component 之間的差異。

Next.js 的 Rendering 與 Cache 機制仍持續演進，不同版本的實際行為請以對應版本官方文件為準。

在學 Next.js 時，很容易同時看到：

每個縮寫都長得像考試範圍，但其實它們不是全部都在講同一件事。

最重要的是先分清楚：

有些是在講「什麼時候 Render」，有些是在講「React Component 在哪裡執行」。

常見 Rendering 模式

模式	全名	主要在哪裡 Render	特性
CSR	Client-Side Rendering	Browser	JS 載入後才產生 UI
SSR	Server-Side Rendering	Server，每次 Request	每次請求即時產生
SSG	Static Site Generation	Build time	Build 時預先產生
ISR	Incremental Static Regeneration	Build + 後續更新	靜態內容可以重新產生
PPR	Partial Prerendering	Static + Request-time	同頁混合靜態與動態內容

1. CSR：在 Browser Render

典型 React SPA 通常就是 CSR。

text

1Browser
2  ↓
3載入 HTML + JS
4  ↓
5React 執行
6  ↓
7取得 API
8  ↓
9Render UI

例如：

text

1Vite
2React
3React Router
4TanStack Query

通常就是這種模式。

CSR 的優點是前端互動彈性很高，但初始畫面通常需要等待 JavaScript 執行與資料取得。

2. SPA 是什麼？

SPA 全名是：

Single Page Application

但 SPA 其實比較偏向「應用程式架構」，不是單純的 Rendering Strategy。

例如：

text

1/products
2   ↓
3/products/123
4   ↓
5/cart

切換頁面時不會重新載入整份 HTML，而是由 JavaScript 處理 routing。

所以常見情況是：

SPA 通常搭配 CSR。

但兩個不能完全畫上等號。

Next.js 也可以做到 client-side navigation，但不代表整個網站就是傳統 CSR SPA。

3. SSR：每次 Request 都 Render

SSR 的概念很簡單：

text

1User Request
2  ↓
3Server
4  ↓
5Render HTML / RSC
6  ↓
7Response

例如使用者資料：

tsx

1import { cookies } from 'next/headers'
2
3export default async function Page() {
4  const cookieStore = await cookies()
5
6  const user = await getUser(cookieStore)
7
8  return <Dashboard user={user} />
9}

因為 Cookie、Session 只有 Request 進來時才知道，所以這類內容適合 Request-time Rendering。

常見用途：

使用者 Dashboard
Session
Authorization
個人化內容

4. SSG：Build 時先產生

SSG 是：

在 Build 階段先把內容產生好。

例如：

tsx

1export default function AboutPage() {
2  return <h1>About</h1>
3}

Build：

text

1next build
2   ↓
3產生內容
4   ↓
5之後使用者直接拿現成結果

適合：

Landing Page
文件
很少更新的公開頁面
靜態內容

優點通常是速度快，而且不需要每次 Request 都重新運算。

5. ISR：SSG，但之後可以更新

ISR 可以理解成：

SSG + Revalidation

內容一開始先產生，但之後可以重新生成新版。

例如 Next.js 16：

tsx

1import { cacheLife } from 'next/cache'
2
3async function getPosts() {
4  'use cache'
5
6  cacheLife('hours')
7
8  return db.post.findMany()
9}

概念：

text

1Build
2 ↓
3Version A
4 ↓
5使用者取得 A
6 ↓
7一段時間後重新產生
8 ↓
9Version B

所以很適合：

Blog
商品頁
CMS
公開資料頁

這些資料不是每秒更新，但也不能永遠不變。

6. PPR：一個頁面不用只能選一種

PPR 全名：

Partial Prerendering

這是現在 Next.js 很重要的概念。

以前比較容易把頁面想成：

text

1Static
2vs
3Dynamic

但實際網站通常不是這麼單純。

例如商品頁：

tsx

1<ProductPage>
2  <Header />
3  <ProductInfo />
4
5  <Suspense fallback={<Skeleton />}>
6    <UserCart />
7  </Suspense>
8</ProductPage>

其中：

text

1ProductPage
2├─ Header
3│  └─ 可以預先 Render
4│
5├─ ProductInfo
6│  └─ Cached
7│
8└─ UserCart
9   └─ Request-time

PPR 可以讓：

text

1Header + ProductInfo

先送給使用者。

然後：

text

1UserCart

再透過 Suspense stream 回來。

所以不用因為頁面裡有一小塊 Dynamic Content，就整頁全部等待 SSR。

7. 那 RSC 又是什麼？

RSC 是：

React Server Components

這跟 SSR、SSG、ISR 不是完全同一層概念。

RSC 描述的是：

React Component 在 Server 還是 Client 執行。

例如：

tsx

1export default async function Page() {
2  const posts = await db.post.findMany()
3
4  return <PostList posts={posts} />
5}

這是一個 Server Component。

但這個 Component 最後可能：

Build time Render
Request time Render
使用 Cache
參與 PPR

所以：

text

1RSC ≠ SSR

Server Component 不代表一定每次 Request 都重新 Render。

8. Client Component 也不等於 CSR

例如：

tsx

1'use client'
2
3export function Counter() {
4  // interactive UI
5}

這是 Client Component。

但整個 Page 仍然可能是 Server Render 出來的。

所以：

text

1Client Component
2≠
3整頁 CSR

Client Component 比較代表：

這段 React 需要在 Browser 執行與 Hydrate。

例如：

onClick
useState
useEffect
Browser API

9. 最好用兩個層面理解

不要把全部名詞混在同一張表。

Rendering Timing

text

1CSR
2SSR
3SSG
4ISR
5PPR

回答的是：

這份內容什麼時候被產生？

React Execution Model

text

1Server Component
2Client Component

回答的是：

這個 React Component 在哪裡執行？

這樣就比較不容易混亂。

10. 一個 Next.js Page 可以同時包含很多模式

例如：

text

1Product Page
2│
3├─ Header
4│   └─ SSG / Cached Server Component
5│
6├─ Product Info
7│   └─ ISR / Cached Server Component
8│
9├─ User Profile
10│   └─ SSR / Request-time Server Component
11│
12└─ Add To Cart Button
13    └─ Client Component

再透過 PPR：

text

1先送：
2Header + Product Info
3
4再 Stream：
5User Profile
6
7Browser：
8Client Component 接手互動

所以現在問：

Next.js 是 SSR 還是 SPA？

其實已經不太精確。

更好的問題是：

這個頁面的哪些內容是預先產生、哪些需要 Request-time、哪些需要在 Client 執行？

最後整理

名詞	最簡單的理解
CSR	Browser Render
SPA	不重新載入整頁的應用架構
SSR	每次 Request 由 Server Render
SSG	Build 時預先 Render
ISR	Static Content 可以重新產生
PPR	同頁混合 Static 與 Dynamic
RSC	React Component 在 Server 執行
Client Component	React Component 在 Browser 執行

最重要的觀念是：

現代 Next.js 不需要整個網站只選 SSR、SSG 或 CSR 其中一種。

同一個頁面可以混合 Static、Cached、Request-time 與 Client-side Interactive Content。

也因此，比起問「這個網站是哪一種模式」，現在更值得問的是：

每一塊內容究竟需要在哪裡、什麼時候 Render？

當這個問題想清楚，SSR、SSG、ISR、PPR 這些縮寫就不會再像一群專門來佔記憶體的英文字母。

這篇文章對你有幫助嗎？

你的意見會幫助我們持續改善內容。

← 回到所有文章

Next.js 到底是 SSR、SSG、ISR 還是 SPA？一次搞懂常見 Rendering 模式

搞懂 Next.js 的 CSR、SSR、SSG、ISR、PPR 與 RSC 差異，理解 Rendering 時機、Server Component、Client Component，以及現代 Next.js 如何在同一頁混合多種 Rendering 模式。

環境版本

常見 Rendering 模式

1. CSR：在 Browser Render

2. SPA 是什麼？

3. SSR：每次 Request 都 Render

4. SSG：Build 時先產生

5. ISR：SSG，但之後可以更新

6. PPR：一個頁面不用只能選一種

7. 那 RSC 又是什麼？

8. Client Component 也不等於 CSR

9. 最好用兩個層面理解

Rendering Timing

React Execution Model

10. 一個 Next.js Page 可以同時包含很多模式

最後整理

這篇文章對你有幫助嗎？

Next.js 到底是 SSR、SSG、ISR 還是 SPA？一次搞懂常見 Rendering 模式

搞懂 Next.js 的 CSR、SSR、SSG、ISR、PPR 與 RSC 差異，理解 Rendering 時機、Server Component、Client Component，以及現代 Next.js 如何在同一頁混合多種 Rendering 模式。

環境版本

常見 Rendering 模式

1. CSR：在 Browser Render

2. SPA 是什麼？

3. SSR：每次 Request 都 Render

4. SSG：Build 時先產生

5. ISR：SSG，但之後可以更新

6. PPR：一個頁面不用只能選一種

7. 那 RSC 又是什麼？

8. Client Component 也不等於 CSR

9. 最好用兩個層面理解

Rendering Timing

React Execution Model

10. 一個 Next.js Page 可以同時包含很多模式

最後整理

這篇文章對你有幫助嗎？

推薦文章

Next.js 16 Cache 怎麼選？搞懂 use cache、React.cache 與 TanStack Query

TanStack Query Devtools 教學：用視覺化工具看懂 Query、Cache 與 Mutation

Zustand Anti-patterns：哪些狀態不該放進 Store？

推薦文章

Next.js 16 Cache 怎麼選？搞懂 use cache、React.cache 與 TanStack Query

TanStack Query Devtools 教學：用視覺化工具看懂 Query、Cache 與 Mutation

Zustand Anti-patterns：哪些狀態不該放進 Store？