在服务器端或客户端构建网页？答案

【问题标题】：Building web pages on the server-side or client-side?在服务器端或客户端构建网页？
【发布时间】：2023-03-22 00:05:02
【问题描述】：

我一直想知道如何在使用服务器端代码和客户端代码构建 HTML 页面之间做出选择。我将使用一个非常简单的 php vs javascript/jquery 示例来进一步解释我的问题。非常感谢您的建议和评论。

假设我要向用户展示一个网页，以便在我的网页中选择一种报告类型。哪个更有意义？

对于服务器端创建，我会这样做：

<div id="reportChoices">

<?php
// filename: reportScreen.php
// just for the sake of simplicity, say a database returns the following rows 
// that indicates the type of reports that are available:

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

foreach ($results AS $data)
    echo "<input type='radio' name='reportType' value='{$data['htmlID']}'/>{$data['htmlLabel']}";
?>

</div>

使用客户端代码，我会得到 javascript 来构建页面，如下所示：

<!-- filename: reportScreen.html -->
<div id="reportChoices">
</div>

<!-- I could put this in the document.ready handler, of course -->
<script type="text/javascript">
$.getJSON("rt.php", {}, function(data) {
 var mainDiv = $("#reportChoices");
 $.each(data, function(idx, jsonData) {
  var newInput = $(document.createElement('input'));

  newInput
   .attr("type", "radio")
   .attr("name", "reportType")
   .attr("value", jsonData["htmlID"])

  mainDiv.append(newInput).append(jsonData["htmlLabel"]);
 });
};
</script>

我在服务器上只需要一个数据转储 php 脚本，例如：

<?php
// filename: rt.php
// again, let's assume something like this was returned from the db regarding available report types

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

echo json_encode($results);
?>

这是一个非常简单的例子，但从这个例子中，我看到了不同领域的利弊。

1 - 服务器端解决方案的优势在于能够将大部分实际编程逻辑隐藏在所有内容的构建方式背后。当用户查看页面源时，他们看到的只是已经构建的网页。换句话说，客户端解决方案会泄露您的所有源代码和编程逻辑，以了解某些事物是如何构建的。但是你可以使用缩小器让你的源代码看起来更神秘。

2 - 客户端解决方案将“资源负载”转移到客户端系统（即浏览器需要使用客户端的计算机资源来构建大部分页面）而服务器端解决方案陷入困境，好吧，服务器.

3 - 在可维护性和可读性方面，客户端解决方案可能更优雅。但话又说回来，我可以使用 php 库来模块化 HTML 控件并使其更具可读性。

有没有cmets？提前致谢。

【问题讨论】：

标签： php json client-side server-side

【解决方案1】：

Con（客户端解决方案）：客户端解决方案依赖于客户端来正确执行您的代码。由于您无法控制哪个客户端系统将执行您的代码，因此很难确保它始终如一地提供与服务器端解决方案相同的结果。

这个特殊问题似乎并不真正需要客户端解决方案，是吗？我会坚持使用服务器端解决方案。唯一的额外工作是一个foreach 循环和一个echo，这并不是真的那么资源繁重（除非你已经对其进行了分析并且知道它是）？并且生成的代码都在一个地方并且更简单。

【讨论】：

【解决方案2】：

通常情况下，最好不要依赖客户端上启用的 Javascript。此外，您的页面不会被大多数搜索引擎抓取。您还公开有关您的服务器/服务器端代码的信息（除非您明确抽象它）。

如果您想将数据转换为视图，您可能想看看 XSLT。如果您还没有阅读，另一件需要阅读的事情是渐进增强。

http://alistapart.com/articles/understandingprogressiveenhancement/

在您介绍的第一个客户端解决方案中，它实际上效率较低，因为有一个额外的 HTTP 请求。而第二种可能效率也不高，所有数据都必须用json_encode处理。

但是，如果您正在开发的是一个依赖 Javascript 的富 Web 应用程序，那么如果您愿意，我认为使用 Javascript 做任何事情都没有问题。

【讨论】：

实际上，Google 在索引 JS 内容方面迈出了一大步。参见例如googlewebmastercentral.blogspot.com/2007/11/…

【解决方案3】：

我怀疑将报告生成移到客户端是否真的可以节省任何资源 - 请记住，它仍在向您的 (?) 服务器发出 HTTP 请求，因此数据库处理仍然完成。

此外，在客户端泄露您的数据库架构可能会导致数据库攻击。

也许您应该使用模型-视图-控制器模式将业务逻辑与服务器上的表示分离？至少这将所有代码保存在一个地方，但仍然可以让您在逻辑上分离组件。如果这听起来对您有用，请查看 Zend Framework 之类的东西。

【讨论】：

【解决方案4】：

您可以通过在客户端构建它来保持更好的关注点分离，但是如果要加载很多内容，这可能会以牺牲用户体验为代价（另外您必须考虑 FrustratedWithForms 提到的内容）。对我来说，在服务器端构建它更容易，这意味着如果你在严格的时间表上，它会成为一个更理想的选择，但要根据你的技能来决定。

【讨论】：