第 19 节 · 为什么有 Next.js

📌 版本信息：Next.js 15.x（App Router 稳定；2026-08-29 核对，装最新版即可） 📚 来源：Next.js 官方文档 ｜ Learn Next.js 中文 🧭 定位：React 部分开场——回答你问过的问题："React+Vite 能做的，Next 都能做吗？"

一、这一节的目标

1. 说出 SPA（Vite 版）的四个痛点
2. 精确理解 SSR / SSG / ISR / CSR 四种渲染策略
3. 理解 Next 与 React+Vite 的分工（第 02 模块前言的完整版答案）
4. 建立选型直觉：什么项目选什么

---

二、SPA 的四个痛点

React+Vite 构建的 SPA：服务器只发一个空壳 index.html，全部内容由浏览器里的 JS 现场渲染。

痛点	后果
① 首屏空白→白屏	要等 JS 下载执行完才有内容（弱网/低端机痛苦）
② SEO 差	爬虫拿到的 HTML 是空壳——内容站/官网排名毁灭性
③ 分享/预览难	微信/短信卡片没有标题缩略图（OG 元数据在 JS 里）
④ JS 包越来越大	所有页面代码打进首屏（第 15 节 lazy 能缓解但治标）

根因：渲染只发生在浏览器（客户端渲染 CSR）。

---

三、四种渲染策略（一图流）

CSR  客户端渲染   服务器发空壳 → 浏览器 JS 渲染        （React+Vite 的方式）
SSR  服务端渲染   每次请求 → 服务器现场渲染 HTML → 直出  （内容总是最新）
SSG  静态生成     构建时就把 HTML 做好 → CDN 直接发      （最快，适合内容固定）
ISR  增量静态再生  SSG + "每 N 秒/按需后台更新"           （兼顾新鲜与快）

	CSR	SSR	SSG	ISR
首屏	慢	快	最快	快
SEO	差	好	好	好
数据实时性	好	最好	构建时	准实时
服务器成本	极低（静态）	高（每请求计算）	极低	中
适合	后台/工具/大屏	搜索页/个性化	文档/博客/官网	电商列表/资讯

一句话选型：地图大屏/数据工具 → CSR 足够（甚至更优）；内容型站点（博客/导览/官网）→ SSG/ISR；搜索型 → SSR。

---

四、Next 与 React+Vite 的完整分工答案

React      = 界面库（两者都用）
Vite       = 开发服务器 + 打包（CSR 路线的工具链）
Next.js    = React 上层框架：文件路由 + 服务端渲染 + 数据获取约定 + 打包 + 部署
             （用了 Next 就不需要再配 Vite/react-router）

• Next 包含 CSR 能力：默认也能写纯客户端组件——所以"React+Vite 能做的 Next 都能做"成立
• 反向不成立：Vite 做不了 SSR/SSG（要自己拼一套，成本远超直接用 Next）
• 代价：Next 需要 Node 服务器常驻（SSR/ISR 页面）；Vite 产物扔 Nginx 就完事——部署复杂度是真实成本
• 为什么本课两者都教：WebGIS 主战场（大屏/平台/工具）是 CSR 的天下（React+Vite）；内容型地图站（C-03b/C-03c）用 Next——各打各的强项

---

五、动手跟练：19 · Vite vs Next 对照页

配套文件：03-react-nextjs/examples/19-Vite与Next对照.html（单文件对照笔记页，Live Server 打开）

内容：左右对照同一需求（"城市导览站"）在两种路线下的实现清单——

• 左（Vite）：react-router 路由表、useEffect 取数、SPA 三痛点、部署=Nginx 静态
• 右（Next）：文件即路由、服务端取数、四种渲染策略标注每页选择、部署=Vercel/Node

完成 4 个 TODO：给 6 个页面场景（大屏/博客/搜索/后台/作品集/导览）各自选渲染策略并写一句理由；回答"为什么本课大屏项目不用 Next"；指出对照表里"Next 包含 CSR"的证据行；写出你个人博客（C-03c）每页的策略。

通关标准：

• 四种渲染策略能各举一例
• 能不看资料说出 SPA 四痛点
• 能为自己 C-03c 的每个页面说出策略选择

---

六、自测题

1. SPA 首屏慢的根因？
2. SSG 和 ISR 的区别一句话？
3. 为什么微信分享卡片在 SPA 里经常没有缩略图？
4. "地图大屏用 Next"有什么额外的成本与收益？值得吗？
5. Next 项目里还能写 CSR 组件吗？

参考答案

1. 渲染只发生在浏览器：必须等 JS 下载执行后才产生内容。
2. SSG 构建时生成好；ISR 在 SSG 基础上按时间/按需在后台重新生成（内容能"新鲜"）。
3. 分享卡片由爬虫读 HTML 的 OG 标签生成，SPA 的 HTML 是空壳（除非做预渲染）。
4. 收益：SEO 无用武之地（大屏无爬虫需求）、多一层 Node 服务器与水合成本；基本不值得——除非要顺带做官网/登录页 SEO。
5. 能——加 "use client" 的组件就是传统 CSR 写法，Next 里大量存在（交互组件全是）。

---

七、下一步

动机就位 → 第 20 节：App Router 与项目结构，正式动手写 Next。