在服务器和客户端上渲染Backbone.js应用程序

假设我有一个使用Backbone.js和Handlebars构build的Web应用程序。 作为服务器,我正在使用Node.js. 现在我想在两端进行渲染,即在服务器和客户端上。

当第一次请求路由时,服务器应该进行渲染(主要是由于性能原因)。 之后,以下所有操作都将导致客户端呈现。

这意味着我必须能够以完全相同的方式在客户端和服务器上呈现任何页面。 两端必须支持相同的路线。

我怎么能完成这个任务?

目前,我已经看到了AirBnb的rendr项目,但是这绝对会把我和Backbone.js联系起来(我不确定是否要一直坚持使用Backbone.js),而且似乎还没有完美的完成然而。 AirBnb至less不推荐用于生产用途。

任何其他想法如何做到这一点?

作为一个子问题,我也许会问:在服务器和客户端之间共享JavaScript代码的首选方式是什么? 为此,我也知道,但我可以想象,可能有更好的解决scheme。

任何提示?

那么,我正在构build一个这样的应用程序。 如果你不想使用rendr ,你将不得不编写你自己的一些他们照顾的东西的版本。 AFAIK目前你的select是Rendr或本土。 这里有一些其他的提示。

  • 我们使用cheerio进行服务器端DOM操作,所以当在服务器上呈现视图时, this.$el是一个cheerio元素实例。 在浏览器中,它是jQuery。
  • 您不需要在服务器端进行事件委托和绑定。 我们的代码技术上目前这样做,但它是毫无意义的,一个更干净的解决scheme将避免在服务器上
  • 一旦在浏览器中使用了服务器呈现的HTML,您需要一种方法将大型嵌套的视图实例树连接到大型嵌套DOM树中的相应元素。 我们有一个本土的解决scheme,但Backbone.View.setElement是核心,你需要编写一些代码来实现这一点
  • 我们现在正在浏览器上重新渲染,尽pipe可能有一个很好的方法来获取视图实例,在构造函数中给它一些选项,包括预渲染的DOM节点,并且在没有重新渲染的情况下正确连接东西。 不过这是对读者的一个练习。 🙂
  • 我们还在<script>标签内发送了我们需要的原始数据作为JSON,所以我们既有服务器呈现的HTML(用于感知性能),也有以JSONforms提供的原始数据,以便我们可以使我们的骨干模型和视图实例化并运行。 再次,你将不得不拿出一些代码来处理这种情况。
  • 我们使用browserify在服务器和浏览器之间捆绑和共享代码。 我们所有的JavaScript被编码为CommonJS模块。
  • 我们在视图父类中有一个基本的isBrowser()函数,所以我们知道何时只有浏览器的代码才能运行事件绑定等。

无论如何,在这样的方式上工作了好几个月之后,我认为骨干在这个范例中运作得并不好。 骨干的许多核心概念都很好,但是它并不适合将视图实例映射到预渲染的DOM节点。 从JSON引导模型和集合更容易,但视图层可能需要一个重要的叉子来干净地操作这种风格。