服务器端或客户端{{mustache}}？

Question

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

我正在开发一个在线杂志，它将有一个主要页面，其中包含一篇大文章，其余文章的篇幅较小。

例如

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

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

---

服务器端选项

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

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

缺点：

• 很难与客户端{{mustache}}集成，因为在解析模板时，所有未匹配的“mustache-tags”都会被删除（我不知道是否可以轻松，干净地避免这种情况）。
• 我不喜欢从服务器端修改接口，我宁愿从客户端进行，因此3层架构似乎更清晰（你可能会有所不同）。
• 我以前没有服务器端{{mustache}} 。

客户端选项

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

• 增强3层架构。
• 像无限滚动（其他ajax的东西）这样的事情非常简单。

缺点：

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

---

题

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

Answer 1

我想补充几点你的利弊。

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

对于所有类型的浏览器，版本，设备和安全设置，事情很快就会搞砸。 您在页面上拥有的javascript和客户端模板越多，您就越有可能让某些用户获得搞砸的页面。 例如，考虑IE默认兼容性设置，这很痛苦。 使用服务器端模板，您只需检查一次并感到高兴。

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

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

可能更好的SEO与服务器端模板

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

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

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

---

尽管如此，尽管存在所有缺点，客户端模板仍有其目的

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

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

Answer 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请求。