temp ssr

由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网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文件

传统服务端渲染

数据渲染发生在服务端

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

客户端渲染

数据渲染发生在客户端

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

现代化服务端渲染

实时动态编译输出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 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。