深度解析：Nuxt 4.0 的混合渲染如何与 Vue 3.5 和 Nitro 2.9 协同工作

Source: Dev.to

混合渲染已成为现代全栈框架的基石，使开发者能够在每个路由上混合使用服务器端渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）。Nuxt 4.0 进一步深化了这一点，与 Vue 3.5 的性能升级以及 Nitro 2.9 的灵活服务器引擎深度对齐。本指南将拆解 Nuxt 4.0 混合渲染的内部机制、它与 Vue 3.5 和 Nitro 2.9 的集成点，以及实用的配置示例。

Nuxt 4.0 中的混合渲染是什么？

与早期需要全局渲染模式的 Nuxt 版本不同，Nuxt 4.0 允许你使用 routeRules 配置为每个路由（或路由组）定义渲染行为。支持的模式包括：

• SSR – 对每个请求进行服务器渲染，适合动态、个性化的内容。
• SSG – 在构建时预渲染页面，完美用于静态的营销页面或博客。
• Hybrid – 对动态路由使用 SSR，对静态路由使用 SSG，并可选增量静态再生成（ISR）来在不进行完整重建的情况下更新预渲染页面。
• CSR – 纯客户端渲染，适用于需要身份验证的仪表盘或高度交互的应用模块。

Nuxt 4.0 的混合渲染由两个核心依赖驱动：

1. Vue 3.5 – 客户端响应式和组件渲染。
2. Nitro 2.9 – 服务器端逻辑、构建输出以及部署灵活性。

Vue 3.5：客户端基础

Vue 3.5（随 Nuxt 4.0 同时发布）带来了关键的性能和开发体验改进，提升了混合渲染工作流：

• Reactivity Transform v2 – 使用 $() 和 $ref 宏简化响应式状态管理，减少在同时运行于服务器和客户端的组件中的样板代码。
• 改进的水合不匹配处理 – 更优雅地检测并恢复水合不匹配，降低当 SSR 输出与客户端预期不一致时的运行时错误。
• 更小的包体积 – 树摇优化使 Vue 的基线包体积比 Vue 3.4 缩小约 12 %，加快混合页面的客户端水合速度。
• 增强的 Teleport 与 Suspense – 在混合场景下更好地支持异步组件和基于 portal 的 UI，页面的部分可以由 SSR 渲染，另一部分则由 CSR 渲染。

当 Nuxt 4.0 对页面进行服务器渲染时，它使用 Vue 3.5 的 SSR API 生成初始 HTML，然后使用相同的 Vue 3.5 构建在客户端进行水合，确保在不同环境下的行为保持一致。

Nitro 2.9: The Server Engine Powering Hybrid Rendering

Nitro 2.9 是 Nuxt 4.0 的底层服务器工具包，负责开发、构建和生产部署。对于混合渲染，Nitro 2.9 添加了三个关键能力：

1. Per‑Route Rule Evaluation – 在请求时（SSR）和构建时（SSG）处理 routeRules，让你可以在不重启服务器的情况下为每个路由覆盖渲染模式、缓存头和代理规则。
2. Edge‑Ready Output – 能将混合 Nuxt 应用编译为边缘兼容的包（Cloudflare Workers、Vercel Edge、AWS Lambda@Edge），内置支持边缘渲染和 ISR。
3. Unified Build Pipeline – 将 Vue 3.5 客户端构建、服务器端渲染逻辑和静态预渲染页面合并到单一输出目录，简化混合应用的部署。

Nitro 2.9 还引入了一个新的 hybrid 预设，自动配置缓存规则、无服务器函数拆分以及静态资源服务，以适应混合渲染工作负载。

在 Nuxt 4.0 中配置混合渲染

要启用混合渲染，请在 nuxt.config.ts 中使用 routeRules 进行更新。以下示例配置混合了 SSG、SSR 和 ISR：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      // 静态博客文章：在构建时预渲染，60 秒重新验证一次（ISR）
      '/blog/**': { prerender: true, isr: 60 },

      // 动态用户仪表盘：每次请求都进行 SSR，不使用缓存
      '/dashboard/**': { ssr: true, cache: false },

      // 营销页面：纯 SSG，永不重新验证
      '/about': { prerender: true },

      // 应用壳：仅 CSR，完全在客户端加载
      '/app/**': { csr: true, ssr: false }
    }
  },

  // 启用 Vue 3.5 响应式转换（可选）
  vue: {
    reactivityTransform: true
  }
})

此配置告诉 Nitro 2.9：

• 使用 ISR 预渲染博客文章（每 60 秒重新验证一次）。
• 对仪表盘页面在每次请求时进行 SSR，绕过缓存。
• 对 About 页面进行一次性静态生成，永不重新验证。
• 完全在客户端渲染应用路由（仅 CSR）。

Vue 3.5 为所有 SSR/ISR 页面处理水合，而 CSR 路由则完全跳过服务器渲染。

混合渲染的内部工作原理

当请求命中 Nuxt 4.0 混合应用时，流程如下：

1. Nitro 2.9 检查请求路径的 routeRules 以确定渲染模式。
2. SSG/ISR – Nitro 从构建输出中提供预渲染的 HTML，或在 ISR TTL 过期时重新验证页面。
3. SSR – Nitro 调用 Vue 3.5 的 SSR 渲染器，根据组件树生成 HTML，注入初始状态，并返回响应。
4. CSR – Nitro 提供一个包含 Vue 3.5 客户端 bundle 的最小 HTML 外壳，由客户端接管渲染。
5. Hydration – 对所有非 CSR 页面，Vue 3.5 客户端 bundle 对服务器渲染的 HTML 进行激活，绑定事件监听器和响应式系统，而无需重新渲染整个页面。

Nuxt 4.0 还通过 useState 可组合函数在服务器和客户端之间共享状态，确保从 SSR/ISR 到客户端交互的平滑过渡。

Nuxt 4.0 + Vue 3.5 + Nitro 2.9 堆栈的性能优势

结合这些工具可实现可衡量的性能提升：

• 相较于 Nuxt 3，SSR 响应时间提升 30 %，得益于 Nitro 2.9 优化的服务器管道和 Vue 3.5 更快的 SSR 渲染。
• 客户端包体积缩小 20 %，因为 Vue 3.5 的 tree‑shaking 和 Nitro 2.9 对混合路由的代码拆分。
• 混合页面的可交互时间（TTI）缩短，Vue 3.5 改进的 hydration 跳过了对未改变的 DOM 节点的重新渲染。

结论

Nuxt 4.0 的混合渲染是一个紧密集成的系统，利用 Vue 3.5 的客户端能力和 Nitro 2.9 的服务器灵活性，让开发者为每个路由选择合适的渲染模式。无论你是在构建静态博客、动态电商站点，还是混合应用，这个技术栈都能提供：

• 更佳的性能
• 更简洁的配置
• 更广泛的部署选项

尝试上面的示例配置，开始在你的 Nuxt 4.0 项目中实验混合渲染。