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

  • 前后端分离实践中,让nodejs单独作为页面模板渲染来用,但具体是怎么用,怎么和前端MVVM的框架结合用,如何进行共享路由?

  • 淘宝提到了xTemplate的意思是在Node层获取了数据后直接用xTemplate进行页面模板渲染吗?那前端MVVM框架就不用路由了还是怎么说?

  • 最好有个具体的代码实例

  • 如果后端也用Nodejs,单独写api也感觉有点怪怪的

  • 我现在在用vuejs和vue-router

  • 很是困惑,感谢感谢

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

  • 首先,我把两个问题混在一起了,这点非常抱歉,我在看几篇关于web前后端分离的演进史时,在最后面的两个阶段,即ajax到最后的node分层模式的演变,我误以为最后是实现了一套完美解决SPA以及SEO的web前后端分离方案,但其实并不是的,这个是我思维出错的关键点;

    • 文章1 web 演进史https://github.com/lifesinger/lifesinger.github.io/issues/184

  • 其实,web前后端分离的一系列文章中最后一个阶段,并没有说SPA应用的事情,依旧是在做全局刷新的web应用,所以其具体实现方式就是在nodejs上获取来自后端的API数据,在node上用以往的后端方式渲染模板,输出HTML,这样子前端就是负责从node渲染模板开始的前端,后端就是负责后端api,由于结果仍然输出为HTML,自然解决了SEO的问题,同时实现前后端完全分离;

  • 自然,我是希望能有一套完美的实现SPA的方案的,不过暂时我不知道吧,目前的SPA应用为了实现SEO,从小伙伴那得知有两个方案:

  • 1.使用Pjax技术

后端为每个需要抓取的页面创建对应的纯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方案.该方案可行, 但前端&后端工作量都比较大.

  • 2.使用SEO服务

目前国外有很多针对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没那么快发展普及的原因吧,实施起来不是那么快捷方便,希望能有更好的答案!

node层还可以做很多~

发表评论

电子邮件地址不会被公开。 必填项已用*标注