LiangHJ

LiangHJ 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

LiangHJ 发布了文章 · 2019-07-01

Vue.js SSR 内容总结

本文只是对Vue.js官方SSR文档和对官方hackernews demo的个人学习总结,说得不够完整的请见谅

本文主要对以下几方面内容对Vue.js SSR的内容进行分析总结

  • SSR出现的原因
  • Vue.js SSR的总体原理
  • SSR当中的数据预取
  • SSR在编写代码时候的限制
  • SSR的webpack构建原理

SSR出现的原因

  1. 单页应用有一个很大的缺点就是SEO问题,搜索引擎目前只能对同步的javascript进行索引,但对于需要异步获取数据的单页应用来说,搜索引擎并不会抓取到它们的内容
  2. 更快的首屏内容展示速度,单页应用需要等待JS文件加载完成,然后再进行页面渲染,而SSR是将渲染完毕的html传输给客户端

Vue.js SSR的总体原理

如果用一句话概括Vue.js SSR的运作过程,那就是在服务端将Vue.js实例转换成html字符串传输到客户端,然后进行客户端激活,使网页内容能在Vue实例的控制之下

这一句话包含两步内容

  1. Vue.js实例转换成html字符串
  2. 客户端激活

先来看第一步

Vue.js应用转换成html字符串

一个最简单的Vue.js单页应用是这样的:

new Vue({
    render: h => h('div', '123')
}).$mount('#app')

这里也包含两步

  1. 新建Vue实例
  2. 挂在到DOM上面

在服务端当中我们不进行上面第二步操作,取而代之的是将这个实例直接渲染成字符串,做这个工作的就是我们的vue-server-renderer

const renderer = require('vue-server-renderer').createRenderer()
const Vue = require('vue')

renderer.renderToString(new Vue({
  render: h => h('div', 123)
})).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})
// 输出<div data-server-rendered="true">123</div>

到现在一个最简单的vue ssr应用在服务端的工作已经完成了,下面我们转向下一步客户端激活

客户端激活

客户端激活跟我们单页应用所做的工作相比,最大的不同点就是它并不会构建DOM元素,只会对现有的DOM元素进行激活,使它们能被Vue实例进行控制,而判断激活的关键就是上面的data-server-rendered属性

至此,最简单的一个SSR应用已经构建完成了,下面是对这个应用的功能进行进一步的补充

SSR当中的数据预取

数据预取包含着两个方面,客户端的数据预取和服务端的数据预取

服务端的数据预取

我们渲染一个内容完整页面的时候往往需要向服务器请求数据,所以现在服务端的逻辑变成等待数据获取完毕,然后将页面转换成html字符串

其中数据获取有以下几个问题:

  1. 获取哪些数据?
  2. 如何得到获取数据的方法?
  3. 应在何时预取数据?
  4. 预取的数据应保存在哪里?
  5. 预取的数据应该怎么样跟客户端进行同步?

问题1:
我们的数据用来渲染页面,那么我们就需要组成当前页面的所有组件各自所需要的数据

问题2:
每个需要进行服务端数据预取的组件定义一个asyncData方法,此方法用于数据预取

问题3:
我们需要先得到当前页面所有需要渲染的组件,然后再进行数据预取

问题4:
由于还需要进行数据同步,所以很难将数据保存在组件的私有data上面,放在vuex上面是个普遍的选择

问题5:
服务端在返回html字符串的时候,store数据将被序列化以后以window.__INITIAL_STATE__=/* store state */的形式插入到脚本当中被客户端获取,客户端的store使用store.replaceState方法同步state

简单复述一下上面的流程就是:
在渲染当前页面的所有组件加载完毕以后,执行这些组件的asyncData方法,这些方法将获取到的数据将由vuex托管,获取数据完毕以后即可将应用渲染成html字符串,vuex store的state将会被序列化以后一并传输到客户端,被客户端进行同步

下面是实现的一些细节:

  1. 判断组件加载完毕的方法是vue-router的onReady方法
  2. 获取当前页面的所有组件为vue-router的getMatchedComponents方法

由于源码太长所以没贴出来,具体可以到官网浏览

服务端数据预取的关键点算是总结的差不多了,下面简单说一下客户端的数据预取

客户端数据预取

