主题
Next.js 原理与运行时
Next.js 请求如何从入口走到 RSC、Flight 和客户端 Hydration？
高级回答要能把浏览器请求、服务端组件树、RSC payload、HTML 和导航更新串成一条可验证的链路。
面试官想考什么
- 首次访问和客户端导航返回的是同一种内容吗？ 考察 HTML、RSC 和 Flight 的区别。
- Server Component 为什么能减少客户端 JavaScript？ 考察组件边界和打包结果。
- Hydration 到底恢复了什么？ 考察服务端输出与客户端交互的关系。
- 页面卡顿发生在哪一段如何定位？ 考察分层排障能力。
一句话回答
text
首次请求通常生成 HTML 并附带 RSC 数据，客户端导航主要获取 Flight/RSC 更新；浏览器再用客户端组件代码恢复交互，所以要分别分析服务端渲染、RSC 序列化、网络传输、Hydration 和后续交互。面试回答详解
1. 典型链路
text
HTTP request -> route match -> Server Component render
-> RSC/Flight payload -> HTML stream
-> browser parse -> hydrate Client Components -> interactive UI客户端导航时，Next.js 可以请求 RSC payload，只更新受影响的布局和页面段，而不是完整刷新 HTML。具体缓存和预取策略由路由、请求头和运行时配置共同决定。
2. Server 与 Client 边界
Server Component 在服务端执行，不能直接使用浏览器事件、状态和大多数客户端 API；Client Component 从 use client 边界进入客户端 bundle，并在浏览器中恢复交互。边界越靠下，发送到浏览器的 JavaScript 通常越少，但跨边界传递的 props 必须可序列化。
3. Hydration 的含义
Hydration 不是重新生成一份完全独立的页面，而是让客户端 React 接管服务端已经输出的 DOM，并为 Client Component 连接事件和状态。服务端与客户端首轮输出不一致会出现 mismatch，常见原因是时间、随机数、浏览器 API 和条件分支。
4. 取舍和排障
- HTML 慢：查服务端数据、模板渲染和 TTFB。
- RSC payload 大：查跨边界 props、列表和重复数据。
- Hydration 慢：查 Client Component 数量和 bundle。
- 交互慢：查事件处理、长任务和第三方脚本。
不要把所有问题都归因于 SSR 或 RSC。
5. 生产边界
用户数据不能因为静态化或 CDN 缓存进入公共响应。错误边界要区分服务端渲染失败、客户端 hydration 失败和后续事件错误。观测时记录 route、render mode、release、RSC 请求和 hydration 性能。
可直接背诵的 30 秒回答
text
Next.js 首次访问通常是服务端组件生成 HTML，并附带 RSC 数据；客户端导航主要请求 Flight/RSC 更新。浏览器解析 HTML 后，只有 Client Component 需要客户端 bundle 和 Hydration 来恢复交互。排障时我会把 TTFB、RSC payload、bundle、hydration 和事件长任务分开看，避免把所有慢都归结为 SSR。扩展知识
HTML 与 Flight 的关系
- HTML：让首次页面尽快可见。
- Flight/RSC payload：描述服务端组件结果和客户端导航更新。
- 客户端 bundle：提供 Client Component 的交互逻辑。
面试官追问链
追问一：Server Component 是否完全没有客户端代码？
- 考察点：概念边界。
- 回答方向：Server Component 本身不发送其交互代码，但它引用的 Client Component 及其依赖仍会进入客户端 bundle。
追问二：Hydration mismatch 如何定位？
- 考察点：排障方法。
- 回答方向：检查首轮服务端和客户端输出，排除时间、随机数、浏览器 API、环境变量和不稳定数据，必要时缩小 Client Component 边界。
追问三：RSC payload 是否可以放敏感数据？
- 考察点：数据泄露意识。
- 回答方向：只能发送当前用户需要的最小数据；RSC 不是安全容器，服务端仍需鉴权、脱敏和缓存隔离。