vue实现ssr
Vue 实现 SSR（服务端渲染）
Vue 的服务端渲染（SSR）允许在服务器端生成完整的 HTML 内容，再发送到客户端，提升首屏加载速度和 SEO 友好性。以下是实现 Vue SSR 的关键步骤和方法。
使用 Vue 官方 SSR 方案
Vue 官方提供 vue-server-renderer 和 vue-ssr-webpack-plugin 工具包，适用于 Vue 2 和 Vue 3 项目。
安装依赖
npm install vue vue-server-renderer express服务端入口文件（server.js）
const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();
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);基于 Nuxt.js 的 SSR
Nuxt.js 是 Vue 的 SSR 框架，简化了配置流程。
初始化 Nuxt 项目
npx create-nuxt-app my-ssr-app关键配置
- 在
nuxt.config.js中设置mode: 'universal'（默认即为 SSR 模式）。 - 页面组件存放在
pages/目录，自动生成路由。
启动开发服务器
npm run dev客户端激活（Hydration）
SSR 生成的静态 HTML 需要在客户端通过 Vue 实例“激活”为动态应用。
客户端入口文件（client.js）
import { createSSRApp } from 'vue';
const app = createSSRApp({
// 与服务器端相同的应用实例
});
app.mount('#app');Webpack 配置
- 分别打包服务端和客户端代码，生成
server-bundle.js和client-bundle.js。 - 使用
webpack-node-externals排除 Node.js 模块。
数据预取与状态管理
在 SSR 中，异步数据需在渲染前预取，避免客户端与服务端状态不一致。
使用 asyncData 方法（Nuxt.js）
export default {
async asyncData({ params }) {
const data = await fetch(`/api/data/${params.id}`);
return { data };
}
};Vuex 状态同步
- 服务端通过
store.dispatch预取数据。 - 将初始状态嵌入 HTML，客户端通过
window.__INITIAL_STATE__同步。
部署与性能优化
部署方案
- Node.js 服务器（如 Express、Koa）。
- 无服务器架构（如 Vercel、AWS Lambda）。
缓存策略
- 页面级缓存：对静态路由结果缓存。
- 组件级缓存：通过
vue-server-renderer的cache选项实现。
注意事项
- 避免在
created或mounted生命周期中操作 DOM，服务端无 DOM 环境。 - 第三方库需兼容 SSR，检查是否支持
process.server条件渲染。 - 使用
vue-meta管理头部标签（如 title、meta）。
通过以上方法，可以高效实现 Vue 的 SSR 功能，平衡性能与开发体验。
