ASP.NET 母版頁與 SSI (shtml) 技術對比：輕量級頁面組合最佳選擇

母版頁機制與使用流程

建立步驟

1. 新增 Web Form 母版頁 (.master)
2. 新增 使用母版頁的內容頁 (.aspx，勾選 "Select master page")
3. 母版頁使用 <asp:ContentPlaceHolder> 定義可替換區塊
4. 內容頁使用 <asp:Content> 填充對應區塊

運作原理

伺服器端將母版頁與內容頁組合渲染，產生完整 HTML 回應瀏覽器。瀏覽器完全感知不到母版頁存在。

母版頁局限性

SSI (Server Side Includes) - 輕量級替代方案

核心特性

• Web 伺服器原生支援：IIS、Apache、Nginx 皆支援
• 繞過 ASP.NET 管線：直接由 IIS 處理，不經 Managed Pipeline
• 極高效能：單純檔案內容插入，無編譯、無物件建構
• 語法簡單：HTML 註釋指令格式

實作範例

共用區塊檔案

<!-- head.html -->
<head>
    <meta charset="utf-8" />
    <title>共用標題區</title>
    <link rel="stylesheet" href="/css/common.css" />
</head>

<!-- foot.html -->
<footer>
    © 2024 公司名稱 版權所有
    <script src="/js/common.js"></script>
</footer>

主頁面 (test.shtml)

<!DOCTYPE html>
<html>
<!--#include file="head.html"-->
<body>
    <h1>這裡放置自定義內容</h1>
    <p>頁面主體內容...</p>
<!--#include file="foot.html"-->
</body>
</html>

技術對比總覽

適用場景建議

選擇母版頁當：

• 需要複雜伺服器端邏輯（資料綁定、使用者控制項、事件處理）
• 頁面結構高度固定，內容區塊明確
• 團隊習慣 Visual Studio 設計器開發
• ASP.NET Web Forms 專案

選擇 SSI 當：

• 大量靜態/半靜態頁面（官網、部落格、文件站）
• 極致效能需求，避免 ASP.NET 管線開銷
• 前後端分離架構，後端僅提供 API
• 跨技術棧共用版型（PHP、Node.js、靜態站點生成器）

現代架構下的演進

現代 Web 開發中，頁面組合策略已演進：

• CSR (Client-Side Rendering)：React/Vue 元件組合
• SSR (Server-Side Rendering)：Next.js/Nuxt.js 預渲染
• SSG (Static Site Generation)：建置時期產生靜態頁
• Edge Side Includes (ESI)：CDN 層級片段快取組合

理解母版頁與 SSI 的權衡，有助於在維護舊系統或選擇適合技術棧時做出明智決策。對於新專案，建議評估現代前端框架或 SSG 方案。