Vue SSR

 
 

项目已上传至码云

git@gitee.com:yangguang110/Vue_SSR_Demo.git

 

何为SSR

从需求出发来回答这个问题。
SPA应用有两个缺点，一是首屏加载缓慢，二是SEO不友好。因为浏览器在请求一个SPA的时候，服务器发送给浏览器的html文件是一个只包含基本DOM结构的空文件，也就是body标签内只包含挂载点(默认是id为app的div)而无其他内容。而首屏内容需要额外下载路由所对应的js文件并使用其渲染出首屏的DOM结构最终插入到挂载点内。多次的网络请求必然会拖慢加载速度，于是造成了第一个问题。并且，由于搜索引擎爬取到的html页面上不包含实质性的内容，所以爬虫会认为这个网站是低价值的，排名自然不会靠前，甚至不会被爬虫收录，于是造成了第二个问题。
究其根源，是DOM结构的渲染发生在浏览器端。于是解决这两个问题的思路是让首屏的DOM结构的渲染在服务器端完成，之后将渲染好DOM结构的html文件发送回浏览器，此时问题完美解决。
这里还需要注意的是，使用SSR只是渲染首屏，而之后的全部交互还是走的SPA的处理方式。路由自始至终都是交给vue去管理的。

 

Vue SSR流程