Nuxt3实战系列之了解Nuxt3的渲染模式

使用过 nuxt2 的人都知道，nuxt 并不单单是个服务端渲染框架，它也同时具备纯客户端渲染以及静态化渲染的能力。在 nuxt3 上，这三种渲染模式也得以保留，而且还新增了一种 hybird 模式，也就是可以按路由分别设置渲染模式。

1. 纯客户端渲染

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

虽然这种技术允许建立复杂和动态的 UI，并具有平滑的页面过渡，但它有不同的优点和缺点。

优点

• 开发速度快：当完全在客户端工作时，我们不必担心代码的服务端兼容问题，例如，通过使用 window 对象等仅适用于浏览器的 API。
• 部署成本低：**运行服务器会增加基础设施的成本，因为你需要在一个支持 JavaScript 的平台上运行。我们可以在任何带有 HTML、CSS 和 JavaScript 文件的静态服务器上托管纯客户端的应用程序。
• 可离线访问：**因为代码完全在浏览器中运行，所以它可以在互联网不可用时很好地保持工作。
  

缺点

• 性能：用户必须等待浏览器下载、解析和运行 JavaScript 文件。这取决于下载部分的网络和解析及执行部分的用户设备，这可能需要一些时间并影响用户的体验。
• 搜索引擎优化：与服务器渲染的 HTML 文档相比，通过客户端渲染提供的内容的索引和更新需要更多的时间。这与我们讨论的性能缺陷有关，因为搜索引擎爬虫在第一次尝试索引页面时不会等待界面完全呈现。使用纯客户端渲染，你的内容在搜索结果页中的显示和更新将需要更多时间。
  

应用场景

对于不需要索引或用户频繁访问的重度交互网络应用，客户端渲染是一个不错的选择。它可以利用浏览器缓存来跳过后续访问的下载阶段，如 SaaS、Admin 管理系统或在线游戏等。

2. 服务端渲染

当浏览器请求一个开启了服务端渲染的 URL 时，服务器会向浏览器返回一个完全渲染的 HTML 页面。不管这个页面是事先生成并缓存的，还是即时渲染的，在某个时刻，Nuxt 已经在服务器环境中运行了 JavaScript（Vue.js）代码，产生了一个 HTML 文档。用户立即得到我们的应用程序的内容，与客户端渲染相反。这一步类似于 PHP 或 Ruby 应用程序所执行的传统服务器端渲染。
为了不失去客户端渲染方法的好处，例如动态界面和页面转换，一旦 HTML 文档被下载，客户端就会在后台加载服务器上运行的 javascript 代码。浏览器再次对其进行解释（因此是通用渲染），Vue.js 则控制该文档并实现交互性。
让静态页面在浏览器中实现交互被称为 “Hydration”。
服务端渲染使得 Nuxt 应用程序有更短的页面加载时间，同时保留了客户端渲染的优点。此外，由于内容已经存在于 HTML 文档中，搜索引擎爬虫可以在没有开销的情况下索引它。

优点

• 性能：用户可以立即访问页面的内容，因为浏览器显示静态内容的速度比 JavaScript 生成的内容快得多。同时，Nuxt 在客户端重新渲染过程中保留了网络应用的交互性。
• 搜索引擎优化：通用渲染将页面的整个 HTML 内容作为一个经典的服务器应用程序提供给浏览器。网络爬虫可以直接对页面内容进行索引，这使得通用渲染成为任何你想快速索引的内容的最佳选择。
  

缺点

• 开发限制：服务器和浏览器环境不提供相同的 API，要写出能在两边无缝运行的代码可能很棘手。幸运的是，Nuxt 提供了指导方针和特定的变量来帮助你确定一段代码的执行位置。
• 成本：需要启动服务器运行，以便在运行中渲染页面。这就像任何传统的服务器一样增加了每月的成本。然而，由于通用渲染，浏览器接管了客户端的导航，服务器的调用大大减少。
  

应用场景

