当前位置：首页 > VUE

vue ssr实现思路

2026-01-08 08:18:39VUE

Vue SSR 实现思路

Vue SSR（Server-Side Rendering）的核心目标是在服务端生成完整的 HTML 页面，提升首屏加载速度和 SEO 友好性。以下是关键实现思路：

基础架构设计

使用 vue-server-renderer 和 Node.js 服务器（如 Express 或 Koa）作为基础环境。服务端通过 createBundleRenderer 生成静态 HTML，客户端通过 hydration 激活交互。

服务端入口文件应避免全局状态污染，每个请求需创建新的 Vue 实例：

// server-entry.js
export default () => {
  const app = new Vue({
    render: h => h(App)
  });
  return { app };
};

构建配置

通过 Webpack 分别生成服务端和客户端构建包。服务端需配置 target: 'node' 和 libraryTarget: 'commonjs2'，客户端则按常规 SPA 配置。

服务端 Webpack 配置示例：

vue ssr实现思路

module.exports = {
  target: 'node',
  output: {
    libraryTarget: 'commonjs2'
  },
  externals: nodeExternals()
};

数据预取

使用 asyncData 或 Vuex 在渲染前获取数据。服务端通过 router.getMatchedComponents() 匹配组件并调用数据预取方法。

Vuex 示例：

// 服务端数据预取
router.onReady(() => {
  const matchedComponents = router.getMatchedComponents();
  Promise.all(
    matchedComponents.map(Component => {
      if (Component.asyncData) {
        return Component.asyncData({ store, route: router.currentRoute });
      }
    })
  ).then(() => {
    // 渲染完整HTML
  });
});

客户端激活

通过 __INITIAL_STATE__ 将服务端 Vuex 状态注入到客户端：

vue ssr实现思路

<script>
  window.__INITIAL_STATE__ = ${serialize(store.state)};
</script>

客户端入口需同步初始状态：

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

静态资源处理

使用 vue-meta 管理头部标签，通过 renderer.renderToString() 自动处理资源注入。需配置 publicPath 确保资源路径正确。

性能优化

使用 LRU 缓存组件级或页面级渲染结果
开启 shouldPrefetch 预加载关键资源
通过 ssrOptimizeLoader 优化依赖加载

错误处理

实现通用错误捕获机制：

renderer.renderToString(context, (err, html) => {
  if (err) {
    if (err.code === 404) {
      res.status(404).end('Page not found');
    } else {
      res.status(500).end('Internal Server Error');
    }
  } else {
    res.end(html);
  }
});