【问题标题】：Building HTML client-side VS serving HTML server-side?构建 HTML 客户端 VS 服务 HTML 服务器端？
【发布时间】：2018-01-01 16:14:31
【问题描述】：

我总是很难决定是在服务器端呈现 HTML 还是在客户端构建它。

假设我想呈现一个具有以下要求的动态 HTML 下拉列表：

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

我无法决定

选项 1

使用空下拉服务器端呈现模板
使用 ajax 请求 (JSON) 填充下拉客户端
使用 ajax 请求 (JSON) 更新下拉客户端

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

选项 2

在服务器端呈现填充的下拉列表
使用 ajax 请求 (JSON) 更新下拉客户端

关注点：如果你还在客户端更新，为什么还要渲染服务器端？

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

【问题讨论】：

这不是基于意见吗？
我正在寻找更常用的方法。我不是在征求你的意见，对吧？
你永远不能在服务器上渲染 HTML，它总是在客户端上。您的意思可能是 generate HTML，或 build HTML。
@RacilHilan 是的，你是对的。 'render' 基本上是对 Django render 函数的间接引用，它是一个服务器端函数。很抱歉让您感到困惑:)
你的问题很清楚，没有混淆。使用正确的术语仍然很好。然而，在 HTML 的情况下，几种（可能是全部？）其他语言也有类似的功能，名为reneder。我不知道他们为什么使用这个词，可能它听起来比 build 或 generate 更好:)。或者可能是对 将 HTML 发送到客户端进行渲染 的一种隐式引用 :)。但是如果你把计算机文献作为一个整体来看，render这个词通常与显示相关联（例如在屏幕上渲染图形）。不过，我并没有挂断电话，您的问题很清楚。

标签： javascript html server-side client-side

【解决方案1】：

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

你举的例子不够详细，只是一方面。我通常使用这些一般规则：

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

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

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

至于您问题中的那个非常具体的示例，我将采用第一种方法（所有客户端），主要针对 DRY 概念（不要重复自己）。您不想让两段代码做完全相同的事情，并且必须记住每次需要更改时都更新。

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

【讨论】：

如果“简单”下拉列表包含 100 个数据库值，您会怎么做？提供空下拉列表的 HTML 并在客户端填充它，还是在页面加载时构建整个下拉客户端？
这真的不清楚。这 100 个值是如何提供的？我希望你不是在谈论一次显示 100 个值。

【解决方案2】：

您的担忧是有道理的，正如您所提到的，每种情况都有其优点和缺点。

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

但是，有一个参数可以通过服务器端呈现值来保存该请求。即使它可能微不足道，也有一个小的性能优化。

【讨论】：

我复制了你的第二句话，但后来发现你用错了顺序。我想你的意思是说 first not *second 方法，对吧？我为你更正了，但如果我错了，你可以回滚。
对于客户端，您的意思是从服务器发送 json 并将客户端上的 json 转换为 html？

【解决方案3】：

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

您是否使用任何类型的客户端框架？我假设你不知道，因为 JavaScript 框架有自己的方法来做到这一点，如果你愿意，你可以阅读更多关于 angular/react/vuejs 的信息，这是当时最热门的 JavaScript 框架，可以解决这个问题。

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

但是，如果您不想使用任何客户端框架并以“经典”方式进行操作，那么两种方式都值得赞赏。我倾向于喜欢第一种方式，这几乎是客户端框架的做法，也是最有意义的，是的，您渲染空表，但您只渲染数据的“容器”，如果您对它的外观感到困扰视觉上（在获取数据之前显示空列表）您可以只显示加载栏或隐藏表格直到获取数据。

【讨论】：

最后一段的第二部分不是可选的*如果您对它的外观感到困扰*，它几乎是强制性的:)。强烈建议所有 Ajax 调用都显示某种“等待”动画。 +1 提及它。