CH7 · 架構決策 詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
前端的架構決策不是技術選型的同義詞。它是決定「這個系統要長什麼樣才能活 5 年」的宏觀判斷——Monolith 還是 Micro-frontend？CSR / SSR / SSG / RSC？Traditional server 還是 Edge？Server-first 還是 Local-first？建立讀者看懂架構 tradeoff、能對架構做出可辯論決策的能力。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端架構決策是什麼 | 01-what-is-frontend-architecture | 🌱 | 技術選型 vs 架構決策差異、「架構」不只是「用什麼框架」、Architectural Decision Records（ADR）概念 |
| 02 | 渲染策略總覽 | ⛔️ micro-service/16-f2e-render-strategy | 🌿 | 已有（跨系列） |
| 03 | 渲染決策框架 | rendering-decisions | 🌿 | 已有 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 04 | 為什麼需要架構決策（直接開幹不行嗎） | 04-why-architecture | 🌱 | 不做架構決策的代價（重構成本、團隊拉扯、技術債爆炸）、什麼時候該停下來做決策、什麼時候暫時不必 |
| 05 | 為什麼需要 Micro-frontend（單體不夠嗎） | 05-why-microfrontend | 🌱 | 大型組織獨立發佈、多團隊並行、跨技術棧整合、漸進式遷移；也講「為什麼多數團隊不需要」 |
| 06 | 為什麼需要 Edge Computing（傳統 server 不夠嗎） | 06-why-edge-computing | 🌱 | 延遲（全球使用者）、cost、隱私、personalization at edge、為什麼 Vercel / Cloudflare 押這條路 |
| 07 | 為什麼需要 Local-first（server-first 不夠嗎） | 07-why-local-first | 🌱 | 網路不穩定、多人同步需求、隱私、效能、CRDT 解的問題、Linear / Figma / Notion 的選擇 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 08 | 前端架構演進史 | 08-architecture-evolution | 🌱 | 伺服器 render（PHP/JSP）→ AJAX → SPA（Backbone/Angular）→ SSR 回流（Next.js）→ Jamstack → RSC → Edge、每次典範轉移為什麼發生 |
| 09 | Monolith vs Micro-frontend 戰爭史 | 09-monolith-vs-mfe-history | 🌱 | Single SPA、Module Federation、Qiankun、iframe 方案、哪種成了標準、哪種沒活下來 |
| 10 | Client ↔ Server 角色轉移史 | 10-client-server-shift | 🌱 | PHP thin client → SPA thick client → SSR 回頭 → RSC 重新平衡、鐘擺的邏輯 |
| 11 | Jamstack 興衰 | 11-jamstack-rise-fall | 🌱 | 2016–2020 的 static-first 潮流、為什麼後來被 RSC 與 dynamic SSR 取代、Netlify / Vercel 的轉型 |
🧠 知識型
微前端
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 12 | Micro-frontend 架構深入 | 12-micro-frontend | 🌱 | Build-time vs Run-time 整合、Single SPA、iframe 方案、Web Components 方案、選型決策 |
| 13 | Module Federation | 13-module-federation | 🌱 | Webpack 5 原創能力、跨應用共享模組、跟 Rspack 的演進、Vite 生態的替代 |
| 14 | Micro-frontend 跨框架整合 | 14-cross-framework-mfe | 🌱 | React + Vue + Svelte 共存策略、事件匯流排、共享狀態陷阱 |
架構風格
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 15 | SPA vs MPA 選型 | 15-spa-vs-mpa | 🌱 | 路由策略、SEO、初始載入、開發複雜度 tradeoff、現代邊界（Astro 讓 MPA 回流） |
| 16 | Jamstack 架構 | 16-jamstack | 🌱 | pre-rendering、API 後端分離、CDN-first、何時仍是好選擇 |
| 17 | Island Architecture（架構角度） | 17-island-architecture-arch | 🌱 | 從架構角度看 Astro / Qwik 的拆分邏輯、跟 SPA 的本質差異、partial hydration 的決策含義 |
| 18 | RSC 架構 | 18-rsc-architecture | 🌱 | Server Component / Client Component boundary 設計、data fetching 在架構上的意義、跟 Meta-framework 的耦合 |
Edge 與分散式
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 19 | Edge Computing / Edge Functions | 19-edge-computing | 🌱 | Vercel Edge / Cloudflare Workers / Netlify Edge、CDN + compute、cold start、Runtime 限制（V8 isolate 不是完整 Node） |
| 20 | Local-first Architecture | 20-local-first | 🌱 | Local-first 7 原則、CRDT 概念（Yjs / Automerge）、sync engine、離線優先資料流 |
| 21 | Client-state vs Server-state 架構 | 21-client-vs-server-state | 🌱 | TanStack Query 世代把 server state 拉出全域 store、為什麼這是架構層的轉變、每種狀態該住哪 |
架構風格應用
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 22 | 架構風格應用 | → architecture-patterns/ | 🌱 | 連到 architecture-patterns/ 系列（MVC / MVVM / Flux / Clean / Hexagonal 等） |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 23 | 架構選型的決策框架 | 23-architecture-decision-framework | 🌱 | 評估軸（團隊規模 / 流量 / SEO / 跨團隊 / 迭代速度 / 維護成本）、決策矩陣、ADR 寫法範例 |
| 24 | Micro-frontend 實戰踩坑 | 24-mfe-gotchas | 🌱 | 樣式衝突、共享依賴版本、路由對齊、錯誤邊界、performance 代價 |
| 25 | SSR / SSG / ISR / RSC 實戰選型 | 25-rendering-strategy-in-practice | 🌱 | 真實產品情境對應該選哪種、一個頁面混用策略、效能 / 開發體驗 tradeoff |
| 26 | Local-first 實戰：用 Yjs 做共同編輯 | 26-local-first-yjs | 🌱 | 跟 W05 CMS capstone 直接相關、sync protocol、conflict resolution 實例 |
| 27 | 架構評估 checklist | 27-architecture-checklist | 🌱 | 上線前檢查表（效能 / 維護性 / 擴展性 / 可觀察性 / 資安 / 成本） |
| 28 | 什麼時候該做重構（signals + 評估基礎） | 28-when-to-refactor | 🌱 | 重構的 signal（bug 修不完、新功能變慢、onboarding 成本暴漲、關鍵人依賴）；不該重構的情境（系統要廢、團隊要散、沒有明確商業價值）；ROI 評估軸（維護成本下降 vs 重構成本 + 機會成本）；跟 product / 主管溝通的數據 |
| 29 | 重構前的準備 | 29-refactor-preparation | 🌱 | 測試覆蓋要先到什麼程度（沒測試就重構 = 自殺）、characterization test 補齊缺失測試、metrics 基線（建立「重構後要變好」的量化標準）、backup / rollback plan、feature flag 設計、timeline 抓法（普遍低估 2–3 倍）、stakeholder 溝通模板 |
| 30 | 重構執行策略 | 30-refactor-strategy | 🌱 | Strangler Fig（並行新舊逐步替換）、Branch by Abstraction（引入抽象層後換實作）、Big Bang（風險高但有時必要）、三種怎麼選；怎麼不阻礙其他開發者（trunk-based、small PR、連續 merge）；回頭看的檢查點 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 31 | 架構 Anti-patterns | 31-architecture-anti-patterns | 🌱 | Premature micro-frontend（小團隊硬拆）、SPA everything（應該 MPA 的硬做 SPA）、錯誤 SSR / CSR 選型、Over-engineering、Framework lock-in 過深、重構狂熱（追潮流不顧 ROI）、架構師走歪（只畫圖不寫 code，→ 見 CH14 #46 自我檢視） |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 32 | 架構工具 | 32-architecture-tooling | 🌱 | Bundler federation tools、Edge 平台比較（Vercel / Cloudflare / Netlify / Deno Deploy）、Lighthouse CI、Architecture Diagram 工具（C4 / Mermaid / Structurizr） |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | BFF（Backend for Frontend）模式 | s01-bff-pattern | 🌱 | BFF 解的問題、實作方式（Next API Routes / 獨立 Node 服務）、跟 API Gateway 的差異 |
| S02 | Headless 架構 | s02-headless-architecture | 🌱 | Headless CMS / Commerce、前後端解耦的極端版本、跟 W05 CMS 的關聯 |
| S03 | Architectural Decision Records（ADR） | s03-adr | 🌱 | ADR 範本、如何寫好一份 ADR、歷史 ADR 怎麼維護 |
章節進度統計
- 知識主題：32 + 3 補充 = 35 項
- 🌿 growing：3（2 現有 + 1 跨系列）
- 🌱 seed：32
跨系列連結
- →
frontend/framework/ CH6（RSC / Island / Streaming 框架實作）
- →
frontend/browser/ CH4（Edge Runtime 對應的瀏覽器 API）
- →
architecture-patterns/（MVC / MVVM / Flux / Clean 等經典風格）
- →
micro-service/（後端微服務跟前端 MFE 對照）
- → W05 CMS capstone（Local-first、RSC 實戰）