Nuxt3【渲染模式】2025最新版

朝阳39

已于 2025-02-24 16:15:14 修改

阅读量1.3k

点赞数 11

分类专栏： Nuxt.js 文章标签： Nuxt3

于 2024-08-19 16:31:51 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/141326553

版权

Nuxt.js 专栏收录该内容

20 篇文章

订阅专栏

Nuxt3 支持多种渲染模式

通用渲染（默认）

即服务器端渲染+客户端渲染

【服务器端渲染】Nuxt在服务器环境中运行JavaScript（Vue.js）代码，生成了一个HTML文档
服务器将一个完整渲染的HTML页面返回给浏览器
客户端（浏览器）在下载完HTML文档后会在后台加载运行在服务器上的JavaScript代码。浏览器再次解释它【客户端渲染】（因此称为通用渲染），Vue.js接管文档并启用交互性。

服务器端渲染的好处

用户可以立即访问页面的内容
对 SEO 更友好

服务器端渲染的缺点

开发受约束：服务器和浏览器环境提供的API不同
运行服务器需要成本

判断是服务器端渲染的方法

查看网页源代码，在源代码中可见页面中的文字等信息，即服务器端渲染

通用渲染的适用场景

几乎适用于任何用例，特别适合面向内容的网站：博客、营销网站、作品集、电子商务网站和市场。

客户端渲染

在浏览器下载和解析所有包含创建当前界面指令的JavaScript代码后，生成HTML元素。

客户端渲染的优点

开发速度更快：不必担心代码的服务器兼容性
成本较低：无需运行服务器，可以将仅客户端的应用程序托管在任何具有HTML、CSS和JavaScript文件的静态服务器上。
支持离线工作：在网络不可用的情况下，它可以继续正常工作。

客户端渲染的缺点

性能较低：特别是首屏加载很慢
对 SEO 不友好

客户端渲染的适用场景

适用于需要大量交互的Web应用程序，不需要索引或其用户频繁访问的应用程序。它可以利用浏览器缓存，在后续访问中跳过下载阶段，例如SaaS、后台应用程序或在线游戏。

启用仅客户端渲染

在 nuxt.config.ts 中

ssr: false

混合渲染

即按路由配置不同的渲染模式，如在 nuxt.config.ts 中添加配置：

export default defineNuxtConfig({
  routeRules: {
    // 主页在构建时预渲染
    '/': { prerender: true },
    // 产品页面按需生成，后台自动重新验证
    '/products/**': { swr: 3600 },
    // 博客文章按需生成，直到下一次部署前持续有效
    '/blog/**': { isr: true },
    // 管理仪表板仅在客户端渲染
    '/admin/**': { ssr: false },
    // 在API路由上添加cors头
    '/api/**': { cors: true },
    // 跳转旧的URL
    '/old-page': { redirect: '/new-page' }
  }
})

具体的配置项有：

redirect: string - 定义服务器端重定向。
ssr: boolean - 禁用应用程序的服务器端渲染部分，使其仅支持SPA，使用ssr: false。
cors: boolean - 使用cors: true自动添加CORS头部，你可以通过覆盖headers来自定义输出。
headers: object - 为你的站点的某些部分添加特定的头部，例如你的资源文件。
swr: number|boolean - 为服务器响应添加缓存头部，并在服务器或反向代理上缓存它，以配置的TTL（存活时间）进行缓存。Nitro的node-server预设能够缓存完整的响应。当TTL过期时，将发送缓存的响应，同时在后台重新生成页面。如果使用true，则添加了一个不带MaxAge的stale-while-revalidate头部。
isr: number|boolean - 行为与swr相同，除了我们能够将响应添加到支持此功能的CDN缓存中（目前支持Netlify或Vercel）。如果使用true，内容将在CDN中持久存在，直到下一次部署。
prerender:boolean - 在构建时预渲染路由，并将其包含在你的构建中作为静态资源。
experimentalNoScripts: boolean - 禁用Nuxt脚本的渲染和JS资源提示，用于你站点的某些部分。