一、SSR 概述
SSR（Server-Side Rendering）是指在服务器端生成 HTML 页面，并将其直接返回给浏览器的渲染方式。
在前端早期阶段，SSR 是主流，后来因性能优化和用户体验的需求逐渐发展出 SPA（单页应用）。然而，SPA 的缺陷（如 SEO 问题和首屏加载缓慢）促使大家重新关注 SSR，并结合 CSR（Client-Side Rendering）以解决这些问题。
（一）SSR 的优缺点
1. 优点
- SEO 友好：
- 由于服务器直接输出完整 HTML 页面，爬虫能够轻松读取内容。
- 首屏加载快：
- 直接返回已渲染的 HTML，避免等待客户端加载 JavaScript 和数据后渲染。
- 更好的用户体验：
- 减少白屏时间，提升首屏渲染速度。
2. 缺点
- 服务器性能压力大：
- 每次请求都需要生成完整页面，服务器负载增加。
- 复杂度高：
- 需要处理客户端和服务器代码的同步和协作。
- 开发调试难度增加：
- SSR 需要关注服务端环境和客户端环境的差异。
（二）SSR 与 SPA 的对比
| 特性 | SSR | SPA |
|---|---|---|
| SEO 支持 | 优秀，页面直接输出 HTML | 较差，需要额外配置动态渲染或预渲染。 |
| 首屏渲染速度 | 较快，HTML 直接生成页面内容 | 较慢，依赖 JS 加载和渲染。 |
| 后续交互 | 需要重新请求页面，体验可能不够流畅 | 动态更新内容，体验流畅。 |
| 服务器压力 | 较高，每次请求需要渲染完整页面 | 较低，客户端处理逻辑较多。 |
| 开发复杂度 | 高，需要 SSR 架构支持（如 Next.js 等） | 较低，集中于前端开发。 |
（三）SSR + CSR 的结合
现代前端开发往往结合 SSR 和 CSR 的优点，形成混合渲染模式。
- 流程：
- 服务器端生成首屏 HTML 并返回给客户端（SSR）。
- 客户端接管页面，加载 JavaScript 并实现后续交互（CSR）。
- 常见实现：
- React + Next.js
- Vue + Nuxt.js
优势
- 兼顾了 SEO 和用户体验。
- 首屏加载速度快，同时支持页面动态交互。
（四）实现 SSR 的常见框架
1. React：Next.js
- 官方提供开箱即用的 SSR 功能。
- 支持动态路由、静态生成（SSG）和增量静态生成（ISR）。
- 易于与 React 生态系统集成。
2. Vue：Nuxt.js
- 为 Vue 提供服务端渲染的框架。
- 提供模块化架构，支持 SEO、静态站点生成等功能。
3. 其他框架：
- SvelteKit（Svelte）
- Astro（支持多种前端框架）
（五）面试常见问题
1. SSR 与 CSR 的优劣势对比是什么？
- SSR 优势：
- SEO 友好，首屏加载快。
- SSR 劣势：
- 服务器压力大，开发复杂度高。
- CSR 优势：
- 动态交互体验好，服务器压力小。
- CSR 劣势：
- 首屏加载慢，SEO 较差。
2. SSR 如何解决 SEO 问题？
- SSR 在服务端直接生成 HTML 内容，搜索引擎爬虫能够直接获取页面信息，而无需等待 JavaScript 渲染。
3. SSR 如何优化首屏加载时间？
- 提前在服务器端完成页面渲染，避免浏览器等待 JavaScript 加载和数据请求。
4. SSR 的实现有哪些技术难点？
- 客户端和服务端代码同步：
- 需要编写兼容服务端和客户端的代码。
- 状态管理：
- 保证服务端渲染的状态与客户端初始化状态一致。
- 路由处理：
- 同时支持服务端路由和客户端路由。
5. SSR + CSR 的流程是怎样的？
- 服务器完成 HTML 的首屏渲染返回给客户端；
- 客户端加载 JS 接管页面逻辑，完成动态交互。
二、总结
SSR 的应用场景主要集中在对 SEO 和首屏加载性能有高要求的项目。通过 SSR + CSR 的结合，可以有效弥补传统 SSR 和 SPA 的不足。现代框架如 Next.js、Nuxt.js 等极大地简化了 SSR 的开发和实现，使其成为主流方案之一。在实际开发中，需要根据业务需求选择合适的渲染方式。
