同学们，晚上好！今天咱们聊聊Vue SSR中的“同构应用”，这玩意儿听起来高大上，其实就是让你的Vue代码既能在浏览器里跑，也能在服务器上跑。是不是有点意思？
一、啥是同构应用？别吓唬我！
先别慌，咱们用人话解释一下。
想象一下，你盖房子，以前是先盖好地基（服务器渲染），再往上慢慢装修（客户端渲染）。同构应用呢，就是先有个半成品，地基和一部分装修都搞好了（服务器渲染），送到客户手里，客户再根据自己的喜好精装修（客户端渲染）。
这么做的好处显而易见：
- SEO友好： 搜索引擎爬虫喜欢直接看到内容，服务器渲染直接把内容送上门，它自然就喜欢你。
- 首屏加载快： 用户不用等到JavaScript下载、解析、执行完才能看到内容，服务器直接把渲染好的HTML送过去，速度嗖嗖的。
- 更好的用户体验： 在一些低端设备上，客户端渲染可能会卡顿，服务器渲染可以减轻客户端的压力。
当然，同构应用也不是万能的，它也有自己的缺点：
- 开发复杂度增加： 你得同时考虑服务器端和客户端的环境，代码需要兼容两端。
- 服务器压力增大： 服务器需要承担渲染的压力，对服务器性能要求更高。
- 调试难度增加： 错误可能发生在服务器端或客户端，排查起来比较麻烦。
二、Vue SSR 怎么实现同构？别卖关子！
Vue SSR的核心思想是：使用相同的Vue组件，在服务器端渲染出HTML，然后将这些HTML发送到客户端，客户端接管这些HTML并进行“激活”（hydration），让它们变成可交互的Vue组件。
咱们来一步一步看：
-
编写通用组件： 你的Vue组件要能在服务器端和客户端都能运行。这意味着你需要避免使用只在浏览器端存在的API，比如
window、document。// 这是一个简单的通用组件 export default { data() { return { message: 'Hello, SSR!' } }, template: '<div>{{ message }}</div>' } -
创建服务器入口： 这是服务器端渲染的起点。你需要创建一个函数，接收一个context对象，返回一个Vue实例。
// server-entry.js import Vue from 'vue' import App from './App.vue' // 引入你的通用组件 export default context => { return new Vue({ data: { url: context.url // 接收请求的URL }, render: h => h(App) }) } -
创建客户端入口： 这是客户端激活的起点。你需要创建一个Vue实例，并将服务器端渲染的HTML“激活”。
// client-entry.js import Vue from 'vue' import App from './App.vue' const app = new Vue({ render: h => h(App) }) app.$mount('#app') // 将应用挂载到 #app 元素上 -
配置webpack： 你需要配置两个webpack配置文件，一个用于服务器端构建，一个用于客户端构建。
-
服务器端webpack配置：
// webpack.server.config.js const path = require('path') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = { target: 'node', // 指定构建目标为Node.js entry: './src/server-entry.js', // 服务器入口文件 output: { filename: 'server-bundle.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'commonjs2' // 指定库的导出方式 }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueSSRServerPlugin() // 生成 vue-ssr-server-bundle.json ] } -
客户端webpack配置：
// webpack.client.config.js const path = require('path') const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') module.exports = { entry: './src/client-entry.js', // 客户端入口文件 output: { filename: 'client-bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel-loader' } ] }, plugins: [ new VueSSRClientPlugin() // 生成 vue-ssr-client-manifest.json ] }
-
-
创建服务器： 使用Node.js和Express，接收客户端请求，使用
vue-server-renderer将Vue实例渲染成HTML，并发送给客户端。// server.js const express = require('express') const VueServerRenderer = require('vue-server-renderer') const fs = require('fs') const app = express() const serverBundle = require('./dist/vue-ssr-server-bundle.json') const clientManifest = require('./dist/vue-ssr-client-manifest.json') const template = fs.readFileSync('./index.html', 'utf-8') // 你的HTML模板 const renderer = VueServerRenderer.createBundleRenderer(serverBundle, { template, clientManifest }) app.use(express.static('./dist')) // 静态资源服务 app.get('*', (req, res) => { const context = { url: req.url } renderer.renderToString(context, (err, html) => { if (err) { console.error(err) res.status(500).send('Server Error') } res.send(html) }) }) app.listen(3000, () => { console.log('Server started on port 3000') }) -
HTML模板： 你需要一个HTML模板，用于包裹服务器端渲染的HTML。
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue SSR</title> </head> <body> <!--vue-ssr-outlet--> <!-- Vue SSR 渲染的内容将会插入到这里 --> <script src="/client-bundle.js"></script> </body> </html>
三、代码解释：别让我自己猜！
咱们来详细解释一下上面的代码：
-
server-entry.js: 这个文件是服务器端渲染的入口。它接收一个context对象，这个对象包含了请求的信息，比如URL。 然后，它创建一个Vue实例，并将context.url传递给Vue实例的data选项。 最后，它返回这个Vue实例。 -
client-entry.js: 这个文件是客户端激活的入口。 它创建一个Vue实例，并将其挂载到id为app的DOM元素上。 这个DOM元素通常是在HTML模板中定义的。 -
webpack.server.config.js: 这个webpack配置文件用于构建服务器端bundle。 它指定了构建目标为node，这意味着webpack会生成可以在Node.js环境中运行的代码。 它还使用了vue-server-renderer/server-plugin插件，这个插件会生成一个vue-ssr-server-bundle.json文件，这个文件包含了服务器端bundle的信息，vue-server-renderer在渲染时会用到它。 -
webpack.client.config.js: 这个webpack配置文件用于构建客户端bundle。 它使用了vue-server-renderer/client-plugin插件，这个插件会生成一个vue-ssr-client-manifest.json文件，这个文件包含了客户端bundle的信息，vue-server-renderer在渲染时会用到它，用于注入正确的资源链接。 -
server.js: 这个文件创建了一个Express服务器，用于处理客户端请求。 它首先读取了vue-ssr-server-bundle.json和vue-ssr-client-manifest.json文件，然后使用vue-server-renderer创建了一个renderer。 当接收到客户端请求时，它调用renderer的renderToString方法，将Vue实例渲染成HTML。 最后，它将HTML发送给客户端。 -
index.html: 这个文件是一个HTML模板，用于包裹服务器端渲染的HTML。<!--vue-ssr-outlet-->是一个特殊的注释，vue-server-renderer会将Vue实例渲染的HTML插入到这个注释的位置。<script src="/client-bundle.js"></script>引入了客户端bundle，客户端会使用这个bundle来激活服务器端渲染的HTML。
四、高级用法：别光说不练！
-
数据预取： 在服务器端渲染之前，你需要预取数据。你可以使用
vue-router的beforeRouteEnter、beforeRouteUpdate钩子函数，或者创建一个专门的数据预取函数。// 一个数据预取示例 export default { data() { return { post: null } }, asyncData({ store, route }) { // asyncData 是一个自定义函数，可以访问 store 和 route return store.dispatch('fetchPost', route.params.id) // 发起一个 Vuex action 来获取数据 }, mounted() { if (!this.post) { this.$store.dispatch('fetchPost', this.$route.params.id) // 客户端激活时，如果数据为空，再次获取数据 } } } -
状态管理： 使用Vuex进行状态管理，你需要确保在服务器端和客户端都能访问到同一个store实例。
// 创建 store 的函数 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export function createStore() { return new Vuex.Store({ state: { posts: [] }, mutations: { setPosts(state, posts) { state.posts = posts } }, actions: { async fetchPosts({ commit }) { // 模拟异步请求 await new Promise(resolve => setTimeout(resolve, 1000)) const posts = [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }] commit('setPosts', posts) } } }) }在
server-entry.js中：import { createStore } from './store' export default context => { const store = createStore() return store.dispatch('fetchPosts').then(() => { // 预取数据 context.state = store.state // 将状态注入到 context 中 return new Vue({ store, render: h => h(App) }) }) }在
client-entry.js中：import { createStore } from './store' const store = createStore() if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__) // 使用服务器端的状态初始化 store } const app = new Vue({ store, render: h => h(App) }) app.$mount('#app') -
路由管理： 使用
vue-router进行路由管理，你需要确保在服务器端和客户端使用相同的路由配置。// 创建 router 的函数 import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) export function createRouter() { return new VueRouter({ mode: 'history', // 使用 history 模式 routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) }在
server-entry.js中：import { createRouter } from './router' export default context => { const router = createRouter() router.push(context.url) // 推送路由 return new Promise((resolve, reject) => { router.onReady(() => { // 等待路由加载完成 const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) { return reject({ code: 404 }) // 如果没有匹配的路由，返回 404 } resolve(new Vue({ router, render: h => h(App) })) }, reject) }) }在
client-entry.js中：import { createRouter } from './router' const router = createRouter() const app = new Vue({ router, render: h => h(App) }) app.$mount('#app') -
组件缓存： 对于不经常变化的组件，可以使用
vue-server-renderer的cache选项进行缓存，提高服务器端渲染的性能。// 创建一个缓存对象，可以使用 LRU 缓存算法 const LRU = require('lru-cache') const renderer = VueServerRenderer.createBundleRenderer(serverBundle, { template, clientManifest, cache: new LRU({ max: 1000, // 最大缓存数量 maxAge: 1000 * 60 * 15 // 缓存时间 15 分钟 }) }) -
错误处理： 在服务器端渲染过程中，可能会发生错误。你需要捕获这些错误，并将其记录到日志中，并返回一个友好的错误页面。
app.get('*', (req, res) => { const context = { url: req.url } renderer.renderToString(context, (err, html) => { if (err) { console.error(err) if (err.code === 404) { res.status(404).send('Page not found') } else { res.status(500).send('Server Error') } } else { res.send(html) } }) })
五、常见问题：别想糊弄我！
-
"window is not defined"： 这是因为你在服务器端使用了
window对象。你应该避免在通用组件中使用只在浏览器端存在的API。可以使用process.server和process.client来判断当前运行环境。if (process.client) { // 客户端代码 console.log('This is running in the browser') } else { // 服务器端代码 console.log('This is running on the server') } -
"document is not defined"： 和
window类似，document也是只在浏览器端存在的对象。 -
"Hydration mismatch"： 这是因为服务器端渲染的HTML和客户端渲染的HTML不一致。你需要确保服务器端和客户端使用相同的数据和组件。检查数据预取是否正确，组件的模板是否一致。
-
性能问题： 服务器端渲染会增加服务器的压力。你需要优化你的代码，使用组件缓存，并使用CDN来加速静态资源的加载。
六、总结：别啰嗦了！
同构应用是一个强大的技术，可以提高你的Vue应用的SEO和用户体验。但是，它也增加了开发的复杂度。你需要仔细权衡利弊，选择适合你的方案。
| 优点 | 缺点 |
|---|---|
| SEO友好 | 开发复杂度增加 |
| 首屏加载快 | 服务器压力增大 |
| 更好的用户体验 | 调试难度增加 |
希望今天的讲座对大家有所帮助。记住，实践是检验真理的唯一标准。多动手，多尝试，你才能真正掌握Vue SSR的精髓。
下课！