AngularJS与服务器端渲染对比

Question

我的一位同事提出了一个挑战。问题是：解决我们常见的人力资源管理问题，即将人员分配到项目中。唯一的限制是我们必须使用我们都没有用过的技术来解决这个问题。因此，我们开始使用MEAN堆栈构建这个项目。到目前为止，这是一个有趣的学习经验，但这让我想起了一个问题。

在什么时候我们决定服务器端MVC渲染优于客户端MVC渲染？我们大多数与之合作的客户已经在某个地方运行了IIS实例，因此我们将使用ASP.NET MVC，显然大部分HTML渲染将在服务器端完成。即使在使用Angular和Node的情况下，HTML渲染也是在服务器端完成的。

但是，如果我们将Angular与IIS结合使用，就可以进行完全的客户端HTML渲染。其他人在何时做出使用客户端与服务器端HTML渲染的决定？移动平台上是否存在速度缓慢的问题？

社区认为每种情况的利弊如何？

谢谢您的想法！

- Wjdavis5

Answer 1

我采用了客户端和服务器之间的纯分离。我的服务器堆栈依赖于PHP（使用PDO和ph-pass）和MySQL进行持久化。在我看来，主要优点是视图/表示与服务器端逻辑的完全解耦。在我的应用程序中，PHP生成数据并将其格式化为JSON，并接受JSON格式的参数，但与显示无关（它只创建易于在前端解析的数据结构）。

在前端，我使用AngularJS，UI Bootstrap（Bootstrap的angular封装），Google Maps V3 Javascript API（封装在angular指令中），以及D3js（同样封装在angular指令中）。

我所工作过的几个网站在移动端并没有遇到任何问题...即使在前端进行一些相当重的数据处理...我在客户端代码中执行所有的过滤和一些聚合操作，以便在地图上展示可过滤标记和绘制一些图表。不幸的是，我目前提到的该应用还有一周才能上线，所以我不能提供链接。

这是我的主要网站，它不依赖于任何PHP，因此全部采用Angular： http://www.intellectual-tech.com 您还可以查看我的作品集网站和我使用AngularJS而没有服务器端代码完成的http://www.shanklandfinancial.com。尽管有一个依赖于数据库但仍在进行中的网站是http://www.eat-data.org。

最长的延迟仍然在获取初始数据时，这些数据在gzip后大约为60kb。在移动设备上，谷歌地图会拖慢速度并且CSS动画不够流畅/快速，但所有内容仍然可用。

另一个优点是，如果某个时刻我决定AngularJS不再适合，或者客户想要本地应用程序，则所有服务器端代码都可以完全重复使用，无需修改。

我唯一看到的缺点是，如果客户想要导出视图，我没有很好的方法来实现...最近我使用了PHPExcel库将数据输出为XLSX文件，但就图表等方面而言，我的服务器代码中没有那么花哨的东西，如果需要，就需要进行改进。尽管如此，我认为这并不是真正的问题，因为可以通过“打印为PDF”来获得打印友好型页面。

- shaunhusain

---

我个人非常喜欢AngularJS，但是我认为上面的回答太主观了。我一直在苦恼于服务器端渲染速度更快这个事实，除非客户端是超级计算机或浏览器对于新电脑的现代GPU功能能够突然超越服务器将演示视图与数据（HTML模板和内容）合并的能力。 - Eric Swanson

老实说，大多数“小型”甚至中等网站真的不太关心性能，所以他们可以使用任何他们想要的！如果你正在问这个问题，那么你可能会在有或没有业务驱动的情况下关心它。我能想到的与这个选择相关的最近、最大和最好记录的案例研究是Twitter从客户端切换回服务器端。 - Eric Swanson

嗨，Eric，这些都是很好的观点。老实说，出于你提到的一些原因，我感到有所顾虑，不敢以我现在的方式回答。我决定发表这个答案的原因是因为我最近非常专注于移动开发，并且有一些情况下我决定让前端做更多的工作来避免往返（因为在移动设备上这可能会非常耗时）。结果对于我的情况（小型或中型项目），即使在移动平台上，所有东西的性能表现都相当不错。话虽如此，如果我在进行企业级项目，我不会给出这个建议。 - shaunhusain

太好了！如果用户的网络IO比客户端渲染性能慢（例如在某些情况下使用移动设备），那么服务器有多快也没有用。 - Eric Swanson

我刚刚访问了http://www.shanklandfinancial.com并关闭了JavaScript。 我看到了一个空白页面。 这是当Google尝试使用其机器人访问您的网页时看到它的方式。 我可以看到一些源代码，但实际内容无处可见。 这是一个重大问题。 - SynackSA