客户端HTML MVC呈现与通过NodeJS的服务器端重新发送

Question

我们正在寻找我们团队的选项来决定基于Angular的客户端MVC方法和服务器端NodeJS/ExpressJS服务器端渲染方法.

我们的Angular应用程序作为一个index.html下载,并使XHR请求填充页面.由于我们需要预呈现页面,因此当内容更改为服务器上的某个位置时,我们使用PhantomJS保存每个页面的副本.这允许支持SEO.

是否存在任何全页主干应用程序或角度应用程序的示例,人们可以指出这些应用程序以便我们查看其他人是否正在这样做.

或者是我们可以在野外看到的NodeJS服务器端呈现应用程序的示例.

最后有没有人对这种架构有意见？

Answer 1

我一直致力于服务器渲染和大多数客户端渲染应用程序.每种类型都有自己的优点和缺点.然而,你必须在一个或另一个之间做出选择的想法是错误的二分法.如果你有资源,你可以将两者结合起来,以获得两全其美的效果.

我看到纯粹的客户端框架有4个主要挑战:

• SEO和分析
• 高速缓存
• 记忆
• 潜伏

SEO

因为您使用的是Node.JS,所以只需使用服务器上的客户端框架输出googlebot和company的静态页面,就可以减轻SEO问题.最近,Google为单页应用程序制作了一个很好的Analytics API,但这比简单地在主模板的末尾添加几行更多.

高速缓存

缓存是加速任何Web应用程序的重要方法.对于少量数据,可以更快地将数据缓存在客户端的内存或localStorage中,但存储空间非常有限(目前约为5MB).加上缓存失效在localStorage中很难实现.

记忆

记忆是我为俯视而付出的代价.在我知道它之前,我意外地制作了一个占用超过200MB RAM的应用程序.我可能能够通过优化将其降低到一半,但我怀疑如果我在服务器上全部渲染它,它将花费超过20 MB.

潜伏

延迟也很容易错过.例如,Drupal为每个页面运行大约50到100个SQL查询.当数据库服务器就在应用程序服务器旁边时,您不必担心延迟,所有这些查询都可以在不到几百毫秒的时间内执行.您的客户端应用程序通常需要一百毫秒才能发出一个AJAX请求.这意味着您需要花费大量时间来设计服务器端API以最大限度地减少这些往返次数,但此时服务器已经拥有了生成HTML所需的所有数据.如果你不小心,拥有一个与正确RESTful接口对话的客户端应用程序可能会变得非常缓慢.

37 Signals最近发表了关于他们为新版Basecamp实现的混合客户端/服务器架构的博客.这种混合方法使用服务器来呈现HTML,但在客户端上利用类似PJAX的东西来摆脱整页刷新.效果非常快,是我推荐的.

Answer 2

使用服务器上的node.js,原则上您可以使用相同的代码在客户端和服务器上呈现.实现此方法的框架是Meteor和Derby,它们还在客户端和服务器之间进行数据模型的透明同步.尽管两者仍然被认为是阿尔法,但似乎已经很好地工作.

同时,客户端和服务器端呈现都有利有弊:

• 客户端呈现的缺点是初始页面加载需要很长时间,但是一旦加载了所有资源,用户就可以无需页面无缝地导航站点.您可能希望最小化Ajax调用的数量和/或使用客户端缓存(例如Angular.js控制器中的缓存数据).
• 服务器端呈现提供了快速的初始页面加载,并且适用于SEO,但每次用户导航时,整个页面在加载新URL时会变为空白一秒钟.

所以这一切都取决于你是想要一个快速的初始页面加载,但不希望用户保持这么长时间(然后使用服务器端渲染)或者页面加载速度并不重要(如在Gmail中),但用户将导航很长时间(然后使用客户端渲染).

Answer 3

我们正在测试这个疯狂的方法:我们有在客户端运行的angularJS应用程序.当我们将Googlebot检测为代理时,我们运行PhantomJS实例并使用其输出响应爬虫.棘手的部分是知道您的客户端应用程序何时完成加载,以便您可以选择并返回它.如果您比加载客户端JS应用程序更快地执行此操作,则爬网程序将不会获得大量数据,主要是index.html.

可以在这里找到简单的实现:http: //pastebin.com/N3w2iyr8

更新:在我写的最原始的答案的时候,没有像prerendr.io存在,但我能指出它现在.