《Vue.js设计与实现》笔记 第18章：服务端渲染（SSR）

Vue.js设计与实现 第18章：服务端渲染（SSR）

本章导读

客户端渲染：

Browser

↓

Render

↓

DOM

---

SSR：

Server

↓

HTML

↓

Browser

---

一、什么是SSR

Server Side Rendering

---

服务器：

renderToString()

---

输出：

<div>Hello Vue</div>

---

二、SSR优势

首屏更快

用户直接获得：

HTML

---

无需等待：

执行完成

---

SEO更友好

搜索引擎直接抓取：

内容

---

三、SSR流程

Vue组件

↓

VNode

↓

renderToString

↓

HTML

↓

发送浏览器

---

四、renderToString

作用：

VNode

↓

HTML字符串

---

五、元素节点处理

VNode：

{
 type:'div'
}

---

输出：

<div></div>

---

六、文本节点处理

VNode：

{
 children:'hello'
}

---

输出：

hello

---

七、组件处理

组件：

render()

---

得到：

subTree

---

递归：

renderToString

---

八、HTML转义

避免：

<script>

注入。

---

转换：

<script>

---

九、SSR与CSR区别

CSR：

JS生成HTML

---

SSR：

HTML先生成

---

十、Hydration

浏览器获得：

SSR内容

---

然后：

激活

---

绑定：

事件

响应式

---

称为：

Hydration

---

十一、同构应用

代码同时运行：

Server

Browser

---

称：

Isomorphic

---

高频面试题

什么是SSR？

服务端生成HTML

---

SSR优势？

首屏快

SEO好

---

什么是Hydration？

客户端激活SSR页面

---

SSR与CSR区别？

SSR先HTML

CSR先JS