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

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

我正在开发一本在线杂志，它将有一个主页，其中有一篇大文章，其余的文章则在其下以较小的尺寸显示

例如

---

服务器端选项 在服务器端使用

{{mustache}

作为PHP库：当浏览器请求页面时，服务器将完成模板并将其发送回去。
优点：

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

缺点：

• 很难与客户端

  {{mustache}}

  集成，因为在解析模板时，所有不匹配的“mustache标签”都会被删除（我不知道这是否可以轻松、干净地避免）
• 我不喜欢从服务器端修改接口，而是从客户端修改接口，因此3层体系结构看起来更清晰（您可能会对此有所不同）
• 我以前没有服务器端

  {{mustache}

  的经验

客户端选项 我通常使用的不是简单的

{{mustache}

，而是将

{{mustache}}

包装起来，让它变得非常简单和舒适：当浏览器请求页面时，会发送

HTML

，其中包含所有的

js

代码，以请求服务器提供

JSON

，其中包含标题、作者、，和图像的文件名。
优点：

• 增强了三层体系结构
• 像无限滚动（另一种ajax功能）这样的东西添加起来非常简单

缺点：

• 加载时间缩短。浏览器需要接收代码，请求JSON，然后向服务器请求在

  JSON

  中发现的资源（如图像文件名）

---

问题:

---

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

对于交互式和复杂的用户界面，利用浏览器进行模板呈现是有意义的。然而，在您的情况下，听起来您的页面是相当静态的，所以它归结为您愿意花更多的时间在服务器端或客户端编码

请注意，在客户端呈现内容具有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>

{{title}}
{{content}}

风险值数据=
var template=$（'#tplArticle'）.html（）；
var html=Mustache.to_html（模板、数据）；
$（'#main'）.html（html）；

---

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

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

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

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

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

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

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

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

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

特别是对于使用低端手机的移动设备，客户端模板可能会产生明显的不同。尤其是当您必须在页面加载后的第二步中获取数据时。在这些小型设备上进行Ajax+渲染会增加一点延迟。在服务器端，另一端是缓存，您的速度非常快

---

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

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

---

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

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

<?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>