SSR的学习新发现

前言

今天在开始做SSR项目的时候，偶然发现了困惑自己很久的一个问题。SSR在刚进页面的时候network里没有请求接口的记录，这个让我很困惑。
随后通过了解，这个和SSR的特性有关。我所做的SSR是同时支持服务端渲染和客户端渲染的，我从浏览器看只能看到客户端渲染所请求的接口。因此我学习了服务端渲染、客户端渲染和同构渲染相关的知识。

一、客户端渲染（CSR）

1-1、渲染步骤

客户端渲染主要有以下三个步骤：
1、浏览器发起http请求。
2、服务端响应http请求，返回html文件内容。
3、浏览器加载html文件中的资源文件（js、css、图片、音频、视频等）。
4、浏览器渲染并显示页面内容。

1-2、优劣势

优势：
1、实现简单（相比于SSR）。

劣势：
1、由于需要加载js文件以及后台接口数据，所以首屏加载时间会比较长，用户体验不好。
2、由于不能直接在首屏时渲染出页面内容，所以网站SEO不好做。

二、服务端渲染（SSR）

服务端渲染就更加直接，在服务器收到http请求的时候，服务器先在自己内部渲染出html的内容，然后直接返回结果。

2-1、渲染步骤

服务端渲染的过程更加简单：
1、浏览器发起http请求。
2、服务端响应http请求，先渲染出html的内容，然后返回。
3、浏览器获取到html的内容并直接渲染。

2-2、优劣势

优势：
1、直接输出网页内容，SEO很好做
2、首屏时省去了加载js文件的时间，首页加载速度变快了。

劣势：
1、访问每个界面都需要访问服务器，让服务器渲染页面，对服务器的负载变大了。

三、同构渲染

所谓的同构渲染，实际上就是把CSR和SSR的优势结合起来，让同一套代码在服务器上跑一遍，生成首屏内容，然后再在客户端跑一遍，绑定事件。这样既提供了更快的首屏速度、更好的SEO支持，又能避免对服务器带来过大的负载。

3-1、渲染步骤

同构渲染的过程一般是这样：
1、浏览器发起http请求。
2、服务端响应http请求，渲染出html的内容，然后返回。
3、浏览器渲染并显示页面内容。
4、浏览器继续加载html文件中的js文件。
5、绑定事件，后续路由跳转等行为均交由客户端来渲染。

四、简单总结

同构渲染是将同一套代码先在服务端执行一遍渲染静态页面，然后在客户端执行一遍完成事件绑定。
同构渲染的优势是主要在于两点：1、提高首屏速度，2、更好的SEO支持。
但因为我们不能在服务端渲染期间操作DOM，所以我们的一些代码逻辑需要区分运行环境。
和我在同事之间的沟通中，SSR在页面重新加载的时候先执行fetch文件请求接口，在执行的rander文件，浏览器就不会记录下来。