vue实现ssr
Vue 实现 SSR（服务端渲染）的方法
Vue.js 支持服务端渲染（SSR），可以提升首屏加载速度、改善 SEO 和用户体验。以下是实现 Vue SSR 的主要方法和步骤。
使用 Vue 官方 SSR 指南
Vue 官方提供了详细的 SSR 指南，推荐使用 vue-server-renderer 和 vue-router 结合 Node.js 服务器（如 Express 或 Koa）实现 SSR。
安装必要的依赖：
npm install vue vue-server-renderer express创建服务端入口文件（server.js）：
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const server = express()
// 使用 Vue SSR 渲染器
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
renderer.renderToString({ url: req.url }, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen(8080)使用 Nuxt.js 框架
Nuxt.js 是一个基于 Vue 的 SSR 框架，简化了配置和开发流程，适合快速构建 SSR 应用。
安装 Nuxt.js：
npx create-nuxt-app my-project配置 nuxt.config.js 以启用 SSR：
export default {
ssr: true,
target: 'server'
}运行开发服务器：
npm run dev数据预取和状态管理
在 SSR 中，需要在渲染前预取数据，确保页面内容完整。Vuex 是推荐的状态管理工具。
在 Vue 组件中定义 asyncData 方法：
export default {
asyncData({ store }) {
return store.dispatch('fetchData')
}
}在 Vuex Store 中定义数据获取逻辑：
actions: {
fetchData({ commit }) {
return axios.get('/api/data').then(res => {
commit('SET_DATA', res.data)
})
}
}客户端激活（Hydration）
SSR 生成的 HTML 需要在客户端“激活”，使其成为动态应用。确保客户端入口文件（client.js）正确挂载应用：
import { createApp } from './app'
const { app, router } = createApp()
router.onReady(() => {
app.$mount('#app')
})静态站点生成（SSG）
如果需要预渲染静态页面，可以使用 prerender-spa-plugin 或 Nuxt.js 的 generate 命令：
nuxt generate注意事项
- 避免客户端特有代码：在 SSR 中避免使用
window或document等浏览器特有对象，应在mounted生命周期中使用。 - 组件生命周期：SSR 仅执行
beforeCreate和created生命周期钩子，mounted等钩子仅在客户端执行。 - 代码分割：使用动态导入（
() => import('./Component.vue')）优化性能。
以上方法涵盖了 Vue SSR 的主要实现方式，可根据项目需求选择合适的方案。
