莫克力学习博客

2019腾讯前端技术大会----SSR学习

背景

进入页面loading加载状态，页面白屏时间长
原因是客户端渲染：html 仅仅作为静态文件，客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html。

前端渲染的方式起源于JavaScript的兴起，ajax的大热更是让前端渲染更加成熟，前端渲染真正意义上的实现了前后端分离，前端只专注于UI的开发，后端只专注于逻辑的开发，前后端交互只通过约定好的API来交互，后端提供json数据，前端循环json生成DOM插入到页面中去。

好处： 网络传输数据量小、减少了服务器压力、前后端分离、局部刷新，无需每次请求完整页面、交互好可实现各种效果

坏处：不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢（渲染前需要下载一堆js和css等）

SSR是什么

服务端渲染（SSR：server side render）
将页面通过服务器生成html字符串，再发送到浏览器

怎么理解SSR
首先，我们需要有一份同构代码，这部分代码和我们之前写的前端代码是基本一致的。然后，因为需要服务端渲染，所以服务端需要有一份同构代码打包后的js bundle，前端不必多说，天生需要一份。要注意的是，这两份是不同的bundle，因为server端和client端虽然都是做渲染工作，他们做的事情是有不同的，下面细说。然后经过中间的webpack打包后部署。接下来，请求到来，node server收到请求后，用server bundle作为入口拿到一份前端代码，render成html后返回给前端。前端收到后，就可以把预渲染的html展示给用户拉！！！就这么利索。但是前端还会去下载前端的bundle，然后以此为入口，激活后端返回的html，然后此时你的站点就完全可交互了！完美~

服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。

渲染：就是将数据和模版组装成html

SSR的优点与缺点

  • 优点
    • 更利于SEO
      • 通过AJAX加载页面数据的，很难保证站内数据被SEO获取到
      • 更好的SEO，我们可以将SEO的关键数据直接在后台就渲染成html，从而保证搜索引擎的爬虫能爬取到关键数据
      • 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
    • 更利于首屏渲染
      • 服务器端请求首屏数据而不是客户端请求首屏数据，服务器端在内网进行请求，速度更快。但是客户端处于不同的网络环境，导致时间差
  • 缺点
    • 服务器压力大，考虑服务器端负载。
    • 学习成本增大，需要学习构建设置和部署的更多要求
    • 开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。

由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。

SSR与CSR对比
serverless如何解决SSR开发成本高的问题的
fass是什么，怎么使用
FaaS 可以将函数作为一个线上服务、远程计算服务，可以通过 API 执行、通过邮件执行、通过 Iot 执行，通过队列执行。你只需要写统一的函数就行了。
你要做的只是写下如下这样的函数，然后再用配置文件告诉服务器如何让他运行，就完事了，你的所有工作都在这个函数内完成。

image

如何做到极致的SSR

是否需要使用SSR

这主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。

服务器端渲染 vs 预渲染 (SSR vs Prerendering)

vue ssr解读
避免状态单例

许多 webpack 特定功能不能直接在 Node.js 中运行（例如通过 file-loader 导入文件，通过 css-loader 导入 CSS）

所以基本看法是，对于客户端应用程序和服务器应用程序，我们都要使用 webpack 打包 - 服务器需要「服务器 bundle」然后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合静态标记。

在服务器端渲染(SSR)期间，我们本质上是在渲染我们应用程序的”快照”，所以如果应用程序依赖于一些异步数据，那么在开始渲染过程之前，需要先预取和解析好这些数据。

使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation)，以避免 XSS 攻击。

asyncData是干嘛用的？其实，这个函数是专门请求数据用的，你可能会问请求数据为什么不在beforeCreate或者created中完成，还要专门定义一个函数？虽然beforeCreate和created在服务端也会被执行（其他周期函数只会在客户端执行），但是我们都知道请求是异步的，这就导致请求发出后，数据还没返回，渲染就已经结束了，所以无法把 Ajax 返回的数据也一并渲染出来。因此需要想个办法，等到所有数据都返回后再渲染组件

在 2.3.2+ 的版本，你可以通过 this.$ssrContext 来直接访问组件中的服务器端渲染上下文(SSR context)

如果您唯一关注的是SEO，那么随时都可以轻松使用预渲染。

流式渲染 (Streaming)

对于 vue-server-renderer 的基本 renderer 和 bundle renderer 都提供开箱即用的流式渲染功能。所有你需要做的就是，用 renderToStream 替代 renderToString：

非NodeJs中使用SSR

对于所有环境，必须要预先在环境中模拟 global 和 process 对象，以及将 process.env.VUE_ENV 设置为 “server” 和将 process.env.NODE_ENV 设置为 “development” 或 “production”。

phpV8js中使用，V8Js是Google V8 Javascript引擎的PHP扩展，那这个插件是在php中模拟V8引擎，然后可以运行js代码

process 对象：process对象是Node.js中非常重要的一个全局对象，它是一个与操作系统集成的对象，使用process我们可以进行许多与操作系统打交道的工作

serverless 与 faas

Serverless架构
Serverless（无服务器架构）指的是由开发者实现的服务端逻辑运行在无状态的计算容器中，它由事件触发， 完全被第三方管理，其业务层面的状态则被开发者使用的数据库和存储资源所记录。

Serverless架构主要有以下特点：

实现了细粒度的计算资源分配。
不需要预先分配资源。
具备真正意义上的高度扩容和弹性。
按需使用，按需计费。

FaaS函数即服务？

专注于单一责任与功能的小型功能块为基础，利用模组化的方式组合出复杂的大型应用程序
Function as a Services（FaaS）。而所谓的“函数”（Function）提供的是相比微服务更加细小的程序单元。例如用户的创建、读取等操作

PaaS（Platform as a Service

Q 一般SSR首次绘制(FP: First Paint)慢, 不能渐进式加载
A HTTP1.1 分块传输可以完美的解决这个问题
Transfer-Encoding: chunked
HTTP2: 数据帧

Q SSR页面切换无法渐进式加载， 不能定义页面切换动画
A 无刷新切换：直出单页应用运用前端路由管理模块，页面无刷新切换的页面状态， 可自定义切换动效。
Q 怎么理解serveless和fass，按需执行、弹性伸缩是什么意思

Q 流式渲染与分块传输区别，二者分别是什么意思
依赖由组件生命周期钩子函数填充的上下文数据，则不建议使用流式传输模式

Q 服务端只有beforeCreate 和 created两个生命周期吗
A 已证明 是的

Q1，如何应用到小雨伞中
Q2，相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件

参考文档

vue ssr https://ssr.vuejs.org/zh/
https://www.jianshu.com/p/b8cfa496b7ec 简书
https://www.jdon.com/50088 SSR问题
https://segmentfault.com/a/1190000015964813?utm_source=tag-newest 原理解读
https://blog.csdn.net/vhwfr2u02q/article/details/83005905 vue ssr 不可不知的问题
https://ke.qq.com/course/package/20989?tuin=37f476dd 视频回放