客户端的数据预取方法可分为两种:

  1. 等待数据获取完毕后再进行视图切换
  2. 先进行视图切换然后在进行数据获取

两种方法区别在于让用户在什么时候产生等待的感觉,第一种是在页面切换时,而第二种是在页面切换完毕等待内容的出现时

第一种方法的实现使用了vue-router实例的beforeResolve方法,这个方法执行在异步组件加载完毕后,导航被确认之前,当完成数据预取以后router才会进行DOM更新等步骤

第二种方法的实现跟我们一般进行数据获取一致,在beforeMount钩子当中执行

SSR在编写代码时候的限制

  1. 由于浏览器特定的API将会在服务端报错,如'document'、'window'等,尽量避免使用此类API或者在非服务端运行的声明周期函数中调用如'mounted'等等
  2. 指令由于能直接操作DOM会受到很大的限制

SSR的webpack构建原理

以官方的hackernews demo为例,webpack有两个入口entry-cliententry-server分别负责构建客户端和服务端的文件

服务端方面webpack会输出一个名叫vue-ssr-server-bundle的json文件,此文件由官方提供的VueSSRServerPlugin插件所构建而成,是服务端的构建清单,传入createBundleRenderer生成服务端渲染所需要的renderer

客户端方面webpack输出的是由代码分割而成的chunk和公用bundle,与一般单页应用的构建相似,不同的是会生成一个vue-ssr-client-manifest,此文件是客户端方面的构建清单,包含所有chunk的信息,将其传入上面的renderer当中能自动将chunk嵌入到html当中,当然用户也能够取消,自行选择手动嵌入的内容

查看原文

赞 1 收藏 1 评论 1

LiangHJ 发布了文章 · 2019-07-01

Vue.js SSR 内容总结

本文只是对Vue.js官方SSR文档和对官方hackernews demo的个人学习总结,说得不够完整的请见谅

本文主要对以下几方面内容对Vue.js SSR的内容进行分析总结

  • SSR出现的原因
  • Vue.js SSR的总体原理
  • SSR当中的数据预取
  • SSR在编写代码时候的限制
  • SSR的webpack构建原理

SSR出现的原因

  1. 单页应用有一个很大的缺点就是SEO问题,搜索引擎目前只能对同步的javascript进行索引,但对于需要异步获取数据的单页应用来说,搜索引擎并不会抓取到它们的内容
  2. 更快的首屏内容展示速度,单页应用需要等待JS文件加载完成,然后再进行页面渲染,而SSR是将渲染完毕的html传输给客户端

Vue.js SSR的总体原理

如果用一句话概括Vue.js SSR的运作过程,那就是在服务端将Vue.js实例转换成html字符串传输到客户端,然后进行客户端激活,使网页内容能在Vue实例的控制之下

这一句话包含两步内容

  1. Vue.js实例转换成html字符串
  2. 客户端激活

先来看第一步

Vue.js应用转换成html字符串

一个最简单的Vue.js单页应用是这样的:

new Vue({
    render: h => h('div', '123')
}).$mount('#app')

这里也包含两步

  1. 新建Vue实例
  2. 挂在到DOM上面

在服务端当中我们不进行上面第二步操作,取而代之的是将这个实例直接渲染成字符串,做这个工作的就是我们的vue-server-renderer

const renderer = require('vue-server-renderer').createRenderer()
const Vue = require('vue')

renderer.renderToString(new Vue({
  render: h => h('div', 123)
})).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})
// 输出<div data-server-rendered="true">123</div>

到现在一个最简单的vue ssr应用在服务端的工作已经完成了,下面我们转向下一步客户端激活

客户端激活

客户端激活跟我们单页应用所做的工作相比,最大的不同点就是它并不会构建DOM元素,只会对现有的DOM元素进行激活,使它们能被Vue实例进行控制,而判断激活的关键就是上面的data-server-rendered属性

至此,最简单的一个SSR应用已经构建完成了,下面是对这个应用的功能进行进一步的补充

SSR当中的数据预取

数据预取包含着两个方面,客户端的数据预取和服务端的数据预取

服务端的数据预取

我们渲染一个内容完整页面的时候往往需要向服务器请求数据,所以现在服务端的逻辑变成等待数据获取完毕,然后将页面转换成html字符串

