当前位置：首页 > VUE

vue配合实现ssr

2026-03-09 05:01:36VUE

Vue 实现 SSR 的核心方法

Vue 的服务器端渲染（SSR）通过将组件在服务端生成 HTML 字符串，再发送给客户端激活，实现更好的首屏性能和 SEO。以下是关键实现方式：

基础配置与项目结构

使用官方库 vue-server-renderer 和 express 搭建基础服务：

// 服务端入口 server-entry.js
import { createApp } from './app'

export default context => {
  const { app } = createApp()
  return app
}

// 客户端入口 client-entry.js
import { createApp } from './app'

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

服务端渲染处理

通过 createRenderer 生成 HTML 并处理路由：

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

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(app, context, (err, html) => {
    if (err) res.status(500).end('Internal Server Error')
    res.end(html)
  })
})

客户端激活与数据预取

使用 vuex 同步服务端与客户端状态：

// 共享状态管理
export function createStore() {
  return new Vuex.Store({
    state: { items: [] },
    actions: {
      fetchData({ commit }) {
        return api.fetchItems().then(items => commit('setItems', items))
      }
    }
  })
}

在组件中定义静态方法 asyncData 预取数据：

export default {
  asyncData({ store }) {
    return store.dispatch('fetchData')
  }
}

构建配置分离

通过 Webpack 分别打包服务端和客户端代码：

// webpack.server.config.js
module.exports = {
  target: 'node',
  output: {
    libraryTarget: 'commonjs2'
  }
}

// webpack.client.config.js
module.exports = {
  entry: { app: './client-entry.js' }
}

生产环境优化

使用 LRU 缓存组件渲染结果：

vue配合实现ssr

const microCache = new LRU({
  max: 100,
  maxAge: 1000 * 60 // 1分钟缓存
})

server.get('*', (req, res) => {
  const hit = microCache.get(req.url)
  if (hit) return res.end(hit)

  renderToString(app, (err, html) => {
    microCache.set(req.url, html)
    res.end(html)
  })
})