痛點：動態頁面的雙重消耗
- 資料庫壓力：首頁需 6+ 查詢，子頁 5-15 查詢，高併發下連接池耗盡、慢查詢堆積。
- Tomcat 解析開銷：JSP → Servlet → 編譯 → 執行，CPU/記憶體持續佔用。
靜態化核心思想
**預先將動態 JSP 渲染為純 HTML 檔案**，部署到 Web 根目錄或 CDN。用戶請求直接命中靜態檔案，繞過 Tomcat、繞過資料庫。
優缺點權衡
| 優點 | 缺點 |
|---|
| 零資料庫訪問，極致吞吐 | 佔用磁碟空間 (大站可達 TB 級) |
| 零模板解析，回應亞毫秒級 | 失去實時互動 (評論、個性化、庫存) |
| 天然防注入/XSS (靜態文件不可執行) | 需建立再生成/增量更新機制 |
| CDN 緩存友好，全球加速 | 動態頁面穩定是前提，頻繁改動反增負擔 |
實施關鍵步驟
1. 定義 URL → 靜態路徑映射規則
/article/123.html → /static/article/123.html
/list?page=2&cid=5 → /static/list/cid_5_page_2.html
/user/profile → 動態保留 (個性化) 或 ESI 片段化
2. JSP 改造：移除動態依賴
- 將
<%@ include file="..."%> (靜態包含) 改為 <c:import> 或預處理合併。
- 所有連結、表單 action、AJAX URL **硬編碼為靜態路徑** 或由前端路由接管。
- 使用
${pageContext.request.contextPath} 等動態表達式時需預渲染替換。
3. 靜態化生成觸發機制
| 模式 | 觸發條件 | 工具/實現 |
|---|
| 全量定時 | 每日低峰期 | cron + wget/curl 遍歷站點圖 |
| 增量事件驅動 | 文章發布/修改/刪除、評論審核 | 消息隊列 + 消費者調用渲染服務 |
| 手動觸發 | 後台管理「一鍵靜態化」 | Admin API → 異步任務 |
4. 渲染服務實現選型
- 進程內渲染：Spring
MockMvc / DispatcherServlet 模擬請求 → 捕獲響應體 → 寫檔。適合單體應用。
- 獨立渲染微服務：接收渲染任務 (模板+數據) → 返回 HTML。支援多語言模板、獨立擴容。
- Headless 瀏覽器：Puppeteer/Playwright 渲染 SPA 頁面 (CSR/SSR 混合)。適合現代前端框架。
進階技術：ESI (Edge Side Includes)
頁面**大部分靜態**，僅少數片段動態 (用戶名、購物車數量、推薦)。Nginx/Varnish/CDN 支援 ESI 標籤：
<!-- 靜態頁面中 -->
<esi:include src="/fragment/user-bar" />
<esi:include src="/fragment/cart-count" />
邊緣節點組裝片段返回完整頁面，**兼顧靜態化效能與動態個性化**。
遷移現代架構：SSG/ISR/SSR
| 模式 | 工具 | 對應靜態化概念 |
|---|
| SSG (Static Site Generation) | Next.js getStaticProps, Astro, Hugo, VitePress | 建構時生成所有/增量 HTML |
| ISR (Incremental Static Regeneration) | Next.js revalidate, Vercel/Netlify | 過期後異步重新生成，零停機 |
| SSR (Server-Side Rendering) | Next.js getServerSideProps, Nuxt, Remix | 請求時渲染，適合高實時頁面 |
| Edge Rendering | Cloudflare Workers, Vercel Edge Functions | 邊緣節點渲染，延遲極低 |
結語
JSP 靜態化是**「以空間換時間、以預計算換實時」**的經典權衡。現代 Web 開發將此思想內化為 **SSG/ISR/ESI** 等標準化模式，工具鏈成熟、部署自動化。理解其本質，有助於在任何技術棧下做出正確的效能架構決策。
- 上一篇文章： JSP/Servlet/JSF 標籤庫深度研究：Taglib 結構、開發流程與容器轉換機制
- 下一篇文章： JSP 動態網站環境搭建全攻略：Tomcat + Apache/IIS 三種整合方案詳解
Copyright ©
程式碼之家 All Rights Reserved
