vue如何实现ssr
Vue 实现 SSR 的基本原理
Vue 的 SSR（Server-Side Rendering）核心思想是将组件在服务器端渲染为 HTML 字符串，直接发送给浏览器，再由客户端激活（Hydration）为可交互的 SPA。这种方式能提升首屏加载速度，改善 SEO。
基础实现步骤
安装必要依赖：
npm install vue vue-server-renderer express创建通用入口文件（app.js）：
import Vue from 'vue'
import App from './App.vue'
export function createApp() {
const app = new Vue({
render: h => h(App)
})
return { app }
}服务器端入口（server.js）：
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const { app } = require('./app')
renderer.renderToString(app, (err, html) => {
if (err) res.status(500).end('Internal Server Error')
res.end(`
<!DOCTYPE html>
<html>
<head><title>SSR</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)使用 Nuxt.js 简化流程
对于生产环境，推荐使用 Nuxt.js 框架：
安装 Nuxt：
npx create-nuxt-app my-project配置 nuxt.config.js：
export default {
ssr: true, // 启用 SSR 模式
target: 'server' // 默认值即为 server
}启动开发服务器：
npm run dev关键注意事项
确保组件代码是通用代码，避免在 beforeCreate 和 created 生命周期中使用浏览器特有 API，可通过 process.client 判断环境：
if (process.client) {
// 只在客户端执行的代码
}路由应使用 vue-router 的通用模式，在服务器端和客户端分别创建路由实例。
数据预取方案
使用 asyncData 方法（Nuxt）或 vuex 进行服务器端数据预取：
export default {
async asyncData({ params }) {
const data = await fetchData(params.id)
return { data }
}
}构建与部署
Nuxt 项目构建命令：
npm run build生成的 .nuxt 目录包含 SSR 所需的服务器端 bundle，需配合 Node 服务器运行。
性能优化
- 使用
lru-cache缓存渲染结果 - 实施组件级缓存
- 开启 HTTP/2 服务器推送
- 使用
@vue/server-renderer的流式渲染（Vue 3）
以上方案可根据项目需求组合使用，Nuxt.js 已内置多数优化配置。
