渲染模式

浏览器和服务器都可以解释 JavaScript 代码，将 Vue.js 组件渲染成 HTML 元素。此步骤称为渲染。Nuxt支持客户端和通用渲染。这两种方法各有利弊。

client-side-only-rendering

传统的 Vue.js 应用程序在浏览器（或客户端）中呈现。然后，Vue.js 在浏览器下载并解析包含创建当前接口指令的所有 JavaScript 代码后生成 HTML 元素。这种方式开箱即用。虽然此技术允许构建具有平滑页面过渡的复杂动态 UI，但它具有不同的优点和缺点：

优点

开发速度：当完全在客户端工作时，我们不必担心代码的服务器兼容性，例如，通过使用对象等仅限浏览器的 API。window
便宜：运行服务器会增加基础设施的成本，因为您需要在支持 JavaScript 的平台上运行。我们可以在任何带有 HTML、CSS 和 JavaScript 文件的静态服务器上托管仅限客户端的应用程序。
离线：由于代码完全在浏览器中运行，因此它可以在互联网不可用时很好地继续工作。

缺点

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

例子

对于不需要索引或其用户经常访问的高度交互式 Web 应用程序，客户端呈现是一个不错的选择。它可以利用浏览器缓存在后续访问（例如 SaaS、后台应用程序或在线游戏）时跳过下载阶段。

universal-rendering

当浏览器请求启用了通用（客户端 + 服务器端）呈现的 URL 时，服务器会向浏览器返回完全呈现的 HTML 页面。无论页面是预先生成并缓存还是动态呈现，Nuxt都会在服务器环境中运行JavaScript（Vue.js）代码，生成HTML文档。用户立即获得我们应用程序的内容，这与客户端呈现相反。此步骤类似于 PHP 或 Ruby 应用程序执行的传统服务器端渲染。为了不失去客户端呈现方法的好处，例如动态界面和页面转换，客户端会在下载 HTML 文档后在后台加载在服务器上运行的 JavaScript 代码。浏览器再次解释它（因此通用渲染），Vue.js 控制文档并启用交互性。在浏览器中使静态页面具有交互性称为“水化”。通用渲染允许Nuxt应用程序提供快速的页面加载时间，同时保留客户端渲染的优势。此外，由于内容已存在于 HTML 文档中，爬网程序可以在没有开销的情况下为其编制索引。

优点

性能：用户可以立即访问页面的内容，因为浏览器可以比JavaScript生成的浏览器更快地显示静态内容。同时，Nuxt在水合过程发生时保留了Web应用程序的交互性。
搜索引擎优化：通用呈现将页面的整个HTML内容作为经典服务器应用程序交付给浏览器。Web 爬虫可以直接索引页面的内容，这使得通用呈现成为您想要快速索引的任何内容的绝佳选择。

缺点

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

例子

通用渲染非常通用，几乎可以适合任何用例，特别适用于任何面向内容的网站：博客、营销网站、投资组合、电子商务网站和市场。

总结

客户端呈现和通用呈现是在浏览器中显示界面的不同策略。默认情况下，Nuxt 使用通用渲染来提供更好的用户体验和性能，并优化搜索引擎索引。在大多数情况下，Nuxt 2 中执行的通用渲染提供了良好的用户和开发人员体验。但是，Nuxt 3 通过引入混合渲染和边缘侧渲染，使通用渲染更进一步。

混合渲染和边缘侧渲染

混合渲染

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

在 CDN 边缘工作线程上渲染

传统上，服务器端和通用渲染只能使用 Node.js。Nuxt 3 通过在 CDN 边缘工作线程中直接渲染代码，将其提升到另一个层次，从而减少延迟和成本。 Nitro是为Nuxt 3提供动力的新服务器引擎。它为Node.js，Deno，Workers等提供跨平台支持。Nitro的设计与平台无关，允许在边缘渲染Nuxt应用程序，更接近您的用户，允许复制和进一步优化。

路线规则

以前，Nuxt应用程序和服务器的每个路由/页面都必须使用相同的渲染模式，客户端或通用。但在各种情况下，某些页面可以在构建时生成，而其他页面应在客户端呈现。例如，考虑一个具有管理部分的内容网站。每个内容页面都应该主要是静态的，并且生成一次，但管理部分需要注册，并且行为更像一个动态应用程序。使用路由规则，您可以为一组nuxt路由定义规则，更改渲染模式或根据路由分配缓存策略！

redirect- 定义服务器端重定向。
ssr- 禁用应用各部分的服务器端呈现，并使其仅使用 SPAssr: false
cors- 自动添加 cors 标头 - 您可以通过覆盖来自定义输出cors: trueheaders
headers- 将特定标题添加到网站的各个部分 - 例如，您的资产
static和 - 启用单个（按需）构建; 启用静态构建，该构建持续可配置的 TTL。（目前在Netlify上支持完全增量静态生成，Vercel即将推出）swr static swr

例子

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 } }
  }
})

Nuxt3之渲染模式(上) | 青训营笔记