SSR、CSR和SSG
标题所提到的是常见的前端渲染方式，下面将介绍它们的概念并总结它们的优缺点
SSR (Server-side rendering，服务端渲染)
SSR 是指在服务端生成 HTML，将其发送到客户端，客户端只需要进行简单的渲染即可完成页面显示。SSR 的主要优点是可以提高页面的首屏渲染速度和 SEO 的效果。因为浏览器收到的是已经渲染好的 HTML，可以直接展示，而不需要等待 JavaScript 代码下载和执行。此外，SSR 对于搜索引擎的爬虫也更加友好，可以更容易地被搜索引擎收录和排名。
但是，SSR 的缺点是对服务端的压力较大，因为每次请求都需要服务端进行渲染，所以对服务器的要求比较高。同时，SSR 对于复杂的交互和动态效果的支持相对较弱，因为大部分渲染工作都是在服务端完成的，所以对于客户端的 JavaScript 代码的依赖较小。
CSR (Client-side rendering，客户端渲染)
CSR 是指在客户端通过 JavaScript 来渲染页面，将数据从服务器请求回来后再通过 JavaScript 来生成 HTML，并将其插入到页面中。CSR 的主要优点是可以提高网站的交互性能，用户在与页面交互时无需进行页面刷新。同时，CSR 对于复杂的交互和动态效果的支持较好，可以更好地实现单页面应用程序 (SPA)。
但是，CSR 的缺点是会降低首屏渲染速度，因为浏览器需要等待 JavaScript 代码的下载和执行完成后才能开始渲染页面。此外，CSR 对于 SEO 的支持较弱，因为搜索引擎爬虫无法执行 JavaScript 代码，所以无法收录和排名 CSR 渲染的页面。
SSG (Static Site Generation，静态站点生成)
SSG 是指将网站的所有页面在构建时生成 HTML 静态文件，然后通过服务器或 CDN 进行分发，这样可以避免服务端的渲染压力，并且能够实现极快的页面加载速度。SSG 的主要优点是可以在静态页面中实现动态数据的渲染，同时对于 SEO 的支持也非常好。
但是，SSG 的缺点是在需要更新数据时，需要重新构建并部署整个网站，因此对于频繁更新数据的网站可能不太适合。同时，SSG 对于复杂的交互和动态效果的支持也比较有限。
补充
对于只有几十个页面的个人博客、小型文档站而言，数据有变化时，跑一次全页面渲染的消耗是可以接受的。
但对于百万级、千万级、亿级页面的大型网站而言，一旦有数据改动，要进行一次全部页面的渲染，需要的时间可能是按小时甚至按天计的，这是不可接受的。为了解决这个问题，各种框架和静态网站托管平台都提供了不同的方案，常见有 ISR 和 DPR ：
- ISR：Incremental Site Rendering，增量式的网站渲染，即 SSG+SSR，构建部分静态页和 SSR 渲染新增页
- DPR：Distributed Persistent Rendering，分布式的持续渲染
支持多种渲染方式的常见框架
Next.js
Next.js 框架基于 React，提供了生产环境所需的所有功能以及最佳实践，包括构建时预渲染、服务端渲染、路由预加载、智能打包、零配置等。其中，Next.js 以其优秀的构建时渲染和服务端渲染能力，成为当今 React 生态中最受欢迎的框架之一。
Remix
Remix 框架基于 React，由 React Router 原班团队打造，内建 React Router V6 特性，让你专注于用户界面，并通过web标准来提供快速、流畅和弹性的用户体验。
Nuxt.js
Nuxt.js 框架基于 Vue，提供了自动生成路由、静态文件生成、异步数据加载等有用的功能，使得开发者可以更轻松地构建高性能、SEO友好的Web应用程序。Nuxt.js的服务端渲染能力可以使得Web应用程序在加载速度和SEO优化方面更加出色。此外，Nuxt.js还提供了许多插件和模块，可以帮助开发者更快地构建应用程序。
总结
| 优点 | 缺点 | |
|---|---|---|
| SSR | 1.更快的首屏渲染速度 2.更好的 SEO 优化，因为搜索引擎可以直接看到渲染好的页面 HTML 3.对于客户端的 JavaScript 代码的依赖较小 |
1.对于服务端的压力较大 2.对于复杂的交互和动态效果的支持相对较弱 |
| CSR | 1.更好的交互性能，用户无需进行页面刷新即可与页面交互 2.对于复杂的交互和动态效果的支持较好 |
1.首屏渲染速度较慢 2.对于 SEO 的支持较弱，因为部分搜索引擎爬虫无法执行 JavaScript 代码 |
| SSG | 1.极快的页面加载速度 2.对于 SEO 的支持非常好 3.可以在静态页面中实现动态数据的渲染 |
1.对于频繁更新数据的网站不太适合 2.对于复杂的交互和动态效果的支持有限 |
