实现 vue ssr
Vue SSR 实现步骤
安装必要依赖
确保项目已安装 vue 和 vue-server-renderer。若使用 Vue 3，需安装 @vue/server-renderer。通过 npm 或 yarn 安装：
npm install vue @vue/server-renderer创建服务端入口文件
新建 server-entry.js 文件，用于创建 Vue 应用实例并导出渲染函数：
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return { app }
}配置 Node 服务器
使用 Express 或 Koa 创建服务器，集成 SSR 渲染逻辑。示例代码（Express）：
import express from 'express'
import { renderToString } from '@vue/server-renderer'
import { createApp } from './server-entry.js'
const server = express()
server.get('*', async (req, res) => {
const { app } = createApp()
const html = await renderToString(app)
res.send(`
<!DOCTYPE html>
<html>
<head><title>Vue SSR</title></head>
<body>
<div id="app">${html}</div>
</body>
</html>
`)
})
server.listen(3000)处理客户端激活
创建客户端入口文件 client-entry.js，确保应用在浏览器端能正常交互：
import { createApp } from './app.js'
const { app } = createApp()
app.mount('#app')构建配置
分别配置服务端和客户端的 Webpack 构建。服务端需设置 target: 'node' 和 externals 排除 Node 模块，客户端配置与常规 Vue 项目类似。
注意事项
- 数据预取：使用
asyncData或类似机制在渲染前获取数据，可通过 Vuex 或全局状态管理共享数据。 - 避免状态单例：服务端需为每个请求创建新的应用实例，防止状态污染。
- HTML 模板：使用
html-webpack-plugin动态生成包含占位符的模板，服务端渲染时替换内容。
优化建议
- 代码分割：利用
import()动态导入实现路由级代码分割，提升加载性能。 - 缓存策略：对静态页面或组件使用 LRU 缓存，减少重复渲染开销。
- SSR + CSR 混合：对非关键路由采用客户端渲染，降低服务器压力。
完整实现需结合具体项目结构调整，上述流程提供了核心实现路径。
