Vue 服务端渲染（SSR）入门：Nuxt 3 核心概念与实战部署

快速概述

Vue 服务端渲染（SSR）解决的是传统客户端渲染（CSR）下首屏加载慢、SEO 不友好两大核心痛点。在 CSR 模式下，服务端仅返回静态文件，浏览器需先执行 JS 再生成 DOM，导致首屏白屏时间长且爬虫难以抓取内容。SSR 则让服务器在收到请求后，将 HTML 模板与数据整合生成完整页面一次性返回，显著提升首屏速度与 SEO 效果。Nuxt 3 作为 Vue 生态最成熟的 SSR 框架，提供自动路由、布局系统等特性，极大简化了 SSR 开发流程。前置环境要求：Node.js 16 及以上版本，推荐使用 npm 或 yarn 包管理器。

核心概念与原理

SSR 的核心工作流程是：浏览器发起请求后，服务器端框架将组件渲染为完整的 HTML 字符串返回给客户端，浏览器直接展示内容；随后框架在客户端进行 Hydration（水合），为已渲染的 DOM 绑定事件与状态，使其具备 SPA 的交互能力。相比 CSR，SSR 的首屏速度更快、SEO 效果更好，但服务器压力较高，开发与部署复杂度也更大。Nuxt 3 采用约定优于配置的设计，开发者只需按目录结构组织文件，框架自动完成路由、布局与数据获取的 SSR 适配。

实战步骤与代码

第一步：创建 Nuxt 3 项目

# 使用 npx 创建 Nuxt 3 项目
npx nuxi init nuxt-ssr-demo
cd nuxt-ssr-demo
npm install
npm run dev  # 启动开发服务器，默认端口 3000

第二步：配置页面与自动路由

Nuxt 3 自动将 pages 目录下的 .vue 文件映射为路由。创建首页与关于页：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Nuxt 3 SSR 首页</h1>
    <p>此页面由服务端渲染生成</p>
  </div>
</template>
<!-- pages/about.vue --> <template> <div> <h1>关于我们</h1> <NuxtLink to="/">返回首页</NuxtLink> </div> </template>

第三步：服务端数据获取

使用 useAsyncData 在服务端获取数据并注入页面：

<script setup>
// 在服务端执行数据请求，返回结果随 HTML 一起输出
const { data: posts } = await useAsyncData('posts', () =>
  $fetch('https://jsonplaceholder.typicode.com/posts')
)
</script>
<template> <ul> <li v-for="post in posts" :key="post.id">{{ post.title }}</li> </ul> </template>

第四步：生产构建与部署

npm run build     # 构建生产版本
node .output/server/index.mjs  # 启动 Node.js 服务器

常见坑点与优化

坑点 1：XSS 安全风险。SSR 场景下，未正确转义的动态数据是最大威胁。应使用 Vue 内置的 {{ }} 文本插值自动转义 HTML，避免使用 v-html；若必须使用，需借助 DOMPurify 等库进行严格过滤。

坑点 2：服务器压力过高。SSR 每次请求都需服务端渲染，高并发下压力较大。建议启用缓存策略，对不常变化的页面生成静态化文件或缓存片段。

优化建议：为搜索引擎配置 sitemap.xml 并在 robots.txt 中正确设置爬取规则，引导索引重要页面。同时合理拆分页面级与组件级数据请求，避免服务端渲染阻塞。