服务器端还是客户端 {{mustache}}？答案

【问题标题】：Server-side or client-side {{mustache}}?服务器端还是客户端 {{mustache}}？
【发布时间】：2014-04-04 21:38:17
【问题描述】：

{{mustache}} 在我看来是一个很棒的模板库。我面临的问题是在客户端还是在服务器端使用它。

我正在开发一个在线杂志，其主页将包含一篇大文章，其余文章在下方。

例如

+-------------------------------------------------+
|                                                 |
|             Big Article Image                   |
|                                                 |
|                                                 |
+-------------------------------------------------+
     Title
     Author

+------------+     +------------+     +-----------+
|   Image    |     |   Image    |     |   Image   |
+------------+     +------------+     +-----------+
  Title               Title              Title
  Author              Author             Author
...

服务器端选项

在服务器端使用{{mustache}}，作为PHP库：当浏览器请求页面时，服务器将完成模板并将其发送回来。
优点：

加载时间会更好。浏览器一旦收到 html 代码，就会知道它必须向服务器请求哪些其他资源。

缺点：

很难与客户端{{mustache}}集成，因为在解析模板时，所有不匹配的“mustache-tags”都会被删除（我不知道这是否可以轻松干净地避免） .
我不喜欢从服务器端修改接口，我宁愿从客户端修改，因此 3 层架构看起来更清晰（您可能对此有所不同）。
我之前没有使用服务器端 {{mustache}} 的经验。

客户端选项

我通常使用ICanHas.js，而不是普通的{{mustache}}，它包装了{{mustache}}，使它非常容易和舒适：当浏览器请求页面时，发送HTML，包含所有js向服务器询问 JSON 的代码，其中包含图像的标题、作者和文件名。
优点：

增强 3 层架构。
无限滚动（其他 ajax 的东西）之类的东西添加起来非常简单。

缺点：

加载时间变长了。浏览器需要接收代码，发出 JSON 请求，然后向服务器询问在该 JSON 中发现的资源（如图像文件名）。

问题

根据您的经验，您认为哪一个是最佳解决方案？为什么？

【问题讨论】：

标签： web architecture mustache mustache.php

【解决方案1】：

我想对您的优缺点补充几点。

客户端模板比服务器端更容易出错

使用各种浏览器、版本、设备和安全设置，事情很快就会变得一团糟。您在页面上拥有的 javascript 和客户端模板越多，您就越有可能让一些用户得到一个搞砸的页面。例如，想想 IE 默认的兼容性设置，很痛苦。使用服务器端模板，您只需检查一次即可。

客户端模板通常比服务器端更难调试

首先，当客户端在浏览器中出现错误时，您通常不会注意到它，除非您有一些报告系统。然后，您会收到一些神秘的单行错误消息。另一方面，在服务器端，您可以自动监控错误并在发生错误的地方提供良好的堆栈跟踪。 Sweet ...节省了大量时间。

使用服务器端模板可能会更好的 SEO

机器人可以直接准确地解析静态或服务器生成的页面。对于充满客户端模板的页面，我真的不知道你会得到什么，因此索引可能会受到影响。

使用服务器端模板加载时间更快

特别是对于低端手机，客户端模板可能会产生显着差异。特别是如果您必须在页面加载后的第二步中获取数据。这些小型设备上的 Ajax + 渲染会增加一点延迟。在服务器端，另一端有缓存，你很快。

也就是说，尽管有种种缺点，客户端模板还是有其目的

具有交互性和双向数据绑定的客户端模板规则

通常对于 RIA（富 Internet 应用程序），您以非常交互的方式读取/编辑/浏览数据，客户端模板可以非常方便。它成为一个单页应用程序，其中页面是有状态的，并且页面的适当部分会使用相应的数据进行更新。缺点当然是此类网站更难开发、维护且更容易出错。

【讨论】：

很好的答案。这两方面我都做了很多，但只将客户端用于交互方面。服务器端通常也可以用更少的代码行来完成。

【解决方案2】：

对于交互式和复杂的用户界面，利用浏览器进行模板渲染是有意义的。但是在您的情况下，听起来您的页面是相当静态的，因此归结为您更愿意花更多时间在服务器端还是客户端编码？

请注意，在客户端呈现内容会对 SEO 产生影响。有一些解决方案和技术可以克服这个问题，但请确保您了解动态生成的内容和搜索引擎的影响。

在客户端呈现时，如果您请求模板和 JSON，那是两个额外的 HTTP 请求，这肯定会降低用户体验。但是，您可以在服务器的初始页面加载中预加载模板甚至 JSON，从而使事情变得更快，例如：

<?php
$data = [ 'title': 'foo', 'content': 'lorem' ];
?>

<script id="tplArticle" type="text/template">
  <h1>{{title}}</h1>
  <p>{{content}}</p>
</script>

<div id="main"></div>

<script>
  var data = <?php echp json_encode($data) ?>
  var template = $('#tplArticle').html();
  var html = Mustache.to_html(template, data);
  $('#main').html(html);
</script>

这是一个 PHP 文件的粗略示例，它在从服务器加载第一个页面时输出模板和 JSON，而 Javascript 在客户端呈现数据和模板，无需任何额外的 HTTP 请求。

【讨论】：