构建服务于HTML服务器端的HTML客户端VS？

Question

我总是觉得很难决定是应该渲染我的HTML服务器端还是构建它是客户端的。

我想说我想呈现一个动态HTML下拉列表，其中包含以下要求：

• 在页面加载时显示数据库表中的记录
• 必须保持最新（用户可以使用网站在数据库表中添加/删除记录）

我不能在

之间做出决定

选项1

1. 使用空下拉服务器端呈现模板
2. 使用ajax请求（JSON）填充下拉客户端
3. 使用ajax请求（JSON）更新下拉客户端

关注：在填充之前渲染空元素让我觉得难看

选项2

1. 渲染已填充的下拉列表服务器端
2. 使用ajax请求（JSON）更新下拉客户端

关注：如果您仍然在客户端更新它，为什么要渲染服务器端？

Web开发中更常用的解决方案是什么？随意分享不同的方法。

Answer 1

您的疑虑是有效的，每个案例都有其优点和缺点，如您所述。

我个人会采用第一种方法（所有客户端）;主要用于代码可维护性。使用这种方法，您只需更新HTML客户端而不是客户端和服务器端。

但是，有一个论点是通过服务器端保存一个请求来呈现值。即使它可能无关紧要，但仍有一个小的性能优化。

Answer 2

这是一个小意见基础。服务器端有学校，客户端有其他学校。后者的主要原因是利用客户机（免费为您）释放服务器资源（您支付的费用）。这也使您的应用程序更具可扩展性。

您提供的示例不够详细，而且只是一个方面。我通常使用这些一般规则：

如果您的页面有动态部分（例如下拉列表，网格，弹出窗体等），我使用Ajax来避免重新加载整个页面。

如果HTML非常简单和/或需要在客户端进行进一步处理，那么只需从服务器发送JSON数据并在客户端构建HTML。例如，我通常不会从服务器发送错误消息。相反，我只发送状态代码（例如成功，AccessDenied，错误等...），我检查客户端上的代码并显示相关的消息。当不同的消息以不同的颜色和样式显示或包含其他HTML标记（如链接）时，此功能特别有用。

如果它是一个复杂的弹出窗体或数据网格，那么我从服务器发送HTML。在服务器上构建复杂的HTML通常更容易，也更灵活。此外，当存在用于构建HTML的敏感信息时，在服务器上构建它通常要容易得多，否则您必须从服务器发送一些标记，或者更好的是，您需要拆分HTML构建过程部分取决于权限。

至于你问题中的那个非常具体的例子，我会采用第一种方法（所有客户端），主要是针对DRY概念（不要重复自己）。你不希望让两段代码做同样的事情，并且每次你需要改变时都要记得更新它们。

但请注意，如果您不喜欢，则不必发送空的下拉列表。您可以实际重建整个下拉列表，而不仅仅是像您的示例所示更新选项。我并不特别喜欢这种方法，特别是如果事件监听器和其他引用附加到下拉列表中，但我只是想说其他方法。此方法在某些情况下非常有用，尤其是如果下拉列表是页面较大部分的一部分，整个部分每次都需要更新（重建），在这种情况下，我通常选择从服务器发送HTML。

Answer 3

这取决于。你在担心SEO吗？

您使用的是任何类型的客户端框架吗？我会假设你没有，因为JavaScript框架有自己的方法来做到这一点，如果你想要你可以阅读更多关于angular / react / vuejs的信息，这是解决这个问题的最热门的JavaScript框架。 / p>

客户端框架仅在客户端呈现HTML，并仅使用Ajax API从服务器接收数据。

但是如果你不想使用任何客户端框架并在＆＃34; classic＆＃34;方式，两种方式都赞赏。我倾向于喜欢第一种方式，这几乎就是客户端框架如何做到并且最有意义，是的，你渲染空表，但你只渲染＆＃34;容器＆＃34;您的数据，如果您对它的外观（在获取数据前显示空列表）感到困扰，您只需显示加载栏或隐藏表格直到获取数据。