SSR(Server-Side Rendering简写)工作原理:
当浏览器请求一个url的时,服务端将首屏页面所需要的异步请求数据,填充完成后的完整html页面,返回给前端过程中。SSR是一份代码运行在两个环境里面:服务端、客户端。首屏请求的时候,服务端将模板+异步数据,渲染成html页面,返回给前端,前端再载入js文件,完成激活,后续操作就是SPA了。只有一个首屏是服务端渲染的且有数据的html,首屏只需要渲染一个页面,后续激活SPA是发生在浏览器的,不需要在服务端操作,所以解决了首屏渲染问题,同时又能保持SPA的优势。
SSR服务端渲染作用:
1、更好的SEO
SPA页面的内容是Ajax获取,而搜索引擎爬取工具并不会等待Ajax异步完成后再进行爬取页面内容,所以在SPA页面是抓取不到页面通过Ajax获取到的内容,爬虫获取的html,是一个没有数据的空壳子。而SSR,是服务端直接将数据处理好,再拼接组装好,返回一个已经渲染好的页面(数据已经包含在页面中),所以爬虫可以爬取渲染好的页面。
2、首屏渲染更快
SPA页面,需要等所有的Vue编译后的js文件全部下载完成之后,才开始进行页面的渲染,文件下载需要一定的时间,所以首屏渲染需要一定的时间。SSR直接有服务端渲染好页面直接返回显示,不需要等待下载js文件后再去渲染,所以SSR能解决SPA页面首屏渲染时间太长的问题。
网友评论