vue配合实现ssr
Vue 配合实现 SSR（服务端渲染）
Vue.js 支持服务端渲染（SSR），通过将应用在服务器端生成 HTML 发送到客户端，提升首屏加载速度和 SEO 友好性。以下是实现 Vue SSR 的关键步骤和注意事项。
基础架构
使用 vue-server-renderer 和 Node.js 服务器（如 Express）搭建 SSR 环境。核心流程包括：
- 在服务器端创建 Vue 实例。
- 使用
renderToString将 Vue 实例渲染为 HTML 字符串。 - 将生成的 HTML 注入到模板中返回给客户端。
代码示例
安装依赖：
npm install vue vue-server-renderer express服务器端代码（Express）：
const express = require('express')
const { createRenderer } = require('vue-server-renderer')
const Vue = require('vue')
const app = express()
const renderer = createRenderer()
app.get('*', async (req, res) => {
const vm = new Vue({
template: '<div>SSR Content: {{ message }}</div>',
data: { message: 'Hello SSR' }
})
try {
const html = await renderer.renderToString(vm)
res.send(`
<!DOCTYPE html>
<html>
<head><title>Vue SSR</title></head>
<body>${html}</body>
</html>
`)
} catch (err) {
res.status(500).end('Internal Server Error')
}
})
app.listen(3000)客户端激活
为确保 Vue 在客户端接管静态 HTML 并变为动态应用，需在客户端挂载相同的 Vue 实例：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})注意事项
- 数据预取：在服务器端预先获取异步数据，可通过
asyncData或serverPrefetch实现。 - 状态管理：使用 Vuex 共享服务器和客户端的状态，避免数据不一致。
- 构建配置：需分别配置客户端和服务端的 Webpack 入口文件。
- 避免全局变量：确保代码兼容 Node.js 环境，避免使用
window或document。
进阶优化
- 代码分割：利用
import()动态加载组件，减少初始加载体积。 - 缓存策略：对渲染结果进行缓存，提升服务器性能。
- 流式渲染：使用
renderToStream逐步发送 HTML，加快首字节时间。
通过以上方法，Vue SSR 可显著提升应用性能和 SEO 效果，适用于内容密集型场景。
