Vue 服务端渲染（SSR）与 Nuxt.js 实战指南

快速概述

Vue 服务端渲染（SSR）解决的核心问题是传统单页应用（SPA）首屏加载慢、SEO 不友好的痛点。Nuxt.js 作为基于 Vue.js 的通用应用框架，旨在简化服务端渲染和静态站点生成的开发流程，能显著提升页面加载速度和 SEO 性能，并简化开发流程。适用场景包括内容型网站、电商页面、企业官网等对首屏速度和搜索引擎收录有要求的项目。前置环境要求：Node.js（建议 LTS 版本）、npm 或 yarn 包管理器，以及基础的 Vue.js 和 JavaScript 知识。

核心概念与原理

SSR 的核心机制是：浏览器请求页面时，服务器直接运行 Vue 组件并渲染出完整的 HTML 字符串返回给客户端，用户无需等待 JavaScript 加载即可看到内容。Nuxt.js 在此之上提供了文件系统路由、自动代码分割、数据预取等约定式开发模式，大幅降低 SSR 的配置复杂度。其工作流程为：客户端发起请求 → Nuxt 服务端执行 asyncData 或 fetch 获取数据 → 渲染完整 HTML → 客户端接管页面进行交互（水合）。

实战步骤与代码

1. 环境准备与项目初始化

确保 Node.js 版本满足要求，然后使用 create-nuxt-app 脚手架快速创建项目：

npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
npm run dev

脚手架会交互式询问功能模块（如 Axios、ESLint 等），按需选择即可。

2. 页面与路由

Nuxt.js 采用文件系统路由，在 pages 目录下创建 .vue 文件即自动生成对应路由：

// pages/index.vue
<template>
  <div>首页内容</div>
</template>

3. 服务端数据获取

使用 asyncData 方法在服务端获取数据并注入组件：

// pages/posts/_id.vue
export default {
  async asyncData({ params, $axios }) {
    const post = await $axios.$get(`/api/posts/${params.id}`)
    return { post } // 数据将合并到组件 data
  }
}

asyncData 在服务端渲染期间执行，返回的对象会与组件 data 合并。

4. 中间件与权限控制

通过中间件实现路由守卫，例如登录验证：

// middleware/auth.js
export default function ({ redirect, store }) {
  if (!store.state.auth) {
    return redirect('/login')
  }
}
// pages/protected.vue export default { middleware: 'auth' }

中间件在页面渲染前执行，适合做权限校验和重定向。

常见坑点与优化

常见报错与避坑

• window 未定义：在服务端渲染阶段不存在 window 对象，需使用 process.client 判断或放入 mounted 钩子。
• asyncData 无法访问 this：asyncData 在组件实例创建前执行，应通过上下文参数获取数据。
• 第三方库兼容性：部分库依赖浏览器 API，需在 nuxt.config.js 中配置 ssr: false 或使用客户端插件。

性能优化建议

• 启用静态站点生成（SSG）模式，将不频繁变动的页面预渲染为静态文件，进一步降低服务器压力。
• 合理使用缓存策略，对接口数据和渲染结果进行缓存。
• 利用 Nuxt.js 的自动代码分割功能，按路由拆分打包体积。

通过以上步骤，开发者可以快速搭建一个具备 SSR 能力的 Vue 应用，兼顾性能与 SEO 需求。