vue实现ssr渲染
Vue SSR 实现方法
Vue.js 的服务器端渲染（SSR）通过将 Vue 应用在服务器端生成 HTML 字符串，再发送到客户端激活，可提升首屏加载速度和 SEO 友好性。
基础配置
安装必要依赖：
npm install vue vue-server-renderer express创建服务器入口文件（server.js）：
const express = require('express')
const { createRenderer } = require('vue-server-renderer')
const server = express()
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
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)客户端激活
创建客户端入口文件（client.js）：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})需要配置 webpack 分别打包客户端和服务端代码：
// webpack.client.config.js
module.exports = {
entry: './client.js',
output: {
filename: 'client-bundle.js'
}
}
// webpack.server.config.js
module.exports = {
target: 'node',
entry: './server.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
}
}路由处理
使用 vue-router 时需注意：
// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [...]
})
}
// 在服务器端需要匹配路由
import { createRouter } from './router'
const router = createRouter()
router.push(req.url)数据预取
在组件中添加 serverPrefetch 钩子：
export default {
async serverPrefetch() {
await this.fetchData()
},
methods: {
fetchData() {
return api.get('/data')
}
}
}服务器端需处理数据预取：
const matchedComponents = router.getMatchedComponents()
await Promise.all(
matchedComponents.map(Component => {
if (Component.serverPrefetch) {
return Component.serverPrefetch()
}
})
)状态管理
使用 Vuex 时需注意状态同步：
// store.js
export function createStore() {
return new Vuex.Store({...})
}
// 服务器端需防止状态污染
const store = createStore()
const app = new Vue({
router,
store,
render: h => h(App)
})生产环境优化
建议使用官方推荐的 Nuxt.js 框架，它封装了 Vue SSR 的最佳实践：
npm install -g create-nuxt-app
create-nuxt-app my-projectNuxt.js 自动处理以下问题：
- 自动配置 webpack
- 内置路由系统
- 异步数据获取
- 静态文件服务
- 代码分割
常见问题解决
客户端激活失败时检查：
- 确保服务器输出与客户端挂载的 DOM 结构完全一致
- 避免在模板中使用客户端特有的 API（如 window）
- 检查 hydration 不匹配警告
性能优化建议：
- 使用 micro caching 缓存渲染结果
- 实施组件级缓存
- 避免在服务器渲染期间产生副作用
- 使用 keep-alive 缓存组件
