你知道什麼是後端套模板嗎？他們是怎麼操作的知道嗎？

王铁柱6發表於2024-12-05
後端

我知道後端套模板，也叫做“伺服器端渲染” (Server-Side Rendering，SSR) 或“模板引擎”。 它指的是在伺服器端動態生成 HTML 頁面，而不是像傳統的前端渲染那樣，只提供靜態的 HTML 檔案，然後由瀏覽器端的 JavaScript 去操作 DOM 更新內容。

後端套模板的操作流程大致如下：

  1. 前端傳送請求: 使用者在瀏覽器中訪問某個 URL，瀏覽器向伺服器傳送請求。

  2. 伺服器接收請求: 伺服器接收到請求後，會根據請求的 URL 和引數，確定需要渲染哪個模板。

  3. 資料獲取: 伺服器從資料庫或其他資料來源獲取需要渲染到模板中的資料。

  4. 模板渲染: 伺服器使用模板引擎，將獲取到的資料填充到 HTML 模板中，生成完整的 HTML 頁面。 這就像填空題一樣，模板引擎會找到模板中的佔位符，然後用實際資料替換它們。

  5. 響應返回: 伺服器將渲染好的 HTML 頁面返回給瀏覽器。

  6. 瀏覽器渲染: 瀏覽器接收到 HTML 頁面後，將其解析並渲染到螢幕上。

關鍵技術和工具:

  • 模板引擎: 這是後端套模板的核心。常見的模板引擎包括：
    • Python: Jinja2, Django Template Language, Mako
    • Java: Thymeleaf, Velocity, FreeMarker
    • JavaScript (Node.js): EJS, Pug, Handlebars, Mustache
    • PHP: Twig, Blade, Smarty
  • 後端語言: 選擇哪種後端語言取決於專案需求和技術棧。
  • 資料庫或其他資料來源: 用於儲存和提供需要渲染到模板中的資料。

工作原理示例 (以Python的Jinja2為例):

假設有一個Jinja2模板 template.html:

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <ul>
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
  </ul>
</body>
</html>

Python程式碼：

from jinja2 import Environment, FileSystemLoader

# 建立Jinja2環境
env = Environment(loader=FileSystemLoader('.'))
template = env.get_template('template.html')

# 資料
data = {
    'title': 'My Website',
    'heading': 'Welcome!',
    'items': ['Apple', 'Banana', 'Orange']
}

# 渲染模板
html = template.render(data)

# 將渲染後的HTML返回給瀏覽器 (簡化示例)
print(html)

後端套模板的優勢:

  • SEO友好: 搜尋引擎爬蟲可以直接抓取渲染好的 HTML 內容，有利於 SEO。
  • 首屏載入速度快: 因為伺服器端已經完成了 HTML 的渲染，瀏覽器可以直接渲染頁面，無需等待 JavaScript 執行。
  • 利於前後端分離: 後端負責資料和模板渲染，前端負責互動和使用者體驗。

後端套模板的劣勢:

  • 伺服器負載較高: 伺服器需要承擔渲染 HTML 的工作，增加了伺服器的負載。
  • 開發效率略低: 需要前後端配合，溝通成本略高。

總而言之，後端套模板是一種常見的 Web 開發技術，它可以提高 SEO 和首屏載入速度，但也需要考慮伺服器負載的問題。 選擇是否使用後端套模板需要根據具體的專案需求和技術棧進行權衡。

相關文章