temp ssr

柔光的暖阳◎ 2023-01-09 12:35 139阅读 0赞

由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。

服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。

SSR的优势

1. 更利于SEO。

不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了React或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少(如图一)。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。

2. 更利于首屏渲染

首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。

seo为啥对vue单页面不友好?

1.  爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到。
2.  vue通过js控制路由然后渲染出对应的页面，而搜索引擎蜘蛛是不会去执行页面的js的，导致搜索引擎蜘蛛只能收录index.html一个页面，在百度中就搜索不到相关的子页面的内容。
3.  我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好。

# 什么是渲染 #

把数据和模板拼接为完整的HTML文件

# 传统服务端渲染 #

数据渲染发生在服务端  
![传统服务端渲染][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214eWRsMjAwOQ_size_16_color_FFFFFF_t_70]

*  前后端耦合，不利于维护
 *  服务端压力大
 *  页面请求的数据量大，但模板中大多数字符都是多余的

# 客户端渲染 #

数据渲染发生在客户端  
![客户端渲染][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214eWRsMjAwOQ_size_16_color_FFFFFF_t_70 1]

*  首屏渲染慢：相比于服务端渲染且不带JavaScript脚本的情况
    
     *  加载JavaScript脚本
     *  执行JavaScript脚本
     *  发送网络请求，取到数据
     *  渲染数据
 *  不利于SEO
    
     *  搜索引擎爬取的页面是静态页面，没有任何关键信息

# 现代化服务端渲染 #

![SSR服务端渲染][SSR]

## 实时动态编译输出HTML ##

对于每个路由，首次访问时都会由服务器执行动态编译输出HTML文件，然后再在客户端激活SPA。

## 预渲染 ##

如果只是针对少数路由（页面）需要输出静态HTML文件，可以采用预渲染方式，在构建时针对这些页面生成静态HTML文件即可。

使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染

# Nuxt.js：基于Vue的服务端渲染框架 #

--------------------

**增加一处说明** : 预渲染是编译时提前渲染一次,服务器端渲染ssr是用户每次请求服务器,服务器把相应的内容填进去(这两者本质的不同,特此说明 !)

> 如果整个网站每个页面都需要动态数据展示，并且需要里面的数据要被搜索引擎实时搜索到，还是用ssr实际点吧？后面说的正确的使用姿势，只不过是为生成出来的静态数据做缓冲而已，对动态数据的爬取根本没用吧？

预加载原理就是项目build的时候运行 谷歌浏览器 并发起接口请求，获取接口数后渲染页面，把已渲染好的 dom页面 保存下来，直接用于服务器访问。

预加载**不能很好地处理用户独特性路由**: 比如有个路由是 /my-profile, 预渲染可能不会很好用, 因为这个内容页是根据用户信息变化的，所以页面内容也不是唯一确定的.

> 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 `/`, `/about`, `/contact` 等）的 SEO，那么你可能需要**预渲染**。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214eWRsMjAwOQ_size_16_color_FFFFFF_t_70]: /images/20221119/43a1dd90461c42c5954f27f2c0e4b2e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214eWRsMjAwOQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/ee44f976161543928021bb18c6e7e16b.png
[SSR]: https://img-blog.csdnimg.cn/20200804164124349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214eWRsMjAwOQ==,size_16,color_FFFFFF,t_70