其中数据获取有以下几个问题:

  1. 获取哪些数据?
  2. 如何得到获取数据的方法?
  3. 应在何时预取数据?
  4. 预取的数据应保存在哪里?
  5. 预取的数据应该怎么样跟客户端进行同步?

问题1:
我们的数据用来渲染页面,那么我们就需要组成当前页面的所有组件各自所需要的数据

问题2:
每个需要进行服务端数据预取的组件定义一个asyncData方法,此方法用于数据预取

问题3:
我们需要先得到当前页面所有需要渲染的组件,然后再进行数据预取

问题4:
由于还需要进行数据同步,所以很难将数据保存在组件的私有data上面,放在vuex上面是个普遍的选择

问题5:
服务端在返回html字符串的时候,store数据将被序列化以后以window.__INITIAL_STATE__=/* store state */的形式插入到脚本当中被客户端获取,客户端的store使用store.replaceState方法同步state

简单复述一下上面的流程就是:
在渲染当前页面的所有组件加载完毕以后,执行这些组件的asyncData方法,这些方法将获取到的数据将由vuex托管,获取数据完毕以后即可将应用渲染成html字符串,vuex store的state将会被序列化以后一并传输到客户端,被客户端进行同步

下面是实现的一些细节:

  1. 判断组件加载完毕的方法是vue-router的onReady方法
  2. 获取当前页面的所有组件为vue-router的getMatchedComponents方法

由于源码太长所以没贴出来,具体可以到官网浏览

服务端数据预取的关键点算是总结的差不多了,下面简单说一下客户端的数据预取

客户端数据预取

客户端的数据预取方法可分为两种:

  1. 等待数据获取完毕后再进行视图切换
  2. 先进行视图切换然后在进行数据获取

两种方法区别在于让用户在什么时候产生等待的感觉,第一种是在页面切换时,而第二种是在页面切换完毕等待内容的出现时

第一种方法的实现使用了vue-router实例的beforeResolve方法,这个方法执行在异步组件加载完毕后,导航被确认之前,当完成数据预取以后router才会进行DOM更新等步骤

第二种方法的实现跟我们一般进行数据获取一致,在beforeMount钩子当中执行

SSR在编写代码时候的限制

  1. 由于浏览器特定的API将会在服务端报错,如'document'、'window'等,尽量避免使用此类API或者在非服务端运行的声明周期函数中调用如'mounted'等等
  2. 指令由于能直接操作DOM会受到很大的限制

SSR的webpack构建原理

以官方的hackernews demo为例,webpack有两个入口entry-cliententry-server分别负责构建客户端和服务端的文件

服务端方面webpack会输出一个名叫vue-ssr-server-bundle的json文件,此文件由官方提供的VueSSRServerPlugin插件所构建而成,是服务端的构建清单,传入createBundleRenderer生成服务端渲染所需要的renderer

客户端方面webpack输出的是由代码分割而成的chunk和公用bundle,与一般单页应用的构建相似,不同的是会生成一个vue-ssr-client-manifest,此文件是客户端方面的构建清单,包含所有chunk的信息,将其传入上面的renderer当中能自动将chunk嵌入到html当中,当然用户也能够取消,自行选择手动嵌入的内容

查看原文

赞 1 收藏 1 评论 1

LiangHJ 关注了用户 · 2019-07-01

Chor @chor

关注 5339

LiangHJ 关注了专栏 · 2019-07-01

腾讯新闻前端团队

TNFE 腾讯新闻前端团队,专业的前端技术专栏,一线的前端技术文章。

关注 4709

LiangHJ 关注了专栏 · 2019-07-01

煎鱼的清汤锅

今天写代码了吗 :-) 博客地址:https://github.com/EDDYCJY/blog

关注 5540

LiangHJ 关注了用户 · 2019-07-01

Aaron @aaron_blog

Easy life, happy elimination of bugs.

关注 4643

LiangHJ 关注了专栏 · 2019-07-01

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 41316

LiangHJ 关注了专栏 · 2019-07-01

疯狂的技术宅

本专栏文章首发于公众号:前端先锋 。

关注 24622

LiangHJ 关注了标签 · 2019-07-01

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 137354

认证与成就

  • 获得 1 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-07-01
个人主页被 129 人浏览