一文搞懂客户端渲染和服务端渲染

## 简介

网站客户端渲染（`CSR`）和服务端渲染（`SSR`）是两种常见的网页渲染方式，它们在实现原理、优缺点和适用场景上有显著区别。

这里先说一个基础应用场景举例：
1. 客户端渲染：各种管理系统。一般来说，用前后端分离架构开发的系统，都是客户端渲染的系统。
2. 服务端渲染：企业官网、资讯网站、博客网站等。一些内容比较固定的网站，都是采用服务端渲染。

至于为什么会有这样的分类，建议你向下读。

<!-- more -->

## 客户端渲染（Client-Side Rendering, CSR）
1. 原理：

初次加载时，服务器仅发送一个 `HTML` 骨架和一个包含应用逻辑的 `JavaScript` 文件。浏览器在接收到文件后，通过执行 `JavaScript` 代码来生成并显示页面内容。

2. 优点：

- 用户体验： 页面之间的切换通常非常快，因为大多数内容是在客户端动态生成的。
- 带宽效率： 初次加载后，不需要频繁地从服务器请求页面数据，减少了带宽消耗。
- 丰富的交互性： 更容易实现复杂的交互和动态效果。

3. 缺点：

- SEO 不友好： 由于搜索引擎爬虫有时难以执行 `JavaScript`，导致页面内容无法正确索引。
- 初次加载时间长： 需要加载和执行大量 `JavaScript` 文件，初次加载时间可能较长。
- 性能问题： 如果客户端设备性能较差，渲染速度会受到影响。

4. 应用场景：

- 单页应用（SPA）：如 `Gmail`、`Twitter`。
- 高度交互的用户界面：如各类仪表盘和实时更新的应用。

5. 常见开发技术：

- React： `Facebook` 开发的前端库，专注于构建用户界面。
- Vue.js： 轻量级的前端框架，易于上手和集成。
- Angular： `Google` 开发的框架，适合大型应用。

## 服务端渲染（Server-Side Rendering, SSR）

1. 原理：

服务器根据请求生成完整的 `HTML` 页面，并将其发送到客户端。浏览器直接显示从服务器接收到的完整页面。

2. 优点：

- SEO 友好： 生成的 `HTML` 是完整的内容，搜索引擎爬虫能够轻松索引。
- 初次加载快： 由于服务器已经生成了完整的 `HTML`，初次加载时间较短。
- 性能稳定： 不依赖客户端的计算能力，适合性能较差的设备。

3. 缺点：

- 服务器负载： 服务器需要处理更多的渲染工作，可能导致更高的服务器负载。
- 用户体验： 页面切换时，用户可能会看到白屏或闪烁。
- 交互性： 实现复杂交互可能会比客户端渲染更困难。

4. 应用场景：

- 内容丰富且需要 `SEO` 的网站：如博客、新闻网站。
- 电子商务网站：如电商平台，需要快速加载和 `SEO` 支持。

5. 常见开发技术：

- Next.js：基于 `React` 的框架，支持混合渲染模式（`SSR` 和 `CSR`）。
- Nuxt.js：基于 `Vue.js` 的框架，提供开箱即用的服务端渲染支持。

## 总结
1. `CSR` 更适合需要复杂交互的应用，但初次加载较慢，`SEO` 支持不佳。
2. `SSR` 更适合内容驱动的网站，初次加载快，`SEO` 友好，但服务器负载较大，用户体验可能略差。

## 其他语言服务端渲染举例

### Java
1. Spring Boot + Thymeleaf：

`Spring Boot` 是一个简化了 `Spring` 应用开发的框架，用于快速构建生产级别的独立应用。`Thymeleaf` 是一个现代的服务器端 `Java` 模板引擎，可以与 `Spring` 集成，用于生成 `HTML` 内容。适用场景： 企业级应用、大型 `Web` 系统、需要复杂业务逻辑的应用。

2. JSP：

古老的 `JSP` 技术。

### Python
1. Django：

`Django` 是一个高级 `Python Web` 框架，鼓励快速开发和清洁、实用的设计。内置模板引擎支持，方便实现服务端渲染。适用场景： 内容管理系统（`CMS`）、新闻网站、电子商务平台。

2. Flask + Jinja2：

`Flask` 是一个轻量级的 `Python Web` 框架，适合小型应用和微服务。`Jinja2` 是 `Flask` 默认的模板引擎，用于生成 `HTML` 内容。适用场景： 小型项目、原型开发、微服务架构中的组件。

### Go
1. Gin + HTML 模板：

`Gin` 是一个高性能的 `Go Web` 框架，类似于 `Python` 的 `Flask`。支持使用 `Go` 的标准模板库进行 `HTML` 渲染。适用场景： 高性能 `Web` 应用、微服务。

2. Beego：

`Beego` 是一个全功能的 `Go Web` 框架，内置 `ORM`、缓存、`Session` 等功能。提供内置的模板引擎支持，方便进行服务端渲染。适用场景： 大型 `Web` 应用、企业级应用。

3. Echo + HTML 模板：

`Echo` 是一个高性能、扩展性好的 `Go Web` 框架。支持多种模板引擎，如 `Go` 标准模板、`Pongo2`（`Django` 风格模板）。适用场景： 高性能 `Web` 服务、`API` 服务。