共 11 道 SSR 与 SSG 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
CSR vs SSR vs SSG 方式 说明 优势 劣势 ------ ------ ------ ------ CSR 客户端渲染 交互流畅 首屏慢、SEO 差 SSR 服务端渲染 首屏快、SEO…
模式 渲染时机 首屏 SEO 服务端压力 --- --- --- --- --- CSR 浏览器 慢 差 无 SSR 每次请求 快 好 高 SSG 构建时 极快 好 无 ISR 构建+定时再生 极快 …
注水 指 SSR 把 HTML 发给浏览器后，客户端 JS 接管已存在的 DOM 并绑定事件 ，让它变成可交互的 React/Vue 应用。 过程： 1. 服务端渲染出带内容的 HTML，随页面返回 …
同构 指 同一份代码/组件既能在服务端渲染、又能在客户端运行 ，避免为两端各写一套。 好处 ：首屏 SSR（快、SEO 好）+ 客户端交互（SPA 体验），代码只写一份。 注意点（服务端特有坑） ： …
服务端渲染的 HTML 与客户端首次渲染的 结构/文本不一致 ，React/Vue 会丢弃服务端 DOM 重新渲染，并报警告，严重时导致闪烁/状态错乱。 常见原因 ： 1. 直接使用 Date.now…
SEO ：搜索引擎爬虫拿到的是 完整 HTML 文本 （而非空壳 + 等 JS 执行），抓取/收录更可靠，社交分享卡片（OG 标签）也能正确解析。纯 CSR 的 SPA 对部分爬虫不友好。 首屏性能 …
传统 SSR 等整个页面渲染完 才把 HTML 一次性发给浏览器，慢组件会拖垮整页 TTFB。 流式 SSR 利用 HTTP 流式响应， 先发 shell（骨架/导航），再按组件就绪顺序分块发送内容 …
服务端取到的数据要 序列化进 HTML ，客户端注水时直接复用，避免再请求一次（防瀑布流/闪烁）。 注意安全 ： - 用 JSON.stringify 后要做 XSS 转义（< 等），防 <scrip…
SSG 在 构建阶段 执行取数逻辑，把结果渲染进静态 HTML，之后所有请求都返回这份固定文件（可 CDN 缓存）。 限制 ： - 数据在构建时固化， 不能依赖请求时的参数 （如用户 cookie、实…
静态资源 （JS/CSS/图片）：带内容哈希文件名 → Cache-Control: max-age=31536000, immutable，永远命中强缓存。 HTML 页面 ： - SSG 页面：可…
SSR 的代价 ： - 需要服务端运行时（成本、运维、扩缩容） - 每次请求都渲染，TTFB 可能更高、服务端 CPU 压力大 - 调试复杂（hydration mismatch、双端环境差异） - …