vue实现ssr

Vue 实现 SSR（服务端渲染）

Vue 的服务端渲染（SSR）允许在服务器端生成完整的 HTML 内容，再发送到客户端，提升首屏加载速度和 SEO 友好性。以下是实现 Vue SSR 的关键步骤和方法。

使用 Vue 官方 SSR 方案

Vue 官方提供 vue-server-renderer 和 vue-ssr-webpack-plugin 工具包，适用于 Vue 2 和 Vue 3 项目。

安装依赖

npm install vue vue-server-renderer express

服务端入口文件（server.js）

const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
  const app = new Vue({
    data: { url: req.url },
    template: `<div>访问的 URL 是：{{ url }}</div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(html);
  });
});

server.listen(8080);

基于 Nuxt.js 的 SSR

Nuxt.js 是 Vue 的 SSR 框架，简化了配置流程。

初始化 Nuxt 项目

npx create-nuxt-app my-ssr-app

关键配置

• 在 nuxt.config.js 中设置 mode: 'universal'（默认即为 SSR 模式）。
• 页面组件存放在 pages/ 目录，自动生成路由。

启动开发服务器

npm run dev

客户端激活（Hydration）

SSR 生成的静态 HTML 需要在客户端通过 Vue 实例“激活”为动态应用。

客户端入口文件（client.js）

import { createSSRApp } from 'vue';
const app = createSSRApp({
  // 与服务器端相同的应用实例
});
app.mount('#app');

Webpack 配置

• 分别打包服务端和客户端代码，生成 server-bundle.js 和 client-bundle.js。
• 使用 webpack-node-externals 排除 Node.js 模块。

数据预取与状态管理

在 SSR 中，异步数据需在渲染前预取，避免客户端与服务端状态不一致。

使用 asyncData 方法（Nuxt.js）

export default {
  async asyncData({ params }) {
    const data = await fetch(`/api/data/${params.id}`);
    return { data };
  }
};

Vuex 状态同步

• 服务端通过 store.dispatch 预取数据。
• 将初始状态嵌入 HTML，客户端通过 window.__INITIAL_STATE__ 同步。

部署与性能优化

部署方案

• Node.js 服务器（如 Express、Koa）。
• 无服务器架构（如 Vercel、AWS Lambda）。

缓存策略

• 页面级缓存：对静态路由结果缓存。
• 组件级缓存：通过 vue-server-renderer 的 cache 选项实现。

注意事项

• 避免在 created 或 mounted 生命周期中操作 DOM，服务端无 DOM 环境。
• 第三方库需兼容 SSR，检查是否支持 process.server 条件渲染。
• 使用 vue-meta 管理头部标签（如 title、meta）。

通过以上方法，可以高效实现 Vue 的 SSR 功能，平衡性能与开发体验。