我总是觉得很难决定是应该渲染我的HTML服务器端还是构建它的客户端。
假设我想呈现具有以下要求的动态HTML下拉列表：
我无法决定
关注：在填充之前渲染空元素对我来说感觉很难看
关注：如果你还在更新客户端，为什么要渲染服务器端？
什么解决方案在Web开发中更常用？随意分享不同的方法。
这是一个小意见基础。服务器端有学校，客户端有其他学校。后者的主要原因是利用客户机（免费为您）释放服务器资源（您支付的费用）。这也使您的应用程序更具可扩展性。
您提供的示例不够详细，而且只是一个方面。我通常使用这些一般规则：
如果页面有动态部分（例如下拉列表，网格，弹出窗体等），我使用Ajax来避免重新加载整个页面。
如果HTML非常简单和/或需要在客户端进行进一步处理，那么只需从服务器发送JSON数据并在客户端构建HTML。例如，我通常不会从服务器发送错误消息。相反，我只发送状态代码（例如成功，AccessDenied，错误等...），我检查客户端上的代码并显示相关的消息。当不同的消息以不同的颜色和样式显示或包含其他HTML标记（如链接）时，这特别有用。
如果它是一个复杂的弹出窗体或数据网格，那么我从服务器发送HTML。在服务器上构建复杂的HTML通常更容易，也更灵活。此外，当存在用于构建HTML的敏感信息时，在服务器上构建它通常要容易得多，否则您将不得不从服务器发送一些标志，或者更好的是，您需要将HTML构建过程拆分为多个部分取决于权限。
至于你问题中那个非常具体的例子，我会采用第一种方法（所有客户端），主要是干DRY概念（不要重复自己）。您不希望有两段代码执行完全相同的操作，并且必须记住每次需要更改时都更新它们。
但请注意，如果您不喜欢它，则不必发送空下拉列表。您可以实际重建整个下拉列表，而不仅仅是像您的示例所示更新选项。我并不特别喜欢这种方法，特别是如果事件监听器和其他引用附加到下拉列表中，但我只是想说其他方法。此方法在某些情况下非常有用，尤其是如果下拉列表是页面较大部分的一部分，整个部分每次都需要更新（重建），在这种情况下，我通常选择从服务器发送HTML。
您的担忧是有效的，每个案例都有其优点和缺点，如您所述。
我个人会采用第一种方法（所有客户端）;主要用于代码可维护性。使用这种方法，您只需更新HTML客户端而不是客户端和服务器端。
但是，有一个参数可以通过服务器端保存一个请求来呈现值。即使它可能无关紧要，但仍有一个小的性能优化。
那要看。你在担心SEO吗？
您使用的是任何类型的客户端框架吗？我假设你不这样做，因为JavaScript框架有自己的方法来做到这一点，如果你想要你可以阅读更多关于angular / react / vuejs的信息，这是解决这个问题的最热门的JavaScript框架。
客户端框架仅在客户端呈现HTML，并且仅使用Ajax API从服务器接收数据。
但是，如果您不想使用任何客户端框架并以“经典”方式执行，那么这两种方式都值得赞赏。我倾向于喜欢第一种方式，这几乎就是客户端框架如何做到并且最有意义，是的，你渲染空表但是你只渲染数据的“容器”，如果你对它的外观感到困扰可视化（在获取数据之前显示空列表）您可以只显示加载栏或隐藏表，直到获取数据。