01. 渲染模式详解 (SSR / SSG / CSR)

这是 Next.js 最核心、也是面试最高频、开发最实用的部分。理解了这三个缩写，你就理解了 Next.js 的灵魂。

🍔 餐厅点餐理论

为了通俗易懂，我们把 “网页渲染” 比作 “餐厅做饭”。

用户 (Client) = 食客
服务器 (Server) = 厨房/厨师
HTML 页面 = 菜肴

1. CSR (Client-Side Rendering) - 客户端渲染

代表：传统的 React SPA (Create React App, Vite)

比喻：自助火锅

厨师（服务器）只给你端上来一口锅底（空的 HTML）和一堆生食材（JS 文件）。
你（浏览器）需要在桌子上自己煮熟（执行 JS）才能吃（看到完整的页面）。

代码表现：当你查看网页源代码时，<body> 里通常只有一个 <div id="root"></div>，内容是空的。

✅ 优点：煮好后，想吃什么涮什么，不用麻烦厨师，体验流畅。
❌ 缺点：
- 首屏慢：要等食材送来、水烧开才能吃（白屏时间长）。
- SEO 差：搜索引擎爬虫过来一看，锅里是空的，它就走了（不执行 JS 很难抓取内容）。

2. SSR (Server-Side Rendering) - 服务端渲染

代表：Next.js (默认/动态渲染)

比喻：现点现做

你点菜（发起请求）。
厨师（服务器）在厨房把菜完全炒好（生成完整的 HTML）。
端到你面前，你直接开吃。

代码表现：查看网页源代码，你能看到完整的 HTML 内容（文字、图片标签都在）。

// 这是一个 SSR 页面组件示例
// 在 Next.js 中，默认就是服务端组件
export default async function Page() {
  // 这个 fetch 是在服务器端运行的！
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' })
  const data = await res.json()
 
  return <div>{data.title}</div>
}

✅ 优点：
- 首屏快：端上来就能吃。
- SEO 好：爬虫看到的是做好的菜。
- 数据实时：每次刷新都是最新炒的菜。
❌ 缺点：
- 厨师压力大（服务器负载高）。
- 如果做菜慢，用户就要一直等（白屏等待）。

3. SSG (Static Site Generation) - 静态站点生成

代表：Next.js (构建时生成)

比喻：自助餐/盒饭

餐厅开门前（项目 Build 打包阶段），厨师就把所有菜都做好了，摆在架子上。
无论谁来，直接拿走一份，完全不需要等待。

场景：博客文章、文档、官网介绍页（内容不经常变的）。

代码表现：在 Next.js 中，如果你的页面没有使用动态函数（如 cookies, headers）且数据获取被缓存，它会自动变成 SSG。

✅ 优点：极致的快（直接由 CDN 分发静态文件），服务器几乎没压力。
❌ 缺点：内容延迟。如果菜单变了，必须重新做所有盒饭（重新打包部署）。

4. ISR (Incremental Static Regeneration) - 增量静态再生

代表：Next.js 的杀手锏

比喻：带保质期的盒饭

厨师先做好一批盒饭（SSG）。
设定一个保质期（比如 60秒）。
前 60秒内来的人，拿走的都是旧盒饭（快）。
第 61秒有个人来了，厨师给他旧盒饭，但同时悄悄在后台炒一份新的。
第 62秒的人来，拿到的就是新炒好的盒饭了。

代码实现：只需要在 fetch 请求中加一个参数：

// 每 60 秒更新一次数据
fetch('https://api.example.com/data', { next: { revalidate: 60 } })

🎯 总结：怎么选？

Next.js (App Router) 现在的强大之处在于，它是 混合渲染 的。你可以在同一个应用里：

首页用 ISR (保证速度，数据也可以较新)。
个人中心用 SSR (数据必须实时，且私密)。
关于我们用 SSG (万年不变)。
复杂的交互组件（如点击按钮弹出弹窗）用 CSR (Client Component)。

模式	关键词	适用场景
CSR	浏览器渲染	仪表盘、交互极其复杂的页面
SSR	实时服务端	动态流、个性化推荐、后台管理
SSG	构建时生成	博客文章、帮助文档
ISR	定时更新	新闻列表、电商商品详情

Muliminty Note

探索

01-渲染模式详解(SSR-SSG-ISR)