认识 CSR & SSR & hydrate

[callqh]

本篇文章主要是简单认识一下这些专业词汇的意思。 没有复杂的源码分析之类的~ 【科普向】

CSR

client-side render 客户端渲染

1. 客户端发送请求页面数据，服务端进行响应，并且返回对应页面的js bundle
2. 客户端下载js
3. 客户端执行下载来的js文件，渲染对应的dom树
4. 页面可见并且可交互 :::success 可以发现CSR的 html 内容是在客户端执行完成的 ::: 客户端渲染的劣势在于需要先下载js然后在执行js，才可以渲染出来想要的页面，所以对于首屏渲染不友好。 因此就出现了SSR方案

SSR

server-side render服务端渲染

1. 客户端请求页面，服务端响应并返回html页面
2. 客户端下载html页面并且展示，这时页面已经可见，但是还不能交互，所以要下载html页面对应的js文件
3. 执行下载的js文件，进行注水（hydrate)（会不会让页面重新渲染？）
4. 注水完成页面可交互 :::success 可见服务端渲染html是在服务端就完成的 ::: 从上面也可以看出其实ssr在第二步时就可以看到页面了，对于首屏渲染非常友好，只是此时的页面还不能进行交互（dom点击），需要进行hydtate之后才可以进行交互

所以接下来我们看一下hydrate是干什么的。

hydrate

从上面我们可以知道，在ssr中浏览器会首先将html页面展示出来，但是此时的页面是无法交互的（即没有绑定附加的点击等事件）。 所以我们后续需要将一些可交互的事件注入到页面元素中去，这个过程就是hydrate。 这个过程很像是给一个干瘪的元素注入生机，让他变得更加生动。

首先我们可以看到上图中绿色的部分其实就是页面中可以交互的部分，上图就是一个完整可交互的web页面。 但是我们在csr中，因为客户端需要加载并执行js，所以一开始页面是下面这样的（空白页） 而在ssr中，因为请求回来的就是一个干瘪的html页面，是可以直接展示的，像下图那样

此时的页面是只可以看，不可以动的（即没有哪家附加的绑定事件） 而hydrate就是将这个干瘪的html注水变成可交互的

推荐阅读

● https://blog.saeloun.com/2021/12/16/hydration.html ● https://zhuanlan.zhihu.com/p/323174003 ● http://www.ayqy.net/blog/react-ssr-under-the-hood/#articleHeader9