Vue SSR 与 Nuxt 渲染模式

服务器端渲染提升首屏体验，但需要围绕缓存、数据获取与安全做系统设计。

核心概念

• 同构渲染需要隔离客户端特定依赖，确保 Node 环境可运行。
• Nuxt 3 提供 nitro 服务器和 server/api 目录简化接口编写。
• 利用 payload 与 state 注水技术减少重复请求。

实战步骤

• 配置 nuxt.config 中的 routeRules 控制静态化与缓存头。
• 实现 onServerPrefetch 批量拉取数据，统一错误处理。
• 在 Edge Node 部署时使用 KV 存储缓存 HTML，构建秒级回源策略。

进阶建议

• 结合 Nitro 的 storage 接口实现跨区域缓存一致性。
• 通过 nitro prerender 预渲染热门页面，降低服务器压力。
• 集成 CSP、XSS 过滤器，防止注水阶段插入恶意脚本。

代码示例

// plugins/api.client.ts
export default defineNuxtPlugin(() => {
  const api = $fetch.create({
    baseURL: '/api',
    onRequest({ options }) {
      options.headers = { ...options.headers, Authorization: `Bearer ${useToken()}` }
    },
  })
  return { provide: { api } }
})

小结

通过以上步骤，{article['title']} 能够在实际项目中落地，持续提升团队交付质量。