Express 樣板引擎：使用 EJS 實現伺服器端渲染 (SSR)

雖然現代開發流行「前後端分離」（後端只負責產出 JSON），但在開發簡單的管理後台、純內容網頁或對 SEO 有極高要求的頁面時，SSR (伺服器端渲染) 依然是一項不可或缺的技術。Express 官方最推薦、市佔率最高的樣板引擎就是 EJS (Embedded JavaScript)。

安裝與基礎配置

首先透過 NPM 安裝 EJS：

npm install ejs

在你的 app.js 中告訴 Express 使用 EJS 作為渲染引擎：

const path = require('path');

app.set('view engine', 'ejs');
// 設定樣板檔案存放的目錄 (預設即為 views)
app.set('views', path.join(__dirname, 'views'));

EJS 語法精解

EJS 的邏輯非常簡單：在標準 HTML 中穿插 JavaScript 程式碼標籤。

1. 輸出標籤

  • <%= value %>：輸出變數（自動轉義 HTML，防範 XSS 攻擊）。
  • <%- value %>：輸出原始資料（常用於渲染已生成的 HTML 片段）。

2. 邏輯標籤

  • <% code %>：執行判斷或迴圈（不直接輸出內容）。

3. 片段引入 (Partials)

  • <%- include('filename') %>：引入 Header 或 Footer，落實 DRY 原則。

實戰：建立一個產品列表頁

樣板：views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= pageTitle %></title>
  </head>
  <body>
    <%- include('partials/header') %>

    <h1>歡迎來到本站</h1>

    <% if (products.length > 0) { %>
    <ul>
      <% products.forEach(function(item) { %>
      <li>產品名稱：<strong><%= item.name %></strong> - 價格：$<%= item.price %></li>
      <% }); %>
    </ul>
    <% } else { %>
    <p>目前沒有庫存。</p>
    <% } %> <%- include('partials/footer') %>
  </body>
</html>

路由處理器：渲染邏輯

使用 res.render() 將資料注入樣板，Express 會自動去 views/ 目錄找對應的 .ejs 檔案。

app.get('/', (req, res) => {
  const products = [
    { name: 'MacBook Pro', price: 999 },
    { name: 'iPhone 15', price: 799 },
  ];

  res.render('index', {
    pageTitle: '商城首頁',
    products: products,
  });
});

專業技巧：傳遞全域資料

如果你有一些資料（如網站名稱、當前登入者）在所有頁面都要使用，可以使用 app.locals 或 res.locals，這能避免在每個路由都重複傳遞相同的資料物件。

app.use((req, res, next) => {
  res.locals.siteName = '我的極簡商城';
  res.locals.currentUser = req.user; // 假設你已處理完驗證
  next();
});

總結

  1. EJS 讓你能在 HTML 中運行 JavaScript，非常直觀。
  2. 務必使用 Partials 拆分重複的介面組件（如導覽列、底部資訊）。
  3. 如果頁面互動極端複雜，建議考慮搭配前端框架，將 EJS 作為初始頁面的進入點。