SPA、SEO、SSR
开场白:
使用Vue做官网时,如果官网需要搜索引擎能够搜索到就用nuxt框架
SPA:
介绍:
SPA全称是 single page application (在百度百科和一些文章中使用的是 single page web application,经过一番查询了解,我觉得single page application才应该是它的全称)。
SPA是一种 网络应用程序(WebApp)模型。在传统的网站中,不同的页面之间的切换都是直接从服务器加载一整个新的页面,而在SPA这个模型中,是通过动态地重写页面的部分与用户交互,而避免了过多的数据交换,响应速度自然相对更高。
应常见SPA框架:AngularJS、React、Vue.js的(vue-cli)
优点:
1.页面之间的切换非常快
2.一定程度上减少了后端服务器的压力(不用管页面逻辑和渲染)
3.后端程序只需要提供API,完全不用管客户端到底是Web界面还是手机等
缺点:
1.首屏打开速度很慢,因为用户首次加载需要先下载SPA框架及应用程序的代码,然后再渲染页面。
2.不利于SEO(粗暴理解:不能被爬虫趴取数据)
SEO:
介绍:
SEO(Search Engine Optimization),中文一般译作:搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则(如何抓取网站页面,如何索引以及如何根据特定的关键字展现搜索结果排序等)来调整网站,以提高该网站在搜索引擎中某些关键词的搜索结果排名。
粗暴理解:能够被搜索引擎根据关键字进行搜索、能够使爬虫爬取数据、一种搜索引擎运作规则
SSR:
介绍:
SSR是 Server-Side Rendering(服务器端渲染)的缩写,在普通的SPA中,一般是将框架及网站页面代码发送到浏览器,然后在浏览器中生成和操作DOM(这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因),但其实也可以将SPA应用打包到服务器上,在服务器上渲染出HTML,发送到浏览器,这样的HTML页面还不具备交互能力,所以还需要与SPA框架配合,在浏览器上“混合”成可交互的应用程序。所以,只要能合理地运用SSR技术,不仅能一定程度上解决首屏慢的问题,还能获得更好的SEO。
常见框架:React的Next、Vue.js的Nuxt
优点:
1.更快的响应时间,不用等待所有的JS都下载完成,浏览器便能显示比较完整的页面了。
2.更好的SSR,我们可以将SEO的关键信息直接在后台就渲染成HTML,而保证搜索引擎的爬虫都能爬取到关键数据。
缺点:
1.相对于仅仅需要提供静态文件的服务器,SSR中使用的渲染程序自然会占用更多的CPU和内存资源
2.一些常用的浏览器API可能无法正常使用,比如window、docment和alert等,如果使用的话需要对运行的 环境加以判断
3.开发调试会有一些麻烦,因为涉及了浏览器及服务器,对于SPA的一些组件的生命周期的管理会变得复杂
4.可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。
内容取自:想查看更详细内容 前往=> 浅谈SPA、SEO、SSR
铛铛铛!!!
如果想把现有的项目转成nuxt项目,可以查看此博客 Vue现有项目改造为Nuxt项目,本人没有试过,不过看过程应该会有帮助。
鄙人第一次了解这些东西,只能先简单粗暴的理解下,不准确的还请各位少侠下方留言~