服务端渲染SSR（Server Side Rendering）

什么是服务端渲染？

ajax没出来前，都是服务端渲染，服务端直接返回html文本给浏览器。服务端将对vue页面进行渲染（获取数据，填充组件都在服务端完成）生成HTML文件，将HTML页面传给浏览器。【将html在服务端渲染，合成完整的html文件再输出到浏览器】

目的

为了体验（首屏响应），为了解决单页面应用SEO问题，对于论坛类，内容网站类的网站至关重要，传统的SPA应用是没有SEO的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关内容。

传统SPA:
1、浏览器加载所有资源（html,css,js,img...）
2、 CDN
3、 返回资源
4、Vue请求server获取业务数据
5、返回数据渲染成html片段
6、css渲染片段成一个网页
7、用户
最耗时的4，5步骤，请求serverapi的过程中本身除了服务器的限制，还有网络，宽带等限制，并当页面逻辑过多，数据过于繁琐时，vue在client端渲染也会成为性能瓶颈。（比如电商的首页，商品详情页）
【在首次请求经服务端路由输出整个应用程序后，接下来的路由都由前端掌控，前端通过路由作为中心枢纽控制一系列页面（组件）的渲染加载和数据交互】

SSR
1、服务端返回页面
2、css渲染片段成一个网页
3、用户
无需下载一堆js和css才能看到页面（首屏性能）node缓存的html,节省了请求接口和框架渲染的时间
同构： 前后端共用JS，首次渲染使用Node.js直接返回HTML
【服务端取出数据和模板组合生成html输出给前端，前端发生请求时，重新给服务器请求html资源，路由也由服务器控制】

传统的SPA的HTML只有一个无实际内容的HTML和一个app.js, 而SSR生成的HTML是有内容的，这能让搜索引擎能够索引到页面内容。

服务端渲染

与传统的SPA相比，优势在于：

• 更好的seo , 由于搜索引擎爬虫抓取工具查看完全渲染的页面，即需要同步js。如果应用程序是初始展示loading状态，通过ajax异步获取内容，抓取工具并不会等待异步完成后再进行抓取页面内容。如果你的站点seo很重要，但页面内容又是异步获取内容，则需要服务端渲染SSR。

• 更快的内容到达时间，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的JavaScript都完成下载并执行，才显示服务器渲染的标记，所以用户可以更快速的看到完整渲染的页面。【传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom,而ssr直接将HTML字符串传给浏览器，首屏渲染大大的加快，客户端只负责解析html。】

• 可以生成缓存片段，生成静态化文件

---

注意(权衡之处)：

• 开发条件受限。由于没有动态更新，只有beforeCreate和created会在服务器端和客户端渲染过程中被调用，其余生命周期钩子函数中的代码只会在客户端执行（需注意，避免beforeCreate和created生命周期时产生全局副作用的代码，比如setInetrval,纯客户端的话，可以在destory中将其销毁，但是SSR期间并不会调用，会永远保存下来）；一些外部拓展库需要特殊处理。

• node.js server运行环境 | 直接获取document,window对象找不到

  if (process.browser) {
   ........这里可以获取document，window
  ）
  

• 更多的服务器端负载。需要做好缓存和 优化，相当于空间换时间。

  
  
  image.png

赞赞哇.png