当前位置：首页 > VUE

vue配合实现ssr

2026-03-29 16:35:03VUE

Vue 实现 SSR 的基本原理

Vue 的 SSR（Server-Side Rendering）依赖于 vue-server-renderer 包。核心原理是将 Vue 组件在服务器端渲染为 HTML 字符串，直接发送给客户端，从而提升首屏加载速度和 SEO 友好性。

实现步骤

安装依赖 需要同时安装 vue、vue-server-renderer 和服务器框架（如 express）：

npm install vue vue-server-renderer express

创建 Vue 实例 定义一个通用的 Vue 实例工厂函数，避免状态单例污染：

// app.js
import Vue from 'vue';
import App from './App.vue';

export function createApp() {
  const app = new Vue({
    render: h => h(App)
  });
  return { app };
}

服务器端入口 使用 vue-server-renderer 的 createRenderer 生成 HTML：

// server.js
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const { createApp } = require('./app');

const server = express();
const renderer = createRenderer();

server.get('*', async (req, res) => {
  const { app } = createApp();
  const html = await renderer.renderToString(app);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>Vue SSR</title></head>
      <body>${html}</body>
    </html>
  `);
});

server.listen(3000);

客户端激活（Hydration）

为了使交互生效，需在客户端挂载相同的 Vue 实例：

// client.js
import { createApp } from './app';

const { app } = createApp();
app.$mount('#app');

HTML 模板中需包含客户端脚本：

vue配合实现ssr

<body>
  <!--vue-ssr-outlet-->
  <script src="/client.js"></script>
</body>

构建配置

服务器端打包 需配置 Webpack 的 target: 'node' 和 externals：

// webpack.server.config.js
module.exports = {
  target: 'node',
  externals: [require('webpack-node-externals')()],
  output: {
    libraryTarget: 'commonjs2'
  }
};

客户端打包 与普通 Vue 项目配置一致，注意区分入口文件。

数据预取

使用 asyncData 方法或 Vuex 在渲染前获取数据：

vue配合实现ssr

// 组件内定义
export default {
  asyncData({ store }) {
    return store.dispatch('fetchData');
  }
};

服务器端需在渲染前调用：

const matchedComponents = router.getMatchedComponents();
await Promise.all(
  matchedComponents.map(Component => {
    if (Component.asyncData) {
      return Component.asyncData(store);
    }
  })
);