首页 > web前后端分离中,大前端具体如何实现?

web前后端分离中,大前端具体如何实现?


node层还可以做很多~


恩,基本上,我明白我的问题所在了,我说下吧。

后端为每个需要抓取的页面创建对应的纯HTML静态页面,
网站页面中的链接href属性设置为后端生成的静态页链接, 前端通过JS按照规则解析出获取数据的URL进行AJAX请求.
例如: 网站某房源详情链接:<a href="/house/6734/detail">某某大学附近别墅</a>
搜索引擎 会抓取到http://www.uhouzz.com/house/6734/detail这个后台生成的静态页面
前端 会根据href属性ajax请求http://www.uhouzz.com/house/6734/detail?_pjax=truehttp://www.uhouzz.com/_pjax/house/6734/detail, 然后把返回的数据渲染到页面中.
目前GitHub,Twitter等网站都在使用PJAX方案.该方案可行, 但前端&后端工作量都比较大.

目前国外有很多针对SPA单页面网站的SEO服务, 如Prerender.io(官网可能需翻墙)
SEO服务技术原理:
当一个搜索引擎的爬虫访问你的应用程序并且看到<meta name="fragment" content="!">时,它会在你的URL中添加一个?_escaped_fragment_=tag
服务器拦截这个请求,并把它发送给Prerender.io处理这个特殊的爬虫请求。Prerender.io会检查请求的页面是否有一个现存的快照(或者缓存的页面),如果有,它会将这个页面响应给爬虫,如果没有,他会调用PhantomJS来渲染这个完整页面,并将它响应给爬虫。
目前国内饿了么网站就是使用的该服务.国外也有很多成功案例. Prerender.io目前是根据页面数量收费的, 250个页面以内免费,
2万个页面以内$20/月. 具体收费方案

目前Prerender.io官方提供部署Node.js环境的解决方案, 也就是说如果采用此方案,我们需要有支持Node.js的服务器作为网站SEO服务. 另外, 也有第三方开发的支持PHP环境的解决方案可供选择.

优点:

可以跨项目且可以复用, 未来Webapp也可以使用, 且后期工作量极小. 该服务有自己的dashboard,
可以汇总查看有哪些搜索引擎的爬虫抓去了哪些页面的数据. 如果使用Node.js服务, SEO的工作就无需后端同事配合, 仅需前端即可搞定.
缺点: 收费.

恩,希望有更加好的SPA方案吧,目前的SPA可能也就是用Pjax来进行针对性SEO,让需要被搜索的进行静态化输出给搜索引擎,也许上面这些也是为什么SPA没那么快发展普及的原因吧,实施起来不是那么快捷方便,希望能有更好的答案!

【热门文章】
【热门文章】