作者：京东零售 姜欣

关于服务器端渲染方案，之前只接触了基于react的Next.js，最近业务开发vue用的比较多，所以调研了一下vue的服务器端渲染方案。 首先：长文预警，下文包括了两种方案的实践，没有耐心的小伙伴可以直接跳到方案标题下，down代码体验一下。

简单来说就是用户第一次请求页面时，页面上的内容是通过服务器端渲染生成的，浏览器直接显示服务端返回的完整html就可以，加快首屏显示速度。

举个栗子：

当我们访问一个商品列表时，如果使用客户端渲染（csr），浏览器会加载空白的页面，然后下载js文件，通过js在客户端请求数据并渲染页面。如果使用服务器端渲染（ssr），在请求商品列表页面时，服务器会获取所需数据并将渲染后的HTML发送给浏览器，浏览器一步到位直接展示，而不用等待数据加载和渲染，提高用户的首屏体验。

优点：

（1）更好的seo：抓取工具可以直接查看完全渲染的页面。现在比较常用的交互是页面初始展示 loading 菊花图，然后通过异步请求获取内容，但是但抓取工具并不会等待异步完成后再行抓取页面内容。

（2）内容到达更快：不用等待所有的 js 都完成下载并执行，所以用户会更快速地看到完整渲染的页面。

缺点：

（1）服务器渲染应用程序，需要处于 Node.js server 运行环境

（2）开发成本比较高

总结：

总得来说，决定是否使用服务器端渲染，取决于具体的业务场景和需求。对于具有大量静态内容的简单页面，客户端渲染更合适一些，因为它可以更快地加载页面。但是对于需要从服务器动态加载数据的复杂页面，服务器端渲染可能是一个更好的选择，因为他可以提高用户的首屏体验和搜索引擎优化。

下面进入正文

​​git 示例demo地址​​

结论前置：不建议用，配置成本高

官网地址：

首先要吐槽一下官网，按官网教程比较难搞，目录安排的不太合理，一顿操作项目都没起来...

并且官网示例的构建配置代码是webpack4的，现在初始化项目后基本安装的都是webpack5，有一些语法不同

app.js

// 导出一个工厂函数，用于创建新的// 应用程序、router 和 store 实例export function createApp () { // 创建 router 和 store 实例 const router = createRouter() const store = createStore()

sync(store, router)

const app = new Vue({ router, store, render: h => h(App) })

return { app, router, store }}

entry-client.js

Vue.mixin({ beforeMount () { const { asyncData } = this.$options if (asyncData) { this.dataPromise = asyncData({ store: this.$store, route: this.$route }) } }})

const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__)}

router.onReady(() => { // 在初始路由 resolve 后执行， // 使用 `router.beforeResolve()`，以便确保所有异步组件都 resolve。 router.beforeResolve((to, from, next) => { const matched = router.getMatchedComponents(to) const prevMatched = router.getMatchedComponents(from)

// 找出两个匹配列表的差异组件 let diffed = false const activated = matched.filter((c, i) => { return diffed || (diffed = (prevMatched[i] !== c)) })

if (!activated.length) { return next() }

Promise.all(activated.map(c => { if (c.asyncData) { return c.asyncData({ store, route: to }) } })).then(() => { next() }).catch(next) })

app.$mount('#app')})

entry-server.js

export default context => { // 返回一个promise，服务器能够等待所有的内容在渲染前，已经准备就绪， return new Promise((resolve, reject) => { const { app, router, store } = createApp()

router.push(context.url)

router.onReady(() => { const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) { return reject({ code: 404 }) }

// 对所有匹配的路由组件调用 `asyncData()` Promise.all(matchedComponents.map(Component => { if (Component.asyncData) { return Component.asyncData({ store, route: router.currentRoute }) } })).then(() => { context.state = store.state

resolve(app) }).catch(reject) }, reject) })}

其中一个非常重要的api：createBundleRenderer，这个api上面有一个方法renderToString将代码转化成html字符串，主要功能就是把用webpack把打包后的服务端代码渲染出来。具体了解可看官网bundle renderer指引（传送门： ​​bundle renderer指引​​ ）

const isProd = process.env.NODE_ENE === "production"

const createRenderer = (bundle, options) => { return createBundleRenderer(bundle, Object.assign(options, { basedir: resolve('./dist'), runInNewContext: false, }))}

let renderer, readyPromiseconst templatePath = resolve('./src/index.template.html')if (isProd) { const bundle = require('./dist/vue-ssr-server-bundle.json') const clientManifest = require('./dist/vue-ssr-client-manifest.json') const template = fs.readFileSync(templatePath, 'utf-8')

renderer = createRenderer(bundle, { // 推荐 template, // （可选）页面模板 clientManifest // （可选）客户端构建 manifest })} else { // 开发模式 readyPromise = require('./config/setup-dev-server')(app, templatePath, (bundle, options) => { renderer = createRenderer(bundle, options) })}

const render = (req, res) => { const context = { title: 'hello ssr with webpack', meta: ` `, url: req.url } renderer.renderToString(context, (err, html) => { if (err) { if (err.code === 404) { res.status(404).end('Page not found') } else { res.status(500).end('Internal Server Error') } } else { res.end(html) } })}

// 在服务器处理函数中……app.get('*', isProd ? render : (req, res) => { readyPromise.then(() => render(req, res))})

app.listen(8080) // 监听的是8080端口

在根目录新增config文件夹，然后新增四个配置文件：webpack.base.config，webpack.client.config，webpack.server.config，setup-dev-server（此方法是一个封装，为了配置个热加载，差点没搞明白，参考了好多）（官网传送门： ​​构建配置​​ ）

大部分官网有示例代码，但是要在基础上进行一些更改

webpack.base.config

// 打包时会先清除一下// const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const isProd = process.env.NODE_ENV === "production"

module.exports = { mode: isProd ? 'production' : 'development', output: { path: resolve('dist'), publicPath: '/dist/', filename: '[name].[chunk-hash].js' }, resolve: { alias: { 'public': resolve('public') } }, module: { noParse: /es6-promise.js$/, rules: [ { test: /.vue$/, loader: 'vue-loader', options: { compilerOptions: { preserveWhiteSpace: false } } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]?[hash]' } }, { test: /.s(a|c)ss?$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'] } ] }, performance: { hints: false }, plugins:[ new VueLoaderPlugin(), // 编译后的友好提示，比如编译完成或者编译有错误 new FriendlyErrorsWebpackPlugin(), // 打包时会先清除一下 // new CleanWebpackPlugin() ]}

webpack.client.config

module.exports = merge(baseConfig, { entry: { app: './src/entry-client.js' }, optimization: { // 重要信息：这将 webpack 运行时分离到一个引导 chunk 中， // 以便可以在之后正确注入异步 chunk。 // 这也为你的 应用程序/vendor 代码提供了更好的缓存。 splitChunks: { name: "manifest", minChunks: Infinity } }, plugins: [ // 此插件在输出目录中 // 生成 `vue-ssr-client-manifest.json`。 new VueSSRClientPlugin() ]})

webpack.server.config

// webpack的基础配置，比如sass，less预编译等const baseConfig = require('./webpack.base.config.js')const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, { // 将 entry 指向应用程序的 server entry 文件 entry: './src/entry-server.js',

target: 'node',

// 对 bundle renderer 提供 source map 支持 devtool: 'source-map',

// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports) output: { libraryTarget: 'commonjs2' },

// https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // 外置化应用程序依赖模块。可以使服务器构建速度更快， // 并生成较小的 bundle 文件。 externals: nodeExternals({ // 不要外置化 webpack 需要处理的依赖模块。 // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件， // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单 allowlist: /.css$/ }),

// 这是将服务器的整个输出 // 构建为单个 JSON 文件的插件。 // 默认文件名为 `vue-ssr-server-bundle.json` plugins: [ new VueSSRServerPlugin() ]})

setup-dev-server：封装createRenderer方法

const clientConfig = require('./webpack.client.config')const serverConfig = require('./webpack.server.config')

const readFile = (fs, file) => { try { return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf8') } catch (error) {

}}

const setupServer = (app, templatePath, cb) => { let bundle let clientManifest let template let ready const readyPromise = new Promise(r => ready = r)

template = fs.readFileSync(templatePath, 'utf8') const update = () => { if (bundle && clientManifest) { // 通知 server 进行渲染 // 执行 createRenderer -> RenderToString ready() cb(bundle, { template, clientManifest }) } } // webpack -> entry-server -> bundle const mfs = new MFS(); const serverCompiler = webpack(serverConfig);

serverCompiler.outputFileSystem = mfs; serverCompiler.watch({}, (err, stats) => { if (err) throw err // 之后读取输出： stats = stats.toJson() stats.errors.forEach(err => console.error(err)) stats.warnings.forEach(err => console.warn(err)) if (stats.errors.length) return bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json')) update() });

clientConfig.plugins.push( new webpack.HotModuleReplacementPlugin() ) clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app] clientConfig.output.filename = '[name].js'

const clientCompiler = webpack(clientConfig);

const devMiddleware = middleware(clientCompiler, { noInfo: true, publicPath: clientConfig.output.publicPath, logLevel: 'silent' }) app.use(devMiddleware);

app.use(HMR(clientCompiler));

clientCompiler.hooks.done.tap('clientsBuild', stats => { stats = stats.toJson() stats.errors.forEach(err => console.error(err)) stats.warnings.forEach(err => console.warn(err)) if (stats.errors.length) return clientManifest = JSON.parse(readFile( devMiddleware.fileSystem, 'vue-ssr-client-manifest.json' )) update() })

// fs -> templatePath -> template chokidar.watch(templatePath).on('change', () => { template = fs.readFileSync(templatePath, 'utf8') console.log('template is updated'); update() })

return readyPromise}

module.exports = setupServer

在src目录下，新增index.template.html文件，将官网中的例子（地址：​​使用一个页面模板 ​​）复制，并进行一些更改

{{{ meta }}}

这里介绍一下一个很重要的东西asyncData 预取数据，预取数据是在vue挂载前，所以下文这里用了上下文来获取store而不是this

在src下创建api文件夹，并在下面创建data.js文件

export { getData}

在src下创建store文件夹，并在下面创建index.js文件

Vue.use(Vuex)

import { getData } from '../api/data'

export function createStore () { return new Vuex.Store({ state: { lists: [] }, actions: { getDataAction ({ commit }) { return getData().then((res) => { commit('setData', res) }) } }, mutations: { setData (state, data) { state.lists = data } } })}

Hello.vue

{{item}}

export default { asyncData: ({ store }) => { return store.dispatch('getDataAction') }, computed: { item () { return this.$store.state.lists } }}

Hello1.vue

export default { asyncData: ({ store }) => { return store.dispatch('getDataAction') }, computed: { item () { return this.$store.state.lists } }}

router.js

Vue.use(Router)

export function createRouter () { return new Router({ mode: 'history', routes: [ { path: '/hello', component: () => import('./components/Hello.vue') }, { path: '/hello1', component: () => import('./components/Hello1.vue') }, ] })}

app.vue

export default { name: 'App',}

大搞告成，执行一下dev命令，可以通过访问localhost:8080端口看到页面，记得带上路由哦～

执行build命令可看到，最后dist文件下共有三个文件：main.[chunk-hash].js，vue-ssr-client-manifest.json，vue-ssr-server-bundle.json

附上文件整体目录结构

​​git 示例demo地址​​

一对比，这个就显得丝滑多了～ 官网地址： ​​nuxt.js​​

先对比一下两种方案的差别

显而易见这个上手就快多了，也不需要安装一大堆依赖，如果用了sass需要安装sass和sass-loader，反正我是用了

nuxt是通过pages页面形成动态的路由，不用手动配置路由。比如在pages下面新增了个文件about.vue，那么这个页面对应的路由就是/about

其实这个时候运行npm run dev 就可以看到简单的页面了

这里介绍一个插件，可以快速创建一个服务

安装完后，在根目录新增db.json文件，模拟几个接口

运行命令json-server --watch db.json --port=8000(不加会端口冲突)，就可以看到

因为是get请求，可以直接点击访问可以看到mock的数据已经返回了

先配置一下axios，推荐使用nuxt.js封装的axios：​​"@nuxtjs/axios": "^5.13.6"​​，然后再在nuxt.config.js文件中modules下面配置一下就可以使用了

随便找个接口调用一下

export default { name: 'IndexPage', async asyncData({$axios}){ const result = await $axios.get('http://localhost:8000/post') return{ posts: result.data } }}

刷新下页面就可以看到效果了，这里注意

axios.get还会返回头部等信息，另一个

get只返回结果

从页面篇幅上应该也能看到哪个容易上手了，nuxt相对于插件来说限定了文件夹的结构，并通过此预定了一些功能，更好上手。预设了利用vue.js开发服务端渲染所需要的各种配置，并且提供了提供了静态站点，异步数据加载，中间件支持，布局支持等