通用渲染的用途非常广泛，几乎可以适合任何使用情况，特别适合任何面向内容的网站：博客、商城、电子商务网站等。
客户端渲染和服务端渲染是在浏览器中显示界面的不同策略。
默认情况下，Nuxt 使用通用渲染（服务端渲染）来提供更好的用户体验和性能，并优化搜索引擎的索引，但你可以在一行配置中切换渲染模式。

export default defineNuxtConfig({
  ssr: false,
  // ...other setting
});

3. 预渲染

使用 nuxi generate 命令来构建应用程序。对于每一个页面，Nuxt 使用爬虫来生成相应的 HTML 和有效载荷文件。构建的文件将在.output/public 目录下生成。
你可以手动指定 Nitro 在构建过程中获取和预渲染的路线。

defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/user/1", "/user/2"],
    },
  },
});

预渲染可以解决纯静态渲染的缺点，即能保证用户访问时页面加载比较迅速，也能让搜索引擎爬虫对页面内容进行索引。不过预渲染针对动态路由在处理上会比较棘手。

4. 混合渲染（Nuxt3 新增）

在大多数情况下，Nuxt 2 中执行的通用渲染提供了良好的用户和开发者体验。然而，Nuxt 3 通过引入混合渲染和 cdn 渲染，使通用渲染更进一步。
混合渲染允许使用路由规则为每条路由制定不同的渲染规则，并决定服务器应如何回应给定 URL 上的新请求。
以前 Nuxt 应用程序和服务器的每个路由/页面都必须使用相同的渲染模式，客户端或服务端。但是在各种情况下，有些页面可以在构建时生成，而有些页面应该在客户端渲染。例如，想想一个带有管理部分的内容网站。每一个内容页面应该主要是静态的，并且只生成一次，但是管理部分需要注册，并且表现得更像一个动态应用程序。
从 rc.12 开始的 Nuxt 3 带有公共测试版的路由规则和混合渲染支持。使用路由规则，你可以为一组 nuxt 路由定义规则，改变渲染模式，或根据路由指定一个缓存策略! Nuxt 服务器将自动注册相应的中间件，并使用 nitro 缓存层将路由与缓存处理程序打包。只要有可能，路由规则将被自动应用到部署平台的本地规则（目前支持 Netlify 和 Vercel）。

• redirect - 定义服务器端的重定向。
• ssr - 禁用服务器端对你的应用程序的部分进行渲染，并使其成为 SPA 专用，使用 ssr: false。
• cors - 用 cors: true 自动添加 cors 头文件 - 你可以用 headers 覆盖自定义输出。
• headers - 在你的网站上添加特定的标题。
• static - static 支持单一（按需）构建；
• swr - swr 支持静态构建，持续一个可配置的 TTL。(目前在 Netlify 上可以实现完全增量的静态生成，Vercel 即将推出）。

示例如下：

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    "/blog/**": { swr: true },
    // Static page generated on-demand once
    "/articles/**": { static: true },
    // Set custom headers matching paths
    "/_nuxt/**": { headers: { "cache-control": "s-maxage=0" } },
    // Render these routes with SPA
    "/admin/**": { ssr: false },
    // Add cors headers
    "/api/v1/**": { cors: true },
    // Add redirect headers
    "/old-page": { redirect: "/new-page" },
    "/old-page2": { redirect: { to: "/new-page", statusCode: 302 } },
  },
});

5. 在 CDN Edge Workers 上渲染（Nuxt3 新增）

传统模式下，服务器端渲染只能使用 Node.js。Nuxt 3 通过在 CDN Edge Workers 直接渲染代码，降低了延迟和成本，将其提升到另一个层次。
Nitro 是支持 Nuxt 3 的新服务器引擎。它提供了对 Node.js、Deno、Workers 等的跨平台支持。Nitro 的设计是与平台无关的，允许在边缘渲染 Nuxt 应用程序，更接近你的用户，允许复制和进一步优化。

更多信息可查看nuxt3 官方文档