web前后端分离中，大前端具体如何实现？

Question

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

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

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

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

• 我现在在用vuejs和vue-router

• 很是困惑，感谢感谢

Answer 1

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

• 首先，我把两个问题混在一起了，这点非常抱歉，我在看几篇关于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=true或http://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没那么快发展普及的原因吧，实施起来不是那么快捷方便，希望能有更好的答案！

Answer 2

node层还可以做很多～