当海风翻页时

渲染模式总览#

Nuxt 4 支持通用渲染、客户端渲染、混合渲染和边缘渲染。渲染指浏览器和服务器解析 JavaScript 代码，把 Vue 组件转换成 HTML 元素。

这四种模式的区别在于 HTML 在哪台机器上生成，以及能不能按路由分别选择。

通用渲染#

通用渲染（universal rendering）和 PHP、Ruby 应用的服务器端渲染类似：Nuxt 在服务器环境里执行 Vue.js 代码，把渲染完成的 HTML 返回给浏览器。

页面如果已经预先生成，Nuxt 也可能直接从缓存返回 HTML。用户马上就能拿到应用的完整初始内容，不必等 JavaScript 跑完。

HTML 文档下载完成后，浏览器解析它，Vue.js 接着接管。同一份 JavaScript 代码在浏览器里初始化应用，把事件监听器绑定到 HTML 上，页面恢复可交互，这个过程叫水合（hydration）。

水合完成后，页面还能使用动态界面和页面过渡。

1
<script setup lang="ts">
2
const counter = ref(0) // 服务器和客户端都会执行
3

4
const handleClick = () => {
5
  counter.value++ // 只在客户端执行
6
}
7
</script>
8

9
<template>
10
  <div>
11
    <p>Count: {{ counter }}</p>
12
    <button @click="handleClick">Increment</button>
13
  </div>
14
</template>

客户端渲染#

客户端渲染（client-side rendering，CSR）指在浏览器里用 JavaScript 生成 HTML 内容。原生 Vue SPA 默认就是这样：浏览器必须先下载并执行完所有 JS，才能生成页面 HTML 展示内容。

混合渲染#

混合渲染（hybrid rendering）用路由规则（route rules）给不同路由单独配置缓存策略，同时规定服务器收到某个 URL 的新请求时怎么响应。

旧版 Nuxt 里整个应用只能统一选一种渲染模式：要么全部服务端渲染，要么全部客户端渲染。内容类网站很难两全，内容页面适合静态生成，后台管理模块需要登录权限，更像动态 SPA。

Nuxt 现在内置了路由规则和混合渲染。路由规则能批量匹配路由，单独改匹配到的路由的渲染模式，或者给它们配置专属缓存策略。Nuxt 会自动注册对应的中间件，依托 Nitro 服务缓存层，给匹配到的路由包一层缓存处理。

在 nuxt.config.ts 里配置：

1
export default defineNuxtConfig({
2
  routeRules: {
3
    // 首页：构建时提前预渲染（静态生成）
4
    '/': { prerender: true },
5

6
    // 产品列表页：按需生成，后台自动刷新，API 数据变化前一直缓存
7
    '/products': { swr: true },
8

9
    // 产品详情页：按需生成，后台自动刷新，缓存 1 小时（3600 秒）
10
    '/products/**': { swr: 3600 },
11

12
    // 博客列表页：按需生成，后台自动刷新，在 CDN 上缓存 1 小时
13
    '/blog': { isr: 3600 },
14

15
    // 博客文章页：构建或部署时生成一次，下次部署前一直缓存在 CDN
16
    '/blog/**': { isr: true },
17

18
    // 管理后台：只在客户端渲染（关闭 SSR，纯 SPA 模式）
19
    '/admin/**': { ssr: false },
20

21
    // API 路由：自动添加跨域 CORS 响应头
22
    '/api/**': { cors: true },
23

24
    // 旧页面：自动重定向到新页面
25
    '/old-page': { redirect: '/new-page' },
26
  },
27
})

九个键的作用如下。

边缘渲染#

边缘渲染（edge-side rendering，ESR）把 Nuxt 应用放到 CDN 的边缘服务器上渲染。渲染地点离用户更近，延迟更低。

用户请求页面时，请求不会直接发到源服务器，而是由最近的边缘服务器拦截处理。边缘服务器直接生成页面 HTML 并返回，数据传输的物理距离短，页面加载更快。

ESR 能实现，靠的是驱动 Nuxt 的服务引擎 Nitro。Nitro 跨平台，可以运行在 Node.js、Deno、Cloudflare Workers 等环境里。

目前支持 ESR 的平台有三个。

• Cloudflare Pages：通过 Git 集成和 nuxt build 命令，零配置直接启用
• Vercel：使用 nuxt build 命令，并配置环境变量 NITRO_PRESET=vercel-edge
• Netlify：使用 nuxt build 命令，并配置环境变量 NITRO_PRESET=netlify-edge