68 lines
4.2 KiB
Markdown
68 lines
4.2 KiB
Markdown
---
|
||
id: frontend.ssr.interview
|
||
title: SSR 与 Next.js 面试题
|
||
type: interview
|
||
domain: frontend
|
||
stack: [ssr]
|
||
tags: [SSR, Next.js, Nuxt, 水合, 面试]
|
||
level: intermediate
|
||
related: [frontend.ssr.rendering-modes, frontend.ssr.nextjs-app-router]
|
||
week: [7, 16]
|
||
---
|
||
|
||
# SSR 与 Next.js 面试题
|
||
|
||
## 基础
|
||
|
||
### 【基础】CSR、SSR、SSG、ISR 有什么区别？
|
||
|
||
**参考答案**：区别在于 HTML 在哪里、什么时候生成：CSR 在浏览器；SSR 每次请求在服务器；SSG 在构建时；ISR 构建时生成并在过期后后台重新生成。按 SEO 需求、数据更新频率、个性化程度选择，一个站点可以混用。
|
||
|
||
**追问**：后台管理系统需要 SSR 吗？→ 一般不需要，没有 SEO 需求，CSR 更简单。
|
||
|
||
### 【基础】什么是水合？为什么会出现水合不匹配？
|
||
|
||
**参考答案**：浏览器加载 JS 后把交互能力附加到服务端渲染的 HTML 上。服务端和客户端第一次渲染结果不一致时出现不匹配，常见原因：时间、随机数、浏览器专有 API、时区和语言差异、无效的 HTML 嵌套。
|
||
|
||
**追问**：怎么修复？→ 浏览器专有逻辑放到挂载后执行，保证首次渲染两端一致；确实无法一致的地方使用框架提供的“仅客户端渲染”组件。
|
||
|
||
### 【基础】Next.js 中服务端组件和客户端组件的区别？
|
||
|
||
**参考答案**：服务端组件默认，在服务器上运行，可以直接访问数据和密钥，不增加浏览器端 JS，但不能使用状态和事件；客户端组件用 `"use client"` 声明，可以交互，会打包到浏览器。服务端组件可以渲染客户端组件，传递的 props 必须可序列化。
|
||
|
||
**追问**：边界怎么划分？→ 尽量把客户端组件下沉到需要交互的叶子节点。
|
||
|
||
## 进阶
|
||
|
||
### 【进阶】SSR 应用有哪些常见的坑？
|
||
|
||
**参考答案**：服务端访问浏览器 API；全局单例状态导致跨请求数据串用；个性化页面被 CDN 缓存；慢接口拖慢首屏；内存泄漏（服务端长期运行）；环境变量误暴露到客户端。
|
||
|
||
**追问**：跨请求状态污染怎么避免？→ 每个请求创建新的 store 实例（Pinia、Redux），不使用模块级可变变量保存用户数据。
|
||
|
||
### 【进阶】Next.js 的路由处理器和 Server Actions 怎么选？
|
||
|
||
**参考答案**：路由处理器是标准的 HTTP 接口，适合给外部调用、Webhook、流式响应；Server Actions 适合表单提交和页面内的数据变更，可以直接在组件中调用并配合重新验证缓存。两者都要做鉴权和输入校验。
|
||
|
||
**追问**：Server Actions 安全吗？→ 它本质上也是公开的 HTTP 端点，必须校验身份、权限和参数，不能因为“只在页面里调用”就省略。
|
||
|
||
### 【进阶】什么是流式 SSR？
|
||
|
||
**参考答案**：服务器先发送页面外壳和已就绪的部分，慢数据对应的部分用 Suspense 边界包裹，准备好后通过同一个响应继续发送并插入页面。首字节和首屏更快，慢接口不阻塞整页。
|
||
|
||
**追问**：和 AI 的流式输出是一回事吗？→ 不是。流式 SSR 是页面 HTML 的分块发送；AI 流式输出是接口逐步返回生成的内容，两者可以同时使用。
|
||
|
||
## 场景题
|
||
|
||
### 【场景题】公司帮助中心 SEO 很差，同时要加智能客服，你怎么做？
|
||
|
||
**参考答案**：用 Next.js / Nuxt 重建，文章 SSG + 按需重新验证，个人页面动态渲染且禁止公共缓存；智能客服为客户端组件，通过 BFF 路由处理器鉴权、限流后转发到 AI 服务并透传流。详见[帮助中心场景](scenarios/help-center.md)。
|
||
|
||
**追问**：文章更新后多久能被看到？→ 取决于重新验证策略：基于时间的会有延迟；CMS 回调触发按路径重新验证可以做到几乎实时。
|
||
|
||
### 【场景题】Next.js 应用上线后，首屏可见但几秒内点击无反应，为什么？
|
||
|
||
**参考答案**：HTML 已经显示，但客户端 JS 还没加载和水合完成。排查：客户端组件过多、包体积大、第三方脚本阻塞、主线程长任务。优化：减少客户端组件、拆包和懒加载、延迟加载第三方脚本、关注 INP 指标。
|
||
|
||
**追问**：怎么量化？→ 看 Core Web Vitals 中的 INP 和 TBT，以及包体积分析报告。
|