nuxtjs 渲染模式 ​

理解渲染 ​

在 Web 开发中，渲染是指将 JavaScript 代码转换为浏览器可显示的 HTML 元素的过程。根据渲染发生的位置不同，可分为服务端渲染和客户端渲染。

示意图： 传统客户端渲染 (CSR)： [浏览器请求] → [服务器返回空 HTML] → [下载 JS] → [执行 Vue.js] → [渲染页面]

Nuxt.js 支持多种渲染模式，包括通用渲染、客户端渲染，还提供混合渲染以及在 CDN 边缘服务器上渲染应用的可能。

通用渲染 ​

通用渲染结合了服务端渲染和客户端渲染的优点。当浏览器请求启用了通用渲染的 URL 时，服务器会返回一个完全渲染的 HTML 页面。然后，为了保留客户端渲染的优势，一旦下载了 HTML 文档，客户端会在后台加载在服务器上运行的 JavaScript 代码，使静态页面重新拥有动态能力，这个过程称为 Hydration (水合作用)。

示意图： [浏览器请求] → [服务器运行 Vue.js 生成 HTML] → [返回完整 HTML] ↓ [用户立即看到内容] → [后台加载 JS] → [Vue.js 接管交互]

优点 ​

• 性能优势：用户可以立即访问页面内容，因为浏览器显示静态内容比 JavaScript 生成的内容快得多。
• SEO 友好：搜索引擎爬虫可以直接索引页面的内容。

缺点 ​

• 开发限制：服务器和浏览器环境提供的 API 不同。
• 成本较高：需要运行服务器来动态渲染页面。

客户端渲染 ​

传统的 Vue.js 应用是在浏览器中渲染的。在浏览器下载并解析所有包含创建当前界面指令的 JavaScript 代码后，再由 Vue.js 生成 HTML 元素。

示意图： [浏览器请求] → [服务器返回空 HTML 和 JS] → [下载 JS] → [执行 Vue.js] → [渲染页面]

在 nuxt.config.ts 中启用仅客户端渲染：

export default defineNuxtConfig({
  ssr: false
})

优点 ​

• 开发速度：无需担心代码的服务端兼容性。
• 成本较低：可以在任何静态服务器上托管。
• 离线支持：代码完全在浏览器中运行，可在无网络时继续工作。

缺点 ​

• 性能问题：用户必须等待浏览器下载、解析和运行 JavaScript 文件。
• SEO 缺陷：索引和更新通过客户端渲染交付的内容需要更多时间。

混合渲染 ​

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

通过路由规则，可以为一组 Nuxt 路由定义规则，更改渲染模式或分配基于路由的缓存策略。

示例配置：

export default defineNuxtConfig({
  routeRules: {
    // 首页在构建时预渲染
    '/': { prerender: true },
    // 产品页面按需生成，在后台重新验证，缓存直到API响应更改
    '/products': { swr: true },
    // 博客文章页面按需生成，在后台重新验证，在CDN上缓存1小时
    '/blog/**': { isr: 3600 },
    // 管理仪表板只在客户端渲染
    '/admin/**': { ssr: false },
    // 重定向遗留url
    '/old-page': { redirect: '/new-page' }
  }
})

路由规则属性 ​

• redirect：定义服务器端重定向
• ssr：对应用程序的部分区域禁用服务器端渲染
• swr：向服务器响应添加缓存头部
• isr：其行为与 swr 相同，只是能够在支持此功能的平台上将响应添加到 CDN 缓存中
• prerender：在构建时预先渲染路由

边缘渲染 ​

边缘侧渲染的工作原理是将渲染过程推送到网络的“边缘”位置，即 CDN 的边缘服务器。当请求某个页面时，请求不会直接到达原始服务器，而是被最近的边缘服务器截获。

示意图： [用户请求] → [CDN 边缘服务器] → [生成 HTML] → [返回用户] (减少延迟，加快加载速度)

支持平台 ​

• Cloudflare Pages：使用 Git 集成和 nuxt build 命令，无需任何配置即可实现边缘侧渲染。
• Vercel：使用 nuxt build 命令和环境变量 NITRO_PRESET=vercel-edge。
• Netlify：使用 nuxt build 命令和环境变量 NITRO_PRESET=netlify-edge。

如何选择渲染模式 ​

通用渲染适用场景 ​

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

客户端渲染适用场景 ​

对于不需要被索引或用户访问频繁的高度交互的 Web 应用程序，客户端渲染是一个不错的选择。例如：SaaS、后台应用程序或在线游戏。

混合渲染适用场景 ​

适合一个应用中不同页面有不同需求的场景。例如：一个 CMS 管理系统，一些向外展示的页面应该是静态的，但是管理后台需要注册功能，更像一个动态应用。

边缘渲染适用场景 ​

对性能要求高、用户分布广的全球性应用，希望减少延迟并提供更快的用户体验。