CSR、SSR、SSG

网页渲染方式主要有：

• 客户端渲染（Client Side Rendering）
• 服务端渲染（Server Side Rendering）
• 静态站点生成（Static Site Generation）

CSR

客户端渲染，就是渲染工作在浏览器端，而不是服务端。比如用 React 或 Vue 开发的 SPA 页面，打开网页时请求一堆 js 和 css 文件，然后在客户端渲染出页面。

优点：

1. 前后端分离。前端可以选择 React、Vue 等框架开发，而不用遵循后端特定的模板
2. 减轻服务器压力。服务器返回不加工的 html，渲染工作在客户端进行
3. 用户体验好。客户端渲染可以实现无刷新页面更新，提高用户体验
4. 可扩展性强。客户端渲染可以通过异步加载数据和组件，实现模块化开发，提高代码复用性和可扩展性

缺点：

1. 首屏加载慢。需要加载大量的 js 和 css 文件，导致首屏加载时间较长，影响用户体验
2. 不利于 SEO。搜索引擎爬虫无法执行 js 代码，无法获取渲染后的最终 html
3. 安全性问题。客户端渲染需要将数据和逻辑代码暴露在客户端，容易受到 XSS 攻击和数据篡改等安全问题的影响。

SSR

服务端渲染，输出的是渲染完成的 html，整个渲染过程是在服务端进行的。例如 JSP、PHP 都是服务端渲染。

优点：

1. 有利于 SEO。由于页面直接在服务端渲染，搜索引擎直接抓取最终的页面结果
2. 首屏渲染时间变短。html 所需要的数据都在服务端处理好了

缺点：

1. 占用服务器资源。渲染工作都在服务端完成
2. 用户体验不好。每次跳转到新页面都需要重新在服务端渲染整个页面，不能只渲染可变区域

SSG

静态站点生成器，在构建的时候把结果页面输出成 html 放到磁盘，每次访问直接把 html 返回给客户端，相当于静态资源。

优点：

1. 减轻服务器压力。可以把生成的静态资源 html 放到 CDN 上，合理利用缓存
2. 有利于 SEO。html 已经提前生成好了，不需要服务端和客户端去渲染

缺点：

1. 只适用于静态数据。对于经常需要改动的数据，需要每次重新生成页面
2. 用户体验不好。每次打开新页面都需要重新渲染整个页面，不能只渲染可变区域

以下是一些 SSG 及其对应的语言：

• Eleventy 适合原生 JavaScript
• Next.js 和 Gatsby 适合 React 开发者
• Nuxt.js 适合 Vue 开发者
• SvelteKit 适合 Svelte 开发者
• Hugo 适合 Go 开发者

ISR

Incremental Site Rendering，增量式的网站渲染

DPR

Distributed Persistent Rendering，分布式的持续渲染