一、Next.js 面试追问（SSR / SSG / ISR 深挖）
1️⃣ 面试官：SSR、SSG、ISR 本质区别？
❌ 初级回答
一个服务端渲染，一个静态生成
✅ 中高级标准回答（一定按这个结构）
本质区别在于 HTML 生成的时机不同
| 渲染方式 | 生成时机 | 适合场景 |
|---|---|---|
| SSR | 每次请求 | 个性化数据 |
| SSG | 构建时 | 内容稳定 |
| ISR | 构建后增量 | 内容半实时 |
🔥 面试官追问：
ISR 是怎么做到"不重新构建"的？
✅ 你要答：
-
第一次访问 → 用旧 HTML
-
到期后 → 后台重新生成
-
下次访问 → 新 HTML
📌 关键词一定要说：
stale-while-revalidate
2️⃣ 面试官：SSR 会不会拖慢服务器？
❌ 错误回答
会，很慢
✅ 正确回答
会增加服务器压力，但可通过缓存、CDN 缓解
你要提 3 点：
-
页面缓存
-
数据缓存
-
CDN
🔥 加一句秒杀：
"SSR 性能问题不是不能用，而是要配合缓存策略。"
3️⃣ 面试官：Next.js 13 App Router 和 Pages Router 区别？
核心一句话
App Router 是 以 Server Components 为核心的架构升级
对比重点（面试必考）
| Pages Router | App Router | |
|---|---|---|
| 渲染模型 | CSR/SSR | RSC |
| 数据获取 | getServerSideProps | fetch（服务端） |
| Layout | 无 | 内置 Layout |
| Streaming | ❌ | ✅ |
🔥 面试官爱听：
"App Router 减少 JS 体积，把计算前移到服务端。"
4️⃣ 面试官：Server Components 有什么优势？
你一定要说：
-
不打包到客户端
-
可直接访问数据库
-
减少 JS 体积
-
提升首屏性能
📌 禁忌点（一定要说你知道）：
Server Component 不能用 useState/useEffect
二、React vs Next.js 项目选型模拟题（必过）
5️⃣ 面试官：一个后台系统，你选 React 还是 Next.js？
❌ 错误
都可以
✅ 正确
纯 React
理由（说 3 点）：
-
不需要 SEO
-
页面多、交互复杂
-
SSR 成本高、收益低
6️⃣ 面试官：一个官网 / ToC 产品？
✅ 标准答案：
Next.js
理由：
-
SEO
-
首屏
-
分享预览
-
多终端访问
7️⃣ 面试官：一个混合项目怎么选？
🔥 高级回答（很加分）：
后台：React
官网 / 营销页：Next.js
共享组件 & 设计体系
📌 体现你有架构思维
三、把你项目包装成 Next.js 面试亮点（直接可用）
下面我给你 "项目亮点 → 面试问题 → 标准答案"
亮点 1：SSR + SEO 优化
面试官：你为什么用 SSR？
✅ 回答模板：
我们首页和内容页对 SEO 要求高，用 SSR 输出完整 HTML，提高首屏和收录。
亮点 2：ISR 提升构建效率
面试官：为什么不用纯 SSG？
✅ 回答模板：
内容更新频繁，纯 SSG 构建成本高，用 ISR 实现增量更新。
亮点 3：Server Components 减少 JS 体积
面试官：RSC 带来了什么收益？
✅ 回答模板：
减少客户端 JS，首屏加载明显改善，复杂计算放在服务端。
亮点 4：API Routes / Server Actions
面试官：为什么不用单独后端？
✅ 回答模板：
作为 BFF 层，减少前后端通信复杂度，适合轻业务。
亮点 5：性能优化（必说）
你可以说你做了：
-
Image Optimization
-
Dynamic Import
-
Streaming
-
Prefetch
🔥 面试官爱听一句：
"Next.js 默认优化，但我们会针对业务再调优。"
四、面试最后总结
React 更适合复杂交互和后台系统，
Next.js 更适合首屏、SEO、对外产品。
👉「继续深挖 App Router / RSC」