服务端渲染SSR(Server Side Rendering)

发布于 2020-04-15  159 次阅读


什么是服务端渲染?

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 )
  • 更多的服务器端负载。需要做好缓存和 优化,相当于空间换时间。

Nothing is impossible!