vue ssr实现思路

Vue SSR 实现思路

Vue SSR（Server-Side Rendering）的核心目标是在服务端生成完整的 HTML 字符串，直接返回给客户端，从而提升首屏加载速度和 SEO 友好性。

基础架构设计

使用 vue-server-renderer 和 express（或 koa）搭建服务端渲染框架。服务端通过 createBundleRenderer 生成渲染器，将 Vue 实例转换为 HTML 字符串。

const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, {
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

客户端与服务端代码分离

通过 Webpack 分别打包客户端和服务端入口文件。服务端入口需导出工厂函数，避免单例状态污染。

// 服务端入口
export default function createApp() {
  return new Vue({ /* 路由、store 等配置 */ })
}

数据预取与状态同步

在路由组件中使用 serverPrefetch 钩子预取数据，服务端将预取数据注入到 HTML 的 window.__INITIAL_STATE__，客户端同步状态。

// 组件内
export default {
  async serverPrefetch() {
    await this.$store.dispatch('fetchData')
  }
}

客户端激活（Hydration）

客户端挂载时使用 hydrate 模式，复用服务端渲染的 DOM 结构。

new Vue({
  render: h => h(App),
  hydrate: true // 仅在浏览器端生效
}).$mount('#app')

构建配置优化

通过 webpack-node-externals 排除服务端不必要的依赖，使用 css-loader/locals 避免服务端打包 CSS 文件。

// webpack.server.config.js
externals: [nodeExternals({
  whitelist: /\.css$/
})]

处理异步组件

动态导入的组件需在服务端预先加载，可通过 @babel/plugin-syntax-dynamic-import 和 LOADABLE_COMPONENTS 机制实现。

错误处理与缓存

服务端渲染需捕获组件错误，避免进程崩溃。可对渲染结果实施 LRU 缓存，提升高并发性能。

// 错误处理
renderer.renderToString(context, (err, html) => {
  if (err) { /* 降级处理或返回错误页 */ }
})