Vue服務(wù)端渲染實(shí)踐 ——Web應(yīng)用首屏耗時(shí)最優(yōu)化方案
隨著各大前端框架的誕生和演變，SPA開(kāi)始流行，單頁(yè)面應(yīng)用的優(yōu)勢(shì)在于可以不重新加載整個(gè)頁(yè)面的情況下，通過(guò)ajax和服務(wù)器通信，實(shí)現(xiàn)整個(gè)Web應(yīng)用拒不更新，帶來(lái)了極致的用戶(hù)體驗(yàn)。然而，對(duì)于需要SEO、追求極致的首屏性能的應(yīng)用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服務(wù)端渲染的，零零散散花費(fèi)了兩三周事件，通過(guò)改造現(xiàn)有項(xiàng)目，基本完成了在現(xiàn)有項(xiàng)目中實(shí)踐了Vue服務(wù)端渲染。
關(guān)于Vue服務(wù)端渲染的原理、搭建，官方文檔已經(jīng)講的比較詳細(xì)了，因此，本文不是抄襲文檔，而是文檔的補(bǔ)充。特別是對(duì)于如何與現(xiàn)有項(xiàng)目進(jìn)行很好的結(jié)合，還是需要費(fèi)很大功夫的。本文主要對(duì)我所在的項(xiàng)目中進(jìn)行Vue服務(wù)端渲染的改造過(guò)程進(jìn)行闡述，加上一些個(gè)人的理解，作為分享與學(xué)習(xí)。
概述
本文主要分以下幾個(gè)方面：
- 什么是服務(wù)端渲染？服務(wù)端渲染的原理是什么？
- 如何在基于Koa的Web Server Frame上配置服務(wù)端渲染？
- 基本用法
- Webpack配置
- 開(kāi)發(fā)環(huán)境搭建
- 渲染中間件配置
- 如何對(duì)現(xiàn)有項(xiàng)目進(jìn)行改造？
- 基本目錄改造；
- 在服務(wù)端用vue-router分割代碼；
- 在服務(wù)端預(yù)拉取數(shù)據(jù)；
- 客戶(hù)端托管全局狀態(tài)；
- 常見(jiàn)問(wèn)題的解決方案；
什么是服務(wù)端渲染？服務(wù)端渲染的原理是什么？
Vue.js是構(gòu)建客戶(hù)端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出Vue組件，進(jìn)行生成DOM和操作DOM。然而，也可以將同一個(gè)組件渲染為服務(wù)器端的HTML字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶(hù)端上完全可交互的應(yīng)用程序。
上面這段話(huà)是源自Vue服務(wù)端渲染文檔的解釋?zhuān)猛ㄋ椎脑?huà)來(lái)說(shuō)，大概可以這么理解：
- 服務(wù)端渲染的目的是：性能優(yōu)勢(shì)。 在服務(wù)端生成對(duì)應(yīng)的HTML字符串，客戶(hù)端接收到對(duì)應(yīng)的HTML字符串，能立即渲染DOM，最高效的首屏耗時(shí)。此外，由于服務(wù)端直接生成了對(duì)應(yīng)的HTML字符串，對(duì)SEO也非常友好；
- 服務(wù)端渲染的本質(zhì)是：生成應(yīng)用程序的“快照”。將Vue及對(duì)應(yīng)庫(kù)運(yùn)行在服務(wù)端，此時(shí)，Web Server Frame實(shí)際上是作為代理服務(wù)器去訪(fǎng)問(wèn)接口服務(wù)器來(lái)預(yù)拉取數(shù)據(jù)，從而將拉取到的數(shù)據(jù)作為Vue組件的初始狀態(tài)。
- 服務(wù)端渲染的原理是：虛擬DOM。在Web Server Frame作為代理服務(wù)器去訪(fǎng)問(wèn)接口服務(wù)器來(lái)預(yù)拉取數(shù)據(jù)后，這是服務(wù)端初始化組件需要用到的數(shù)據(jù)，此后，組件的beforeCreate和created生命周期會(huì)在服務(wù)端調(diào)用，初始化對(duì)應(yīng)的組件后，Vue啟用虛擬DOM形成初始化的HTML字符串。之后，交由客戶(hù)端托管。實(shí)現(xiàn)前后端同構(gòu)應(yīng)用。
如何在基于Koa的Web Server Frame上配置服務(wù)端渲染？
基本用法
需要用到Vue服務(wù)端渲染對(duì)應(yīng)庫(kù)vue-server-renderer，通過(guò)npm安裝：
- npm install vue vue-server-renderer --save
最簡(jiǎn)單的，首先渲染一個(gè)Vue實(shí)例：
- // 第 1 步：創(chuàng)建一個(gè) Vue 實(shí)例
- const Vue = require('vue');
- const app = new Vue({
- template: `<div>Hello World</div>`
- });
- // 第 2 步：創(chuàng)建一個(gè) renderer
- const renderer = require('vue-server-renderer').createRenderer();
- // 第 3 步：將 Vue 實(shí)例渲染為 HTML
- renderer.renderToString(app, (err, html) => {
- if (err) {
- throw err;
- }
- console.log(html);
- // => <div data-server-rendered="true">Hello World</div>
- });
與服務(wù)器集成：
- module.exports = async function(ctx) {
- ctx.status = 200;
- let html = '';
- try {
- // ...
- html = await renderer.renderToString(app, ctx);
- } catch (err) {
- ctx.logger('Vue SSR Render error', JSON.stringify(err));
- html = await ctx.getErrorPage(err); // 渲染出錯(cuò)的頁(yè)面
- }
- ctx.body = html;
- }
使用頁(yè)面模板：
當(dāng)你在渲染Vue應(yīng)用程序時(shí)，renderer只從應(yīng)用程序生成HTML標(biāo)記。在這個(gè)示例中，我們必須用一個(gè)額外的HTML頁(yè)面包裹容器，來(lái)包裹生成的HTML標(biāo)記。
為了簡(jiǎn)化這些，你可以直接在創(chuàng)建renderer時(shí)提供一個(gè)頁(yè)面模板。多數(shù)時(shí)候，我們會(huì)將頁(yè)面模板放在特有的文件中：
- <!DOCTYPE html>
- <html lang="en">
- <head><title>Hello</title></head>
- <body>
- <!--vue-ssr-outlet-->
- </body>
- </html>
然后，我們可以讀取和傳輸文件到Vue renderer中：
- const tpl = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8');
- const renderer = vssr.createRenderer({
- template: tpl,
- });
Webpack配置
然而在實(shí)際項(xiàng)目中，不止上述例子那么簡(jiǎn)單，需要考慮很多方面：路由、數(shù)據(jù)預(yù)取、組件化、全局狀態(tài)等，所以服務(wù)端渲染不是只用一個(gè)簡(jiǎn)單的模板，然后加上使用vue-server-renderer完成的，如下面的示意圖所示：
如示意圖所示，一般的Vue服務(wù)端渲染項(xiàng)目，有兩個(gè)項(xiàng)目入口文件，分別為entry-client.js和entry-server.js，一個(gè)僅運(yùn)行在客戶(hù)端，一個(gè)僅運(yùn)行在服務(wù)端，經(jīng)過(guò)Webpack打包后，會(huì)生成兩個(gè)Bundle，服務(wù)端的Bundle會(huì)用于在服務(wù)端使用虛擬DOM生成應(yīng)用程序的“快照”，客戶(hù)端的Bundle會(huì)在瀏覽器執(zhí)行。
因此，我們需要兩個(gè)Webpack配置，分別命名為webpack.client.config.js和webpack.server.config.js，分別用于生成客戶(hù)端Bundle與服務(wù)端Bundle，分別命名為vue-ssr-client-manifest.json與vue-ssr-server-bundle.json，關(guān)于如何配置，Vue官方有相關(guān)示例vue-hackernews-2.0
開(kāi)發(fā)環(huán)境搭建
我所在的項(xiàng)目使用Koa作為Web Server Frame，項(xiàng)目使用koa-webpack進(jìn)行開(kāi)發(fā)環(huán)境的構(gòu)建。如果是在產(chǎn)品環(huán)境下，會(huì)生成vue-ssr-client-manifest.json與vue-ssr-server-bundle.json，包含對(duì)應(yīng)的Bundle，提供客戶(hù)端和服務(wù)端引用，而在開(kāi)發(fā)環(huán)境下，一般情況下放在內(nèi)存中。使用memory-fs模塊進(jìn)行讀取。
- const fs = require('fs')
- const path = require( 'path' );
- const webpack = require( 'webpack' );
- const koaWpDevMiddleware = require( 'koa-webpack' );
- const MFS = require('memory-fs');
- const appSSR = require('./../../app.ssr.js');
- let wpConfig;
- let clientConfig, serverConfig;
- let wpCompiler;
- let clientCompiler, serverCompiler;
- let clientManifest;
- let bundle;
- // 生成服務(wù)端bundle的webpack配置
- if ((fs.existsSync(path.resolve(cwd,'webpack.server.config.js')))) {
- serverConfig = require(path.resolve(cwd, 'webpack.server.config.js'));
- serverCompiler = webpack( serverConfig );
- }
- // 生成客戶(hù)端clientManifest的webpack配置
- if ((fs.existsSync(path.resolve(cwd,'webpack.client.config.js')))) {
- clientConfig = require(path.resolve(cwd, 'webpack.client.config.js'));
- clientCompiler = webpack(clientConfig);
- }
- if (serverCompiler && clientCompiler) {
- let publicPath = clientCompiler.output && clientCompiler.output.publicPath;
- const koaDevMiddleware = await koaWpDevMiddleware({
- compiler: clientCompiler,
- devMiddleware: {
- publicPath,
- serverSideRender: true
- },
- });
- app.use(koaDevMiddleware);
- // 服務(wù)端渲染生成clientManifest
- app.use(async (ctx, next) => {
- const stats = ctx.state.webpackStats.toJson();
- const assetsByChunkName = stats.assetsByChunkName;
- stats.errors.forEach(err => console.error(err));
- stats.warnings.forEach(err => console.warn(err));
- if (stats.errors.length) {
- console.error(stats.errors);
- return;
- }
- // 生成的clientManifest放到appSSR模塊，應(yīng)用程序可以直接讀取
- let fileSystem = koaDevMiddleware.devMiddleware.fileSystem;
- clientManifest = JSON.parse(fileSystem.readFileSync(path.resolve(cwd,'./dist/vue-ssr-client-manifest.json'), 'utf-8'));
- appSSR.clientManifest = clientManifest;
- await next();
- });
- // 服務(wù)端渲染的server bundle 存儲(chǔ)到內(nèi)存里
- const mfs = new MFS();
- serverCompiler.outputFileSystem = mfs;
- serverCompiler.watch({}, (err, stats) => {
- if (err) {
- throw err;
- }
- statsstats = stats.toJson();
- if (stats.errors.length) {
- console.error(stats.errors);
- return;
- }
- // 生成的bundle放到appSSR模塊，應(yīng)用程序可以直接讀取
- bundle = JSON.parse(mfs.readFileSync(path.resolve(cwd,'./dist/vue-ssr-server-bundle.json'), 'utf-8'));
- appSSR.bundle = bundle;
- });
- }
渲染中間件配置
產(chǎn)品環(huán)境下，打包后的客戶(hù)端和服務(wù)端的Bundle會(huì)存儲(chǔ)為vue-ssr-client-manifest.json與vue-ssr-server-bundle.json，通過(guò)文件流模塊fs讀取即可，但在開(kāi)發(fā)環(huán)境下，我創(chuàng)建了一個(gè)appSSR模塊，在發(fā)生代碼更改時(shí)，會(huì)觸發(fā)Webpack熱更新，appSSR對(duì)應(yīng)的bundle也會(huì)更新，appSSR模塊代碼如下所示：
- let clientManifest;
- let bundle;
- const appSSR = {
- get bundle() {
- return bundle;
- },
- set bundle(val) {
- bundle = val;
- },
- get clientManifest() {
- return clientManifest;
- },
- set clientManifest(val) {
- clientManifest = val;
- }
- };
- module.exports = appSSR;
通過(guò)引入appSSR模塊，在開(kāi)發(fā)環(huán)境下，就可以拿到clientManifest和ssrBundle，項(xiàng)目的渲染中間件如下：
- const fs = require('fs');
- const path = require('path');
- const ejs = require('ejs');
- const vue = require('vue');
- const vssr = require('vue-server-renderer');
- const createBundleRenderer = vssr.createBundleRenderer;
- const dirname = process.cwd();
- const env = process.env.RUN_ENVIRONMENT;
- let bundle;
- let clientManifest;
- if (env === 'development') {
- // 開(kāi)發(fā)環(huán)境下，通過(guò)appSSR模塊，拿到clientManifest和ssrBundle
- let appSSR = require('./../../core/app.ssr.js');
- bundle = appSSR.bundle;
- clientManifest = appSSR.clientManifest;
- } else {
- bundle = JSON.parse(fs.readFileSync(path.resolve(__dirname, './dist/vue-ssr-server-bundle.json'), 'utf-8'));
- clientManifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, './dist/vue-ssr-client-manifest.json'), 'utf-8'));
- }
- module.exports = async function(ctx) {
- ctx.status = 200;
- let html;
- let context = await ctx.getTplContext();
- ctx.logger('進(jìn)入SSR，context為： ', JSON.stringify(context));
- const tpl = fs.readFileSync(path.resolve(__dirname, './newTemplate.html'), 'utf-8');
- const renderer = createBundleRenderer(bundle, {
- runInNewContext: false,
- template: tpl, // （可選）頁(yè)面模板
- clientManifest: clientManifest // （可選）客戶(hù)端構(gòu)建 manifest
- });
- ctx.logger('createBundleRenderer renderer：', JSON.stringify(renderer));
- try {
- html = await renderer.renderToString({
- ...context,
- url: context.CTX.url,
- });
- } catch(err) {
- ctx.logger('SSR renderToString 失敗： ', JSON.stringify(err));
- console.error(err);
- }
- ctx.body = html;
- };
如何對(duì)現(xiàn)有項(xiàng)目進(jìn)行改造？
基本目錄改造
使用Webpack來(lái)處理服務(wù)器和客戶(hù)端的應(yīng)用程序，大部分源碼可以使用通用方式編寫(xiě)，可以使用Webpack支持的所有功能。
一個(gè)基本項(xiàng)目可能像是這樣：
- src
- ├── components
- │ ├── Foo.vue
- │ ├── Bar.vue
- │ └── Baz.vue
- ├── frame
- │ ├── app.js # 通用 entry(universal entry)
- │ ├── entry-client.js # 僅運(yùn)行于瀏覽器
- │ ├── entry-server.js # 僅運(yùn)行于服務(wù)器
- │ └── index.vue # 項(xiàng)目入口組件
- ├── pages
- ├── routers
- └── store
app.js是我們應(yīng)用程序的「通用entry」。在純客戶(hù)端應(yīng)用程序中，我們將在此文件中創(chuàng)建根Vue實(shí)例，并直接掛載到DOM。但是，對(duì)于服務(wù)器端渲染(SSR)，責(zé)任轉(zhuǎn)移到純客戶(hù)端entry文件。app.js簡(jiǎn)單地使用export導(dǎo)出一個(gè)createApp函數(shù)：
- import Router from '~ut/router';
- import { sync } from 'vuex-router-sync';
- import Vue from 'vue';
- import { createStore } from './../store';
- import Frame from './index.vue';
- import myRouter from './../routers/myRouter';
- function createVueInstance(routes, ctx) {
- const router = Router({
- base: '/base',
- mode: 'history',
- routes: [routes],
- });
- const store = createStore({ ctx });
- // 把路由注入到vuex中
- sync(store, router);
- const app = new Vue({
- router,
- render: function(h) {
- return h(Frame);
- },
- store,
- });
- return { app, router, store };
- }
- module.exports = function createApp(ctx) {
- return createVueInstance(myRouter, ctx);
- }
注：在我所在的項(xiàng)目中，需要?jiǎng)討B(tài)判斷是否需要注冊(cè)DicomView，只有在客戶(hù)端才初始化DicomView，由于Node.js環(huán)境沒(méi)有window對(duì)象，對(duì)于代碼運(yùn)行環(huán)境的判斷，可以通過(guò)typeof window === 'undefined'來(lái)進(jìn)行判斷。
避免創(chuàng)建單例
如Vue SSR文檔所述：
當(dāng)編寫(xiě)純客戶(hù)端 (client-only) 代碼時(shí)，我們習(xí)慣于每次在新的上下文中對(duì)代碼進(jìn)行取值。但是，Node.js 服務(wù)器是一個(gè)長(zhǎng)期運(yùn)行的進(jìn)程。當(dāng)我們的代碼進(jìn)入該進(jìn)程時(shí)，它將進(jìn)行一次取值并留存在內(nèi)存中。這意味著如果創(chuàng)建一個(gè)單例對(duì)象，它將在每個(gè)傳入的請(qǐng)求之間共享。如基本示例所示，我們?yōu)槊總€(gè)請(qǐng)求創(chuàng)建一個(gè)新的根 Vue 實(shí)例。這與每個(gè)用戶(hù)在自己的瀏覽器中使用新應(yīng)用程序的實(shí)例類(lèi)似。如果我們?cè)诙鄠€(gè)請(qǐng)求之間使用一個(gè)共享的實(shí)例，很容易導(dǎo)致交叉請(qǐng)求狀態(tài)污染 (cross-request state pollution)。因此，我們不應(yīng)該直接創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗菓?yīng)該暴露一個(gè)可以重復(fù)執(zhí)行的工廠(chǎng)函數(shù)，為每個(gè)請(qǐng)求創(chuàng)建新的應(yīng)用程序?qū)嵗?。同樣的?guī)則也適用于 router、store 和 event bus 實(shí)例。你不應(yīng)該直接從模塊導(dǎo)出并將其導(dǎo)入到應(yīng)用程序中，而是需要在 createApp 中創(chuàng)建一個(gè)新的實(shí)例，并從根 Vue 實(shí)例注入。
如上代碼所述，createApp方法通過(guò)返回一個(gè)返回值創(chuàng)建Vue實(shí)例的對(duì)象的函數(shù)調(diào)用，在函數(shù)createVueInstance中，為每一個(gè)請(qǐng)求創(chuàng)建了Vue，Vue Router，Vuex實(shí)例。并暴露給entry-client和entry-server模塊。
在客戶(hù)端entry-client.js只需創(chuàng)建應(yīng)用程序，并且將其掛載到DOM中：
- import { createApp } from './app';
- // 客戶(hù)端特定引導(dǎo)邏輯……
- const { app } = createApp();
- // 這里假定 App.vue 模板中根元素具有 `id="app"`
- app.$mount('#app');
服務(wù)端entry-server.js使用default export 導(dǎo)出函數(shù)，并在每次渲染中重復(fù)調(diào)用此函數(shù)。此時(shí)，除了創(chuàng)建和返回應(yīng)用程序?qū)嵗?，它不?huì)做太多事情 - 但是稍后我們將在此執(zhí)行服務(wù)器端路由匹配和數(shù)據(jù)預(yù)取邏輯:
- import { createApp } from './app';
- export default context => {
- const { app } = createApp();
- return app;
- }
在服務(wù)端用vue-router分割代碼
與Vue實(shí)例一樣，也需要?jiǎng)?chuàng)建單例的vueRouter對(duì)象。對(duì)于每個(gè)請(qǐng)求，都需要?jiǎng)?chuàng)建一個(gè)新的vueRouter實(shí)例：
- function createVueInstance(routes, ctx) {
- const router = Router({
- base: '/base',
- mode: 'history',
- routes: [routes],
- });
- const store = createStore({ ctx });
- // 把路由注入到vuex中
- sync(store, router);
- const app = new Vue({
- router,
- render: function(h) {
- return h(Frame);
- },
- store,
- });
- return { app, router, store };
- }
同時(shí)，需要在entry-server.js中實(shí)現(xiàn)服務(wù)器端路由邏輯，使用router.getMatchedComponents方法獲取到當(dāng)前路由匹配的組件，如果當(dāng)前路由沒(méi)有匹配到相應(yīng)的組件，則reject到404頁(yè)面，否則resolve整個(gè)app，用于Vue渲染虛擬DOM，并使用對(duì)應(yīng)模板生成對(duì)應(yīng)的HTML字符串。
- const createApp = require('./app');
- module.exports = context => {
- return new Promise((resolve, reject) => {
- // ...
- // 設(shè)置服務(wù)器端 router 的位置
- router.push(context.url);
- // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
- router.onReady(() => {
- const matchedComponents = router.getMatchedComponents();
- // 匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404
- if (!matchedComponents.length) {
- return reject('匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404');
- }
- // Promise 應(yīng)該 resolve 應(yīng)用程序?qū)嵗?，以便它可以渲?nbsp;
- resolve(app);
- }, reject);
- });
- }
在服務(wù)端預(yù)拉取數(shù)據(jù)
在Vue服務(wù)端渲染，本質(zhì)上是在渲染我們應(yīng)用程序的"快照"，所以如果應(yīng)用程序依賴(lài)于一些異步數(shù)據(jù)，那么在開(kāi)始渲染過(guò)程之前，需要先預(yù)取和解析好這些數(shù)據(jù)。服務(wù)端Web Server Frame作為代理服務(wù)器，在服務(wù)端對(duì)接口服務(wù)發(fā)起請(qǐng)求，并將數(shù)據(jù)拼裝到全局Vuex狀態(tài)中。
另一個(gè)需要關(guān)注的問(wèn)題是在客戶(hù)端，在掛載到客戶(hù)端應(yīng)用程序之前，需要獲取到與服務(wù)器端應(yīng)用程序完全相同的數(shù)據(jù) - 否則，客戶(hù)端應(yīng)用程序會(huì)因?yàn)槭褂门c服務(wù)器端應(yīng)用程序不同的狀態(tài)，然后導(dǎo)致混合失敗。
目前較好的解決方案是，給路由匹配的一級(jí)子組件一個(gè)asyncData，在asyncData方法中，dispatch對(duì)應(yīng)的action。asyncData是我們約定的函數(shù)名，表示渲染組件需要預(yù)先執(zhí)行它獲取初始數(shù)據(jù)，它返回一個(gè)Promise，以便我們?cè)诤蠖虽秩镜臅r(shí)候可以知道什么時(shí)候該操作完成。注意，由于此函數(shù)會(huì)在組件實(shí)例化之前調(diào)用，所以它無(wú)法訪(fǎng)問(wèn)this。需要將store和路由信息作為參數(shù)傳遞進(jìn)去：
舉個(gè)例子：
- <!-- Lung.vue -->
- <template>
- <div></div>
- </template>
- <script>
- export default {
- // ...
- async asyncData({ store, route }) {
- return Promise.all([
- store.dispatch('getA'),
- store.dispatch('myModule/getB', { root:true }),
- store.dispatch('myModule/getC', { root:true }),
- store.dispatch('myModule/getD', { root:true }),
- ]);
- },
- // ...
- }
- </script>
在entry-server.js中，我們可以通過(guò)路由獲得與router.getMatchedComponents()相匹配的組件，如果組件暴露出asyncData，我們就調(diào)用這個(gè)方法。然后我們需要將解析完成的狀態(tài)，附加到渲染上下文中。
- const createApp = require('./app');
- module.exports = context => {
- return new Promise((resolve, reject) => {
- const { app, router, store } = createApp(context);
- // 針對(duì)沒(méi)有Vue router 的Vue實(shí)例，在項(xiàng)目中為列表頁(yè)，直接resolve app
- if (!router) {
- resolve(app);
- }
- // 設(shè)置服務(wù)器端 router 的位置
- router.push(context.url.replace('/base', ''));
- // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
- router.onReady(() => {
- const matchedComponents = router.getMatchedComponents();
- // 匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404
- if (!matchedComponents.length) {
- return reject('匹配不到的路由，執(zhí)行 reject 函數(shù)，并返回 404');
- }
- Promise.all(matchedComponents.map(Component => {
- if (Component.asyncData) {
- return Component.asyncData({
- store,
- route: router.currentRoute,
- });
- }
- })).then(() => {
- // 在所有預(yù)取鉤子(preFetch hook) resolve 后，
- // 我們的 store 現(xiàn)在已經(jīng)填充入渲染應(yīng)用程序所需的狀態(tài)。
- // 當(dāng)我們將狀態(tài)附加到上下文，并且 `template` 選項(xiàng)用于 renderer 時(shí)，
- // 狀態(tài)將自動(dòng)序列化為 `window.__INITIAL_STATE__`，并注入 HTML。
- context.state = store.state;
- resolve(app);
- }).catch(reject);
- }, reject);
- });
- }
客戶(hù)端托管全局狀態(tài)
當(dāng)服務(wù)端使用模板進(jìn)行渲染時(shí)，context.state將作為window.__INITIAL_STATE__狀態(tài)，自動(dòng)嵌入到最終的HTML 中。而在客戶(hù)端，在掛載到應(yīng)用程序之前，store就應(yīng)該獲取到狀態(tài)，最終我們的entry-client.js被改造為如下所示：
- import createApp from './app';
- const { app, router, store } = createApp();
- // 客戶(hù)端把初始化的store替換為window.__INITIAL_STATE__
- if (window.__INITIAL_STATE__) {
- store.replaceState(window.__INITIAL_STATE__);
- }
- if (router) {
- router.onReady(() => {
- app.$mount('#app')
- });
- } else {
- app.$mount('#app');
- }
常見(jiàn)問(wèn)題的解決方案
至此，基本的代碼改造也已經(jīng)完成了，下面說(shuō)的是一些常見(jiàn)問(wèn)題的解決方案：
- 在服務(wù)端沒(méi)有window、location對(duì)象：
對(duì)于舊項(xiàng)目遷移到SSR肯定會(huì)經(jīng)歷的問(wèn)題，一般為在項(xiàng)目入口處或是created、beforeCreate生命周期使用了DOM操作，或是獲取了location對(duì)象，通用的解決方案一般為判斷執(zhí)行環(huán)境，通過(guò)typeof window是否為'undefined'，如果遇到必須使用location對(duì)象的地方用于獲取url中的相關(guān)參數(shù)，在ctx對(duì)象中也可以找到對(duì)應(yīng)參數(shù)。
- vue-router報(bào)錯(cuò)Uncaught TypeError: _Vue.extend is not _Vue function，沒(méi)有找到_Vue實(shí)例的問(wèn)題：
通過(guò)查看Vue-router源碼發(fā)現(xiàn)沒(méi)有手動(dòng)調(diào)用Vue.use(Vue-Router);。沒(méi)有調(diào)用Vue.use(Vue-Router);在瀏覽器端沒(méi)有出現(xiàn)問(wèn)題，但在服務(wù)端就會(huì)出現(xiàn)問(wèn)題。對(duì)應(yīng)的Vue-router源碼所示：
- VueRouter.prototype.init = function init (app /* Vue component instance */) {
- var this$1 = this;
- process.env.NODE_ENV !== 'production' && assert(
- install.installed,
- "not installed. Make sure to call `Vue.use(VueRouter)` " +
- "before creating root instance."
- );
- // ...
- }
- 服務(wù)端無(wú)法獲取hash路由的參數(shù)
由于hash路由的參數(shù)，會(huì)導(dǎo)致vue-router不起效果，對(duì)于使用了vue-router的前后端同構(gòu)應(yīng)用，必須換為history路由。
- 接口處獲取不到cookie的問(wèn)題：
由于客戶(hù)端每次請(qǐng)求都會(huì)對(duì)應(yīng)地把cookie帶給接口側(cè)，而服務(wù)端Web Server Frame作為代理服務(wù)器，并不會(huì)每次維持cookie，所以需要我們手動(dòng)把
cookie透?jìng)鹘o接口側(cè)，常用的解決方案是，將ctx掛載到全局狀態(tài)中，當(dāng)發(fā)起異步請(qǐng)求時(shí)，手動(dòng)帶上cookie，如下代碼所示：
- // createStore.js
- // 在創(chuàng)建全局狀態(tài)的函數(shù)`createStore`時(shí)，將`ctx`掛載到全局狀態(tài)
- export function createStore({ ctx }) {
- return new Vuex.Store({
- state: {
- ...state,
- ctx,
- },
- getters,
- actions,
- mutations,
- modules: {
- // ...
- },
- plugins: debug ? [createLogger()] : [],
- });
- }
當(dāng)發(fā)起異步請(qǐng)求時(shí)，手動(dòng)帶上cookie，項(xiàng)目中使用的是Axios：
- // actions.js
- // ...
- const actions = {
- async getUserInfo({ commit, state }) {
- let requestParams = {
- params: {
- random: tool.createRandomString(8, true),
- },
- headers: {
- 'X-Requested-With': 'XMLHttpRequest',
- },
- };
- // 手動(dòng)帶上cookie
- if (state.ctx.request.headers.cookie) {
- requestParams.headers.Cookie = state.ctx.request.headers.cookie;
- }
- // ...
- let res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams);
- commit(globalTypes.SET_A, {
- res: res.data,
- });
- }
- };
- // ...
- 接口請(qǐng)求時(shí)報(bào)connect ECONNREFUSED 127.0.0.1:80的問(wèn)題
原因是改造之前，使用客戶(hù)端渲染時(shí)，使用了devServer.proxy代理配置來(lái)解決跨域問(wèn)題，而服務(wù)端作為代理服務(wù)器對(duì)接口發(fā)起異步請(qǐng)求時(shí)，不會(huì)讀取對(duì)應(yīng)的webpack配置，對(duì)于服務(wù)端而言會(huì)對(duì)應(yīng)請(qǐng)求當(dāng)前域下的對(duì)應(yīng)path下的接口。
解決方案為去除webpack的devServer.proxy配置，對(duì)于接口請(qǐng)求帶上對(duì)應(yīng)的origin即可：
- const requestUrlOriginrequestUrlOrigin = requestUrlOrigin = state.ctx.URL.origin;
- const res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams);
- 對(duì)于vue-router配置項(xiàng)有base參數(shù)時(shí)，初始化時(shí)匹配不到對(duì)應(yīng)路由的問(wèn)題
在官方示例中的entry-server.js：
- // entry-server.js
- import { createApp } from './app';
- export default context => {
- // 因?yàn)橛锌赡軙?huì)是異步路由鉤子函數(shù)或組件，所以我們將返回一個(gè) Promise，
- // 以便服務(wù)器能夠等待所有的內(nèi)容在渲染前，
- // 就已經(jīng)準(zhǔn)備就緒。
- return new Promise((resolve, reject) => {
- const { app, router } = createApp();
- // 設(shè)置服務(wù)器端 router 的位置
- router.push(context.url);
- // ...
- });
- }
原因是設(shè)置服務(wù)器端router的位置時(shí)，context.url為訪(fǎng)問(wèn)頁(yè)面的url，并帶上了base，在router.push時(shí)應(yīng)該去除base，如下所示：
- router.push(context.url.replace('/base', ''));
小結(jié)
本文為筆者通過(guò)對(duì)現(xiàn)有項(xiàng)目進(jìn)行改造，給現(xiàn)有項(xiàng)目加上Vue服務(wù)端渲染的實(shí)踐過(guò)程的總結(jié)。
首先闡述了什么是Vue服務(wù)端渲染，其目的、本質(zhì)及原理，通過(guò)在服務(wù)端使用Vue的虛擬DOM，形成初始化的HTML字符串，即應(yīng)用程序的“快照”。帶來(lái)極大的性能優(yōu)勢(shì)，包括SEO優(yōu)勢(shì)和首屏渲染的極速體驗(yàn)。之后闡述了Vue服務(wù)端渲染的基本用法，即兩個(gè)入口、兩個(gè)webpack配置，分別作用于客戶(hù)端和服務(wù)端，分別生成vue-ssr-client-manifest.json與vue-ssr-server-bundle.json作為打包結(jié)果。最后通過(guò)對(duì)現(xiàn)有項(xiàng)目的改造過(guò)程，包括對(duì)路由進(jìn)行改造、數(shù)據(jù)預(yù)獲取和狀態(tài)初始化，并解釋了在Vue服務(wù)端渲染項(xiàng)目改造過(guò)程中的常見(jiàn)問(wèn)題，幫助我們進(jìn)行現(xiàn)有項(xiàng)目往Vue服務(wù)端渲染的遷移。
