解析vue-ssr构建流程
来先看一眼官方构建图:
1、app.js / main.js入口文件
app.js是我们的通用entry,它的作用就是构建一个Vue的实例以供服务端和客户端使用,注意一下,在纯客户端的程序中我们的app.js将会挂载实例到dom中,而在ssr中这一部分的功能放到了Client entry中去做了。
2、两部分入口entry.js
我们来看Client entry和Server entry,这两者分别是客户端的入口和服务端的入口。Client entry的功能很简单,就是挂载我们的Vue实例到指定的dom元素上;Server entry是一个使用export导出的函数。主要负责调用组件内定义的获取数据的方法,获取到SSR渲染所需数据,并存储到上下文环境中。这个函数会在每一次的渲染中重复的调用。
3、webpack打包构建
我们的服务端代码和客户端代码通过webpack分别打包,生成Server Bundle和Client Bundle,前者会运行在服务器上通过node生成预渲染的HTML字符串,发送到我们的客户端以便完成初始化渲染;而客户端bundle就自由了,初始化渲染完全不依赖它了。客户端拿到服务端返回的HTML字符串后,会去“激活”这些静态HTML,使其变成由Vue动态管理的DOM,以便响应后续数据的变化。
4、解析运行流程
这里我们该谈谈ssr的程序是怎么跑起来的了。首先我们得去构建一个vue的实例,也就是我们前面构建流程中说到的app.js做的事情,但是这里不同于传统的客户端渲染的程序,我们需要用一个工厂函数去封装它,以便每一个用户的请求都能够返回一个新的实例,也就是官网说到的避免交叉污染了。
然后我们可以暂时移步到服务端的entry中了,这里要做的就是拿到当前路由匹配的组件,调用组件里定义的一个方法(官网取名叫asyncData)拿到初始化渲染的数据,而这个方法要做的也很简单,就是去调用我们vuex store中的方法去异步获取数据。
接下来node服务器如期启动了,跑的是我们刚写好的服务端entry里的函数。在这里还要做的就是将我们刚刚构建好的Vue实例渲染成HTML字符串,然后将拿到的数据混入我们的HTML字符串中,最后发送到我们客户端。
打开浏览器的network,我们看到了初始化渲染的HTML,并且是我们想要初始化的结构,且完全不依赖于客户端的js文件了。再仔细研究研究,里面有初始化的dom结构,有css,还有一个script标签。script标签里把我们在服务端entry拿到的数据挂载了window上。原来只是一个纯静态的HTML页面啊,没有任何的交互逻辑,所以啊,现在知道为啥子需要服务端跑一个vue客户端再跑一个vue了,服务端的vue只是混入了个数据渲染了个静态页面,客户端的vue才是去实现交互的!
SSR服务端渲染注意点
在SSR中,创建Vue实例、创建store和创建router都是套了一层工厂函数的,目的就是避免数据的交叉污染。
注意点一
在服务端只能执行生命周期中的created和beforeCreate,原因是在服务端是无法操纵dom的,所以可想而知其他的周期也就是不能执行的了。
注意点二
服务端渲染和客户端渲染不同,需要创建两个entry分别跑在服务端和客户端,并且需要webpack对其分别打包;
注意点三
SSR服务端请求不带cookie,需要手动拿到浏览器的cookie传给服务端的请求。
解析vue-ssr构建流程相关推荐
- 【服务端渲染】之 Vue SSR
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue SSR 基本介绍 Vue SSR 是什么 官方文档:https://ssr.vuejs.org/ V ...
- 服务器端渲染-Vue SSR搭建
阅读建议:建议通过左侧导航栏进行阅读 文章简介:本文是Vue.js服务器端渲染的另一种解决方案-SSR(Server-Side Rendering)学习笔记 Vue SSR是什么 官方文档解释:Vue ...
- 自定义vue SSR
项目源码地址 : https://github.com/qifutian/learngit/tree/main/vue-ssr 搭建自己的SSR mkdir vue-ssr cd vue-ssr np ...
- Vue 项目 build 流程解析(webpack工具解析)
Vue 项目 build 流程解析(webpack工具解析) 注:本篇文章解析框架为 vue2.0 本篇文章通过解析简单的项目打包步骤试着去了解我们的 Vue 项目是怎么打包的. build.js 干 ...
- 2.MyBatis源码解析-SqlSession构建流程--阿呆中二
SqlSession构建流程 MyBatis SqlSession构建流程 与我联系 MyBatis 本文是对mybatis 3.x源码深度解析与最佳实践学习的总结,包括XML文件解析流程.SqlSe ...
- Nuxt.js(Vue SSR)创建项目到服务器(Nginx+PM2)部署详细流程
一.什么是 SSR ? SSR 就是 服务器渲染,什么是 服务器渲染?由 服务器 组装好 DOM 元素,生成 HTML 字符串给到浏览器,也就是在浏览器里面是可以看到整个页面的 DOM 源码的. SS ...
- Vue SSR技术方案落地实现—构建同构应用
Vue SSR技术方案落地实现-构建同构应用 一.基本知识扫盲 1.何为服务器端渲染? 1).服务器端渲染:这种技术方案在前端领域处于蛮荒时代就已出现,当时的解决方案主要是后台开发通过模板引擎来设计( ...
- 【6】爬虫介绍/准备工作/构建流程/获取数据/BeautifulSoup/Re(正则表达式)/正则提取/标签解析/保存数据到excel
爬虫介绍/准备工作/构建流程/获取数据/BeautifulSoup/Re(正则表达式)/正则提取/标签解析/保存数据到excel 更新时间:2021.9.16 vedio:15,16,17,18,19 ...
- 【Vite】1380- 详解 Vite 依赖预构建流程
我们知道,首次执行 vite 时,服务启动后会对 node_modules 模块和配置 optimizeDeps 的目标进行预构建.本节我们就去探索预构建的流程. 按照惯例,先准备好一个例子.本文我们 ...
最新文章
- 用sublime server 启动本地服务器(手机访问电脑页面)
- 相机模型--A Unifying Theory for Central Panoramic Systems and Practical Implications
- 前凸后翘的步进电机调速算法~
- LeetCode 668. 乘法表中第k小的数(二分查找)
- 云计算实战系列五(Linux文件权限II)
- shell基础命令管理
- Linux命令之sed使用入门概述
- 顶会|关于数据库顶级会议 SIGMOD 2018,看这一篇就够了!
- ITU-T Technical Paper: 测量QoS的基本网络模型
- 802.x无线认证服务器,无线802.1X认证
- 【C语言】18-变量类型
- PDF转WORD工具破解版
- windows常用端口对应表
- uni-app、小程序项目分包经验之谈与天坑异常:RangeError: Maximum call stack size exceeded
- 全国面向小学五六年级及初一的舞蹈方向的艺术学校舞蹈学校整理
- FeedDemon--最好用的Blog阅读工具
- camera 自动对焦手动对焦
- FinClip黑客马拉松@您,小程序风云来袭
- [宋史学习] 宋初对党项的征讨与妥协
- 数组排序之后相邻数的最大差值