一、架構概覽：三層資料代理模型
在將 WordPress 作為 Headless CMS 的 Nuxt 4 專案中，資料從後端到前端的流轉路徑經過精心設計的三層代理架構。
核心價值：
- 安全性：WordPress API 位址絕不對用戶端暴露
- 快取控制：服務端統一管理快取策略，精確到位元組級別的快取預算
- 認證隔離：登入使用者的 JWT Token 只存在於服務端 Cookie 中
- 容錯能力：自動重試 + 飛行中請求去重
二、服務端 GraphQL 代理層
核心檔案 /server/api/graphql.post.ts。
2.1 操作類型識別
function getOperationType(query: string): 'query' | 'mutation' | 'subscription' {
const trimmed = query.trim()
if (trimmed.startsWith('{')) return 'query'
const m = trimmed.match(/^(query|mutation|subscription)\\b/i)
if (!m) return 'query'
return m[1]?.toLowerCase()
}| 操作類型 | 快取行為 | 去重策略 | 說明 |
|---|---|---|---|
query（無認證） | ✅ SHA-256 快取 | ✅ 飛行中去重 | 公開資料 |
query（有認證） | ❌ 不快取 | ❌ 不去重 | 使用者私有資料 |
mutation | ❌ 不快取 | ❌ 不去重 | 寫操作 |
2.2 SHA-256 快取體系
stableStringify 對變數鍵進行字母排序後序列化，消除 JSON 序列化順序差異。
快取索引管理採用 LRU 淘汰策略：
- 最大條目數（500）、最大位元組數（32MB）
- 單條回應上限（256KB）、TTL（120 秒）
2.3 飛行中請求池去重
const upstreamResult = dedupeKey
? await graphqlInFlightPool.run(dedupeKey, fetchUpstream)
: await fetchUpstream()2.4 請求重試
const fetchUpstream = async () =>
await runWithRetry(
async () => { const rawResponse = await $fetch.raw(upstream, { ... }); ... },
{ retries: retryCount, baseDelayMs: retryDelayMs }
)三、用戶端資料層
雙模式設計
if (inSetup && immediate) {
// SSR 模式：useAsyncData
const asyncData = useAsyncData(key, async () => await request(vars), {
server: true, lazy: false, deep: false, dedupe: 'defer'
})
} else {
// CSR 模式：shallowRef + Promise 去重
const localData = shallowRef<TData | undefined>(undefined)
}為什麼用 shallowRef？ ref 遞迴包裝大物件產生顯著的響應式開銷。
FNV-1a 雜湊
function fnv1a(input: string) {
let hash = 0x811c9dc5
for (let i = 0; i < input.length; i++) {
hash ^= input.charCodeAt(i)
hash = (hash + ((hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24))) >>> 0
}
return hash.toString(16)
}四、效能最佳化
minify: 'esbuild'— 比 terser 快 20-40 倍cssMinify: true— CSS 壓縮assetsInlineLimit: 4096— 小於 4KB 內聯- GraphQL 回應快取：SHA-256 + LRU
- 靜態資源：ISR + CDN
- KeepAlive 元件快取：白名單路由，最多 12 個頁面
pnpm memory:test # 單元測試
pnpm memory:profile # 記憶體分析
pnpm memory:load # 壓力測試
pnpm memory:analyze # 日誌分析五、總結
- 服務端代理：API 位址隱藏 + 認證透傳
- 智慧快取：SHA-256 鍵 + 位元組級預算 + LRU 淘汰
- 雙重去重：服務端 + 用戶端飛行中池
- 記憶體治理：shallowRef + KeepAlive + profiling
![龙霄主题-电商与会员一体化产品插件：让内容变现从[能卖]到[卖得好]](https://demo.salongweb.com/longxiao/thumb/42.webp?x-oss-process=image/resize,m_fill,w_120,h_120/quality,q_60/format,webp)
![龙霄主题-电商与会员一体化产品插件：让内容变现从[能卖]到[卖得好]](https://demo.salongweb.com/longxiao/thumb-loading.webp)
