SPA、SSR、SSG、CSR 技术面试题解析

SPA 的核心特点是什么？
- 答案：
  - 单 HTML 页面，内容动态加载。
  - 前端路由管理页面切换。
  - 数据通过 AJAX/API 动态获取。
SPA 的优缺点是什么？
- 优点：
  - 用户体验流畅，无页面刷新。
  - 前后端分离，开发效率高。
- 缺点：
  - 首屏加载时间较长（需加载整个 JS Bundle）。
  - SEO 不友好（初始 HTML 无内容）。
如何优化 SPA 的首屏加载速度？
- 答案：
  - 代码分割（Code Splitting）。
  - 预渲染关键页面。
  - 使用 CDN 加速静态资源。

SSR 的核心原理是什么？
- 答案：
  - 服务器生成完整 HTML 返回给客户端。
  - 客户端接管后通过“水合（Hydration）”激活交互。
SSR 的优缺点是什么？
- 优点：
  - SEO 友好，首屏加载快。
  - 更好的用户体验（直接显示内容）。
- 缺点：
  - 服务器压力大，成本高。
  - 开发复杂度高（需处理 Node.js 环境）。
什么是“水合（Hydration）”？
- 答案：
  - 客户端 JS 将静态 HTML 转换为可交互的 React/Vue 组件的过程。
如何避免 SSR 中的 XSS 攻击？
- 答案：
  - 对服务端渲染的数据进行转义（如 React 的 dangerouslySetInnerHTML 需谨慎使用）。
  - 使用安全的模板引擎（如 Vue 的 v-text 自动转义）。
如何优化 SSR 的性能？
- 答案：
  - 启用服务器缓存（如 Redis）。
  - 使用流式渲染（Streaming SSR）。
  - 按需加载非关键组件。

SSG 的核心原理是什么？
- 答案：
  - 构建时生成静态 HTML 文件，直接部署到 CDN。
  - 适用于内容不频繁变化的场景（如博客、文档站）。
SSG 的优缺点是什么？
- 优点：
  - 极快的加载速度（CDN 缓存）。
  - 天然 SEO 友好。
- 缺点：
  - 不适合高度动态内容。
  - 构建时间随页面数量增加而增长。
SSG 如何实现动态数据更新？
- 答案：
  - 增量静态生成（ISR）：Next.js 的 getStaticProps + revalidate。
  - 客户端动态加载数据（混合 SSG + CSR）。
如何优化 SSG 的构建时间？
- 答案：
  - 按需生成页面（动态路由）。
  - 并行化构建任务。
  - 使用增量构建（如 Gatsby 的 Incremental Builds）。

CSR 的核心流程是什么？
- 答案：
  1. 浏览器加载 HTML 和空容器。
  2. 下载并执行 JS Bundle。
  3. JS 动态渲染页面内容。
CSR 的优缺点是什么？
- 优点：
  - 前后端完全解耦。
  - 交互体验流畅。
- 缺点：
  - 首屏性能差（需等待 JS 加载执行）。
  - SEO 困难（爬虫无法执行 JS）。
如何优化 CSR 的性能？
- 答案：
  - 代码分割（React.lazy + Suspense）。
  - 预加载关键资源（<link rel="preload">）。
  - 使用 Service Worker 缓存资源。

SSR 与 SSG 的区别是什么？
- 答案：
  - SSR：每次请求动态生成 HTML，适合高度个性化页面。
  - SSG：构建时生成 HTML，适合内容静态的页面。
SPA 与 MPA（多页应用）的适用场景？
- 答案：
  - SPA：后台管理系统、复杂交互应用。
  - MPA：内容型网站（SEO 优先），页面间无复杂状态共享。
如何结合 SSR 和 CSR（混合渲染）？
- 答案：
  - 首屏使用 SSR，后续交互使用 CSR。
  - 示例：Next.js 的 getServerSideProps + 客户端路由。
Next.js/Nuxt.js 如何实现 SSG？
- 答案：
  - Next.js：getStaticProps + getStaticPaths。
  - Nuxt.js：nuxt generate 命令生成静态文件。
如何选择 SPA、SSR 或 SSG？
- 答案：
  场景推荐方案
  高交互后台系统 SPA（CSR）
  电商详情页（SEO 优先） SSR
  博客/文档站 SSG
  动态+静态混合内容 SSG + ISR

SPA、SSR、SSG、CSR 技术面试题解析 ​