服務器端或客戶端{{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請求。