渲染模式的解析和选择
Nuxt 为了满足更多开发场景的需求，给我们提供了多种渲染模式：
- 客户端渲染 - CSR；
- 全局渲染 - SSR；
- 静态站点生成 - SSG；
- 混合渲染 - hybrid rendering；
- 边缘渲染 - edge-side rendering。
接下来我们探讨几种渲染模式的差异以及各自的使用场景。
传统服务端渲染
在传统开发中，页面渲染的任务是由服务端来完成的。服务端负责获取数据、拼接页面，客户端负责展示内容即可。使用这种方式的技术有 JSP、PHP 等。
渲染步骤如下：
- 浏览器向服务器请求页面；
- 服务器向数据库查询数据；
- 数据库向服务器返回数据；
- 服务器向框架传输数据，渲染
HTML页面； - 框架向服务器返回
HTML片段； - 服务器组装
HTML页面，返回浏览器。
由此可见，大部分渲染任务位于服务端。而服务端的任务繁重，导致服务器的负载较大、占用带宽资源较多、并发能力弱。另外，因为前后端是混合开发，对开发者的要求更高，也要求更佳的团队协作。于是，后面催生了 Vue.js 和 React 等 SPA 框架。
传统服务端渲染的优点是渲染页面速度较快，对搜索引擎的 SEO 友好。
客户端渲染
客户端渲染 CSR，即单页面应用 SPA 采用的渲染方式。应用在客户端首次获取的是空 HTML 文档，浏览器下载并运行 JS，获取数据后再创建页面。
渲染步骤如下：
- 客户端向服务端发起请求；
- 服务端向客户端返回
HTML模板； - 客户端向服务端请求数据；
- 服务端向数据库查询数据；
- 数据库向服务端返回数据；
- 服务端获取数据，发送给客户端，客户端渲染内容。
与传统服务端渲染不同，这种方式下服务端仅提供数据接口，拼装页面的任务交给了客户端。这样充分利用了客户端性能，解放了服务端，提高了服务端的负载能力。开发过程中前后端分离，开发人员各司其职，提高了开发效率。
客户端渲染的缺点是用户必须等待浏览器下载并执行 JS 代码后才能看到内容，这个过程的速度和客户端的网速和硬件性能挂钩。这也意味着网页的首屏加载时间较长，影响用户体验。同时，由于页面一开始的内容为空，搜索引擎无法爬取内容，不利于网站 SEO。
因此，CSR 适用于不需要 SEO 或者用户访问频率不高的强交互应用，例如 SaaS 系统、后台管理系统、在线文档等。利用浏览器缓存特性，这些应用也可以避免再次下载资源，提升性能表现。
服务端渲染
服务端渲染 SSR 是传统服务端渲染方式的改造和升级，渲染步骤如下：
- 客户端向服务端发起请求；
- 服务端向数据库查询数据；
- 数据库向服务端返回数据；
- 服务端向客户端返回首屏
HTML和JS脚本； - 客户端将页面激活为
SPA，这个过程叫作hydration。
这种渲染方式下在服务端拼接页面并且返回首屏 HTML，可以解决 SPA 应用中的 SEO 问题和首屏加载速度问题。服务端渲染时，Nuxt 实际上是在服务器执行 Vue，将组件渲染为 HTML 并返回给客户端。客户端激活时也是执行的 Vue，它会重新接管应用，恢复数据和状态，使静态页面变得可交互，这个过程叫作 hydration。
但是，由于服务器和浏览器环境之间有差异，给开发带来了复杂性和约束性。开发者不能使用完全相同的 API，例如组件在服务端创建时没有 mounted 钩子，因为没有挂载的步骤。这可能会导致一些组件无法在服务端环境中正常使用。另外，有些代码我们只想在客户端运行，如果不小心在服务端运行可能会报错。
由于页面渲染由服务端来承担，服务器负载也增加了，只是由于后续的 hydration 操作负载被大幅减少了。不过，SSR 实际上额外增加了 node.js 或 serverless 的运行时需求。
综上所述，SSR 方式非常灵活，几乎可以适配大部分需求，尤其是基于内容的网站。Nuxt3 的默认渲染方式就是 SSR。
静态站点生成
静态网站生成 SSG 是将写好的动态页面基于数据生成为静态网站。如果用户每次访问一个相同的页面都要重新渲染一遍相同的内容，无疑是在浪费资源，那么我们可以提前渲染好静态页面进行提供。
渲染步骤如下：
- 客户端向服务端发起请求；
- 服务端向客户端返回
HTML。
可以看到，这种方式下的渲染步骤十分简单，服务器需求很小。这大幅降低了服务器的负担，也带来了良好的性能表现，同时也减少网站的安全风险。
在这种方式下，如果网站内容一旦发生变化就需要重新生成整个网站。当网站内容不多时没什么问题；如果网站内容庞大，每次重新生成的时间成本就很高了。
SSG 适合内容创建后不怎么变化的网站，比如博客、网站、宣传页等。
混合渲染
Nuxt3 支持混合渲染方式。顾名思义，这是一种根据不同路由规则来渲染页面的方式。我们可以根据页面的需求不同来决定究竟是使用 CSR 还是 SSR。
当一个项目只用一种渲染方式不能满足时，就考虑使用混合渲染模式。
边缘渲染
边缘渲染是一种全新的渲染方式，这种方式可以在 CDN edge worker 环境下进行渲染，应用能够运行在离用户更近的环境中，从而降低延迟和服务器的开销。
渲染步骤如下：
- 客户端向
CDN发起请求； CDN向客户端返回首屏静态内容；CDN向服务器发送动态请求；- 服务器向
CDN返回动态内容； CDN向客户端返回动态内容；- 客户端获取动态内容组成完整内容。
这种渲染方式对用户的实时交互更关心，适用于实时游戏、交易系统等应用类型。不过这种方式比较新颖，目前只有国外主流的服务商提供该渲染方式的支持。