Question

Nuxt 支持不同的渲染模式。 本节介绍了每种方法的优点和缺点。

浏览器和服务器都可以解释 JavaScript 代码，将 Vue.js 组件转换为 HTML 元素。 此步骤称为渲染。 Nuxt 支持通用和客户端渲染。 我们将介绍这两种方法的优点和缺点。

仅客户端渲染

开箱即用，传统的 Vue.js 应用程序在浏览器（或客户端）中呈现。 然后，在浏览器下载并解析所有包含创建当前界面的指令的 JavaScript 代码后，Vue.js 生成 HTML 元素。

虽然这种技术允许构建具有平滑页面转换的复杂和动态 UI，但它具有不同的优点和缺点：

优点

当浏览器请求启用了通用（客户端+服务器端）呈现的 URL 时，服务器会向浏览器返回一个完全呈现的 HTML 页面。 无论页面是预先生成并缓存还是动态呈现，Nuxt 都在某个时刻在服务器环境中运行了 JavaScript (Vue.js) 代码，生成了 HTML 文档。 用户立即获得我们应用程序的内容，这与客户端呈现相反。 此步骤类似于由 PHP 或 Ruby 应用程序执行的传统服务器端渲染。

为了不失去客户端呈现方法的好处，例如动态界面和页面转换，一旦下载了 HTML 文档，客户端就会在后台加载在服务器上运行的 javascript 代码。 浏览器再次解释它（因此通用渲染）并且 Vue.js 控制文档并启用交互性。

使静态页面在浏览器中交互称为“Hydration”。

通用渲染允许 Nuxt 应用程序提供快速的页面加载时间，同时保留客户端渲染的优势。 此外，由于内容已经存在于 HTML 文档中，爬虫可以在没有开销的情况下对其进行索引。

优点

客户端和通用渲染是在浏览器中显示界面的不同策略。

默认情况下，Nuxt 使用通用渲染来提供更好的用户体验和性能，并优化搜索引擎索引，但您可以在一行配置.

新的渲染模式

在大多数情况下，在 Nuxt 2 中执行的通用渲染提供了良好的用户和开发人员体验。 然而，Nuxt 3 通过引入混合渲染和边缘渲染，将通用渲染更进一步。

混合渲染

混合渲染使用 Route Rules 允许每个路由使用不同的缓存规则，并决定服务器应如何响应给定 URL 上的新请求。

在CDN边缘工作节点上的渲染

传统上，服务器端和通用渲染只能使用 Node.js。 Nuxt 3 通过直接在 CDN 边缘工作者中渲染代码，将其提升到另一个层次，减少了延迟和成本。

Nitro 是为 Nuxt 3 提供支持的新服务器引擎。它为 Node.js、Deno、Workers 等提供跨平台支持。 Nitro 的设计与平台无关，允许在边缘渲染 Nuxt 应用程序，更接近您的用户，允许复制和进一步优化。

路由规则