Question

在我看来，

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

我正在开发一个在线杂志，主页上有一篇大文章，其余文章的篇幅较小。

E.g。

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

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

服务器端选项

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

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

缺点：

很难与客户端{{mustache}}集成，因为在解析模板时，所有未匹配的“胡须标签”都会被删除（我不知道这是否可以轻松，干净地完成避免）。
我不喜欢从服务器端修改界面，我宁愿从客户端进行修改，因此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请求。

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

服务器端选项

客户端选项

问题

2 个答案: