前端框架、SPA、SSR与SEO那些事
发布于 分类 网络营销
更新于 2020-07-02
1天前 有1个用户阅读过
越来越多的前端框架进入开发者们的视野,网站的前后分离架构越来越得到开发者们的喜爱与认可。 后端只提供数据接口、业务逻辑与持久化服务,而视图、控制与渲染则交给前端。 因此,越来越多的网站从后端渲染变成了前端渲染,而由此带来的直接问题就是各大搜索引擎爬虫对于前端渲染的页面( 动态内容 )还无法比较完善的爬取,这就导致了网站的内容无法被搜索引擎收录,直接影响网站流量与曝光度。
SPA全称是 single page application ,SPA是一种 网络应用程序(WebApp)模型。在传统的网站中,不同的页面之间的切换都是直接从服务器加载一整个新的页面,而在SPA这个模型中,是通过动态地重写页面的部分与用户交互,而避免了过多的数据交换,响应速度自然相对更高。
目前常见的几个SPA框架
AngularJS
React
Vue.js
SSR是 Server-Side Rendering(服务器端渲染)的缩写,在普通的SPA中,一般是将框架及网站页面代码发送到浏览器,然后在浏览器中生成和操作DOM(这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因),但其实也可以将SPA应用打包到服务器上,在服务器上渲染出HTML,发送到浏览器,这样的HTML页面还不具备交互能力,所以还需要与SPA框架配合,在浏览器上"混合"成可交互的应用程序。所以,只要能合理地运用SSR技术,不仅能一定程度上解决首屏慢的问题,还能获得更好的SEO。
本文仅整理基本概念以便初步了解,更多详情请自行Google。
补充:
VUE大佬尤雨溪观点:
我就说一点,用 Vue 不代表你一定要做成 SPA。现在有些人提起 Vue 就好像一定要 CLI 全家桶,其实 Vue 从一开始就一直很注重对后端渲染的应用做渐进增强的用例,现在欧美也有很多的开发者拿 Vue 直接替代 jQuery 做常见的交互增强。
对于真正适合做成 SPA 的应用,SEO 反而通常不是问题。你针对 marketing 的页面应该是静态分开部署的,app 本身则要登陆才能用,SEO 没有什么意义。
少数既需要 SPA 强交互性,又对 SEO 和首屏速度有刚性需求的场景,这时候同构 SSR 就派上用场了。
-- The End --