简单的Vue SSR的示例代码


Posted in Javascript onJanuary 12, 2018

前言

最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备。如果对 Vue SSR 完全不了解,请先阅读官方文档。

思路

Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙。因此,今天我们来写一个更加容易上手的 Demo。总共分三步走,循序渐进。

  1. 写一个简单的前端渲染 Demo(不包含 Ajax 数据);
  2. 将前端渲染改成后端渲染(仍然不包含 Ajax 数据);
  3. 在后端渲染的基础上,加上 Ajax 数据的处理;

第一步:前端渲染 Demo

这部分比较简单,就是一个页面中包含两个组件:Foo 和 Bar。

<!-- index.html -->
<body>
<div id="app">
 <app></app>
</div>
<script src="./dist/web.js"></script> <!--这是 app.js 打包出来的 JS 文件 -->
</body>
// app.js,也是 webpack 打包入口
import Vue from 'vue';
import App from './App.vue';
var app = new Vue({
 el: '#app',
 components: {
 App
 }
});
// App.vue
<template>
 <div>
 <foo></foo>
 <bar></bar>
 </div>
</template>
<script>
 import Foo from './components/Foo.vue';
 import Bar from './components/Bar.vue';
 export default {
 components:{
  Foo,
  Bar
 }
 }
</script>
// Foo.vue
<template>
 <div class='foo'>
 <h1>Foo</h1>
 <p>Component </p>
 </div>
</template>
<style>
 .foo{
 background: yellow;
 }
</style>
// Bar.vue
<template>
 <div class='bar'>
 <h1>Bar</h1>
 <p>Component </p>
 </div>
</template>
<style>
 .bar{
 background: blue;
 }
</style>

最终渲染结果如下图所示,源码请参考这里。

简单的Vue SSR的示例代码

第二步:后端渲染(不包含 Ajax 数据)

第一步的 Demo 虽不包含任何 Ajax 数据,但即便如此,要把它改造成后端渲染,亦非易事。该从哪几个方面着手呢?

  1. 拆分 JS 入口;
  2. 拆分 Webpack 打包配置;
  3. 编写服务端渲染主体逻辑。

1. 拆分 JS 入口

在前端渲染的时候,只需要一个入口 app.js。现在要做后端渲染,就得有两个 JS 文件:entry-client.js 和 entry-server.js 分别作为浏览器和服务器的入口。

先看 entry-client.js,它跟第一步的 app.js 有什么区别吗? → 没有区别,只是换了个名字而已,内容都一样。

再看 entry-server.js,它只需返回 App.vue 的实例。

// entry-server.js
export default function createApp() {
 const app = new Vue({
 render: h => h(App)
 });
 return app; 
};

entry-server.js 与 entry-client.js 这两个入口主要区别如下:

  1. entry-client.js 在浏览器端执行,所以需要指定 el 并且显式调用 $mount 方法,以启动浏览器的渲染。
  2. entry-server.js 在服务端被调用,因此需要导出为一个函数。

2. 拆分 Webpack 打包配置

在第一步中,由于只有 app.js 一个入口,只需要一份 Webpack 配置文件。现在有两个入口了,自然就需要两份 Webpack 配置文件:webpack.server.conf.js 和 webpack.client.conf.js,它们的公共部分抽象成 webpack.base.conf.js。

关于 webpack.server.conf.js,有两个注意点:

  1. libraryTarget: 'commonjs2' → 因为服务器是 Node,所以必须按照 commonjs 规范打包才能被服务器调用。
  2. target: 'node' → 指定 Node 环境,避免非 Node 环境特定 API 报错,如 document 等。

3. 编写服务端渲染主体逻辑

Vue SSR 依赖于包 vue-server-render,它的调用支持两种入口格式:createRenderer 和 createBundleRenderer,前者以 Vue 组件为入口,后者以打包后的 JS 文件为入口,本文采取后者。

// server.js 服务端渲染主体逻辑
// dist/server.js 就是以 entry-server.js 为入口打包出来的 JS 
const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8'); 
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {
 template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8')
});

server.get('/index', (req, res) => {
 renderer.renderToString((err, html) => {
 if (err) {
  console.error(err);
  res.status(500).end('服务器内部错误');
  return;
 }
 res.end(html);
 })
});

server.listen(8002, () => {
 console.log('后端渲染服务器启动,端口号为:8002');
});

这一步的最终渲染效果如下图所示,从图中我们可以看到,组件已经被后端成功渲染了。源码请参考这里。

简单的Vue SSR的示例代码

第三步:后端渲染(预获取 Ajax 数据)

这是关键的一步,也是最难的一步。

假如第二步的组件各自都需要请求 Ajax 数据的话,该怎么处理呢?官方文档给我们指出了思路,我简要概括如下:

  1. 在开始渲染之前,预先获取所有需要的 Ajax 数据(然后存在 Vuex 的 Store 中);
  2. 后端渲染的时候,通过 Vuex 将获取到的 Ajax 数据分别注入到各个组件中;
  3. 把全部 Ajax 数据埋在 window.INITIAL_STATE 中,通过 HTML 传递到浏览器端;
  4. 浏览器端通过 Vuex 将 window.INITIAL_STATE 里面的 Ajax 数据分别注入到各个组件中。

下面谈几个重点。

我们知道,在常规的 Vue 前端渲染中,组件请求 Ajax 一般是这么写的:“在 mounted 中调用 this.fetchData,然后在回调里面把返回数据写到实例的 data 中,这就 ok 了。”

在 SSR 中,这是不行的,因为服务器并不会执行 mounted 周期。那么我们是否可以把 this.fetchData

提前到 created 或者 beforeCreate 这两个生命周期中执行?同样不行。原因是:this.fetchData 是异步请求,请求发出去之后,没等数据返回呢,后端就已经渲染完了,无法把 Ajax 返回的数据也一并渲染出来。

所以,我们得提前知道都有哪些组件有 Ajax 请求,等把这些 Ajax 请求都返回了数据之后,才开始组件的渲染。

// store.js
function fetchBar() {
 return new Promise(function (resolve, reject) {
 resolve('bar ajax 返回数据');
 });
}

export default function createStore() {
 return new Vuex.Store({
 state: {
  bar: '',
 },
 actions: {
  fetchBar({commit}) {
  return fetchBar().then(msg => {
   commit('setBar', {msg})
  })
  }
 },
 mutations:{
  setBar(state, {msg}) {
  Vue.set(state, 'bar', msg);
  }
 }
 })
}
// Bar.uve
asyncData({store}) {
 return store.dispatch('fetchBar');
},
computed: {
 bar() {
 return this.$store.state.bar;
 }
}

组件的 asyncData 方法已经定义好了,但是怎么索引到这个 asyncData 方法呢?先看我的根组件 App.vue 是怎么写的。

// App.vue
<template>
 <div>
 <h1>App.vue</h1>
 <p>vue with vue </p>
 <hr>
 <foo1 ref="foo_ref"></foo1>
 <bar1 ref="bar_ref"></bar1>
 <bar2 ref="bar_ref2"></bar2>
 </div>
</template>
<script>
 import Foo from './components/Foo.vue';
 import Bar from './components/Bar.vue';

 export default {
 components: {
  foo1: Foo,
  bar1: Bar,
  bar2: Bar
 }
 }
</script>

从根组件 App.vue 我们可以看到,只需要解析其 components 字段,便能依次找到各个组件的 asyncData 方法了。

// entry-server.js 
export default function (context) {
 // context 是 vue-server-render 注入的参数
 const store = createStore();
 let app = new Vue({
 store,
 render: h => h(App)
 });

 // 找到所有 asyncData 方法
 let components = App.components;
 let prefetchFns = [];
 for (let key in components) {
 if (!components.hasOwnProperty(key)) continue;
 let component = components[key];
 if(component.asyncData) {
  prefetchFns.push(component.asyncData({
  store
  }))
 }
 }

 return Promise.all(prefetchFns).then((res) => {
 // 在所有组件的 Ajax 都返回之后,才最终返回 app 进行渲染
 context.state = store.state;
 // context.state 赋值成什么,window.__INITIAL_STATE__ 就是什么
 return app;
 });
};

还有几个问题比较有意思:

1、是否必须使用 vue-router?→ 不是。虽然官方给出的 Demo 里面用到了 vue-router,那只不过是因为官方 Demo 是包含多个页面的 SPA 罢了。一般情况下,是需要用 vue-router 的,因为不同路由对应不同的组件,并非每次都把所有组件的 asyncData 都执行的。但是有例外,比如我的这个老项目,就只有一个页面(一个页面中包含很多的组件),所以根本不需要用到 vue-router,也照样能做 SSR。主要的区别就是如何找到那些该被执行的 asyncData 方法:官方 Demo 通过 vue-router,而我通过直接解析 components 字段,仅此而已。

2、是否必须使用 Vuex? → 是,但也不是,请看尤大的回答。为什么必须要有类似 Vuex 的存在?我们来分析一下。

2.1. 当预先获取到的 Ajax 数据返回之后,Vue 组件还没开始渲染。所以,我们得把 Ajax 先存在某个地方。

2.2. 当 Vue 组件开始渲染的时候,还得把 Ajax 数据拿出来,正确地传递到各个组件中。

2.3. 在浏览器渲染的时候,需要正确解析 window.INITIAL_STATE ,并传递给各个组件。

因此,我们得有这么一个独立于视图以外的地方,用来存储、管理和传递数据,这就是 Vuex 存在的理由。

3、后端已经把 Ajax 数据转化为 HTML 了,为什么还需要把 Ajax 数据通过 window.INITIAL_STATE 传递到前端? → 因为前端渲染的时候仍然需要知道这些数据。举个例子,你写了一个组件,给它绑定了一个点击事件,点击的时候打印出 this.msg 字段值。现在后端是把组件 HTML 渲染出来了,但是事件的绑定肯定得由浏览器来完成啊,如果浏览器拿不到跟服务器端同样的数据的话,在触发组件的点击事件的时候,又上哪儿去找 msg 字段呢?

至此,我们已经完成了带 Ajax 数据的后端渲染了。这一步最为复杂,也最为关键,需要反复思考和尝试。具体渲染效果图如下所示,源码请参考这里。

简单的Vue SSR的示例代码

效果

大功告成了吗?还没。人们都说 SSR 能提升首屏渲染速度,下面我们对比一下看看到底是不是真的。(同样在 Fast 3G 网络条件下)。

简单的Vue SSR的示例代码

简单的Vue SSR的示例代码

官方思路的变形

行文至此,关于 Vue SSR Demo便已经结束了。后面是我结合自身项目特点的一些变形,不感兴趣的读者可以不看。

第三步官方思路有什么缺点吗?我认为是有的:对老项目来说,改造成本比较大。需要显式的引入 vuex,就得走 action、mutations 那一套,无论是代码改动量还是新人学习成本,都不低。

有什么办法能减少对旧有前端渲染项目的改动量的吗?我是这么做的。

// store.js
// action,mutations 那些都不需要了,只定义一个空 state
export default function createStore() {
 return new Vuex.Store({
 state: {}
 })
}
// Bar.vue
// tagName 是组件实例的名字,比如 bar1、bar2、foo1 等,由 entry-server.js 注入
export default {
 prefetchData: function (tagName) {
 return new Promise((resolve, reject) => {
  resolve({
  tagName,
  data: 'Bar ajax 数据'
  });
 })
 }
}
// entry-server.js
return Promise.all(prefetchFns).then((res) => {
 // 拿到 Ajax 数据之后,手动将数据写入 state,不通过 action,mutation 那一套
 // state 内部区分的 key 值就是 tagName,比如 bar1、bar2、foo1 等
 res.forEach((item, key) => {
 Vue.set(store.state, `${item.tagName}`, item.data);
 });
 context.state = store.state;
 return app;
});
// ssrmixin.js
// 将每个组件都需要的 computed 抽象成一个 mixin,然后注入
export default {
 computed: {
 prefetchData () {
  let componentTag = this.$options._componentTag; // bar1、bar2、foo1
  return this.$store.state[componentTag];
 }
 }
}

至此,我们就便得到了 Vue SSR 的一种变形。对于组件开发者而言,只需要把原来的 this.fetchData 方法抽象到 prefetchData 方法,然后就可以在 DOM 中使用 {{prefetchData}} 拿到到数据了。这部分的代码请参考这里。

总结

Vue SSR 确实是个有趣的东西,关键在于灵活运用。此 Demo 还有一个遗留问题没有解决:当把 Ajax 抽象到 prefetchData,做成 SSR 之后,原先的前端渲染就失效了。能不能同一份代码同时支持前端渲染和后端渲染呢?这样当后端渲染出问题的时候,我就可以随时切回前端渲染,便有了兜底的方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
jQuery 加上最后自己的验证
Nov 04 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
You might like
php 什么是PEAR?
2009/03/19 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
详解Python验证码识别
2016/01/25 Python
python图像常规操作
2017/11/11 Python
django之session与分页(实例讲解)
2017/11/13 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Tensorflow 实现释放内存
2020/02/03 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
HTTP状态码详解
2021/03/18 杂记
药学专业大学生个人的自我评价
2013/11/04 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
反腐倡廉标语
2014/06/24 职场文书
支行行长岗位职责
2015/02/15 职场文书
导游词之天津盘山
2019/11/01 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技