Universal Renderer 示範

這篇文章展示如何在 Astro + MDX 中使用通用渲染器來呈現資料驅動的內容。

1. UniversalTable - 資料表格

使用 TanStack Table 建立的響應式表格：

名稱	類型	分數	說明
Astro	MPA	95	現代化的靜態網站生成器
Next.js	SPA/MPA	90	React 全端框架
Nuxt	SPA/MPA	88	Vue 全端框架
SvelteKit	MPA	92	Svelte 全端框架

特色：

• 完全資料驅動
• 自動響應式設計
• 支援排序、過濾（可擴展）
• 在 MDX 中只需定義資料和欄位

---

2. UniversalChart - 圖表

長條圖範例

折線圖範例

特色：

• 支援多種圖表類型（Bar, Line, 可擴展更多）
• 自動響應式
• 可自訂選項
• Chart.js 強大的功能

---

3. EnhancedMermaid - 可互動的流程圖

系統架構圖

可拖曳與縮放圖表 (滑鼠滾輪縮放、拖曳移動)

資料流程圖

可拖曳與縮放圖表 (滑鼠滾輪縮放、拖曳移動)

特色：

• 支援拖曳移動
• 滑鼠滾輪縮放
• 支援所有 Mermaid 圖表類型
• 完美適合複雜架構圖

---

使用方式

1. 在 MDX 中引入元件

import { UniversalTable } from '../../components/UniversalTable'
import { UniversalChart } from '../../components/UniversalChart'
import { EnhancedMermaid } from '../../components/EnhancedMermaid'

2. 定義資料（export 變數）

export const myData = [...]
export const myColumns = [...]

3. 使用元件（加上 client:load）

<UniversalTable client:load data={myData} columns={myColumns} />
<UniversalChart client:load type="bar" data={chartData} />
<EnhancedMermaid client:load chartString={`graph TD...`}/>

---

為什麼這樣設計？

1. 資料與呈現分離：MDX 只負責資料，元件負責渲染邏輯
2. React Islands：只在需要互動的地方載入 JavaScript
3. 效能優化：主要內容靜態生成，互動元件按需載入
4. 易於維護：UX 改進集中在元件，不需要修改每篇文章
5. 手機友善：統一的響應式設計