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

Question

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

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

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

我怎样才能完成这个任务？

目前，我已经查看了 AirBnb 的 rendr项目，但这肯定将我与 Backbone.js 联系在一起(我不确定我是否想一直坚持使用 Backbone.js)，而且似乎还没有完美完成。至少，AirBnb 还不推荐将其用于生产用途。

关于如何做到这一点还有其他想法吗？

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

有什么提示吗？

Answer 1

好吧，我正在构建一个执行此操作的应用程序。如果你不想使用 rendr ，你将不得不为他们处理的一些事情编写你自己的版本。 AFAIK 目前您的选择是 rendr 或 home-grown。这里有一些杂项提示。

• 我们使用 cheerio用于服务器端 DOM 操作，因此当 View 在服务器上呈现时，this.$el是一个 cheerio 元素实例。在浏览器中，它是 jQuery。
• 您不需要在服务器端进行事件委托(delegate)和绑定(bind)。目前，我们的代码在技术上可以做到这一点，但这是毫无意义的，更简洁的解决方案会在服务器上避免它
• 在浏览器中拥有服务器呈现的 HTML 后，您需要一种方法将 View 实例的大嵌套树连接到大嵌套 DOM 树中的相应元素。我们有一个本土解决方案，但是 Backbone.View.setElement是核心，您需要编写一些代码来实现这一点
• 我们目前正在浏览器上重新渲染，尽管可能有一种更灵活的方法来获取 View 实例，在构造函数中为其提供一些选项，包括预渲染的 DOM Node ，并在不重新渲染的情况下正确连接渲染。不过，这对读者来说是一个练习。 :-)
• 我们还在 <script> 中以 JSON 形式发送我们需要的原始数据标签，这样我们就有了服务器呈现的 HTML(用于感知性能)和作为 JSON 可用的原始数据，这样我们就可以让我们的主干模型和 View 实例化和运行。同样，您必须想出一些代码来处理这种情况。
• 我们使用 browserify在服务器和浏览器之间捆绑和共享代码。我们所有的 JavaScript 都被编码为 CommonJS 模块。
• 我们有一个基本的 isBrowser()在我们的 View 父类中运行函数，这样我们就知道何时应该为事件绑定(bind)等运行仅限浏览器的代码。

无论如何，不​​管怎样，在以这种方式工作了好几个月之后，我认为 backbone 不能很好地适应这种范式。 backbone 的许多核心概念都很好，但它不适合将 View 实例映射到预渲染的 DOM Node 。从 JSON 引导模型和集合更容易，但 View 层可能需要一个重要的分支才能以这种方式干净地运行。