Next.js 高併發架構實戰：如何優雅解決 Load Balance 下的快取同步問題
2026-01-201.47前言在當前的 Web 開發中，將 Next.js 容器化並透過 Nginx 做負載平衡（Load Balancing）是常見手段。然而，當我們開啟多個 App 實例（Replicas）來處理高流量時，最令人頭痛的往往不是算力不足，而是「狀態不一致」。如果沒有一個統一的快取層，使用者可能會遇到這種鬼故事：重新整理第一次看到新資料（命中 Container A），再重新整理一次又變回舊資料（命中 Co
Next.js 的 revalidate 跟 force-static 搭在一起到底會發生什麼事？
2025-05-202.52最近在玩 Next.js 的時候，發現 export const dynamic = 'force-static' 搭配 revalidate 系列功能會有一些… 意料之外的行為，所以這邊稍微記錄一下，順便整理幾個可能會搞混的場景。基礎場景設計我們有以下幾個重要的檔案與設定：📁 根目錄├── 📁 components│ ├── 📄 btns.tsx├── 📁 utils│ &
Lighthouse 分數提高攻略 - Next.js
2025-04-221.08最近在開發公司日本官網，研究了一番 Lighthouse 提高分數的方法，因 Lighthouse 分數對網站品質的影響非常直接，不只工程師自己會參考，連顧客看到網站體驗好不好，來檢視公司產出的品質。它幾乎就是評估網站品質的最直觀量化依據之一。其中 Lighthouse 的四大項目中，「效能（Performance）」是最難搞的一個。其他像是「無障礙（Accessibility）」、「最佳做法（B
Parent Component？Owner Component？是甚麼東西？
2025-02-121.19如果你有在寫 React / Next.js，Parent Component（父元件）這個詞你應該耳熟能詳吧。但你知道還有個叫做「Owner Component」的東西嗎？這兩個聽起來很像，實際上差很多。尤其當你的應用越寫越大，效能越來越卡，就會開始在意「到底是誰在控制這顆元件」，而不只是「誰包住它」。先講什麼是 Parent？Parent 就是最簡單的那種「我在 JSX 裡包住你」的關係。fu
多開分頁也能同步？來聊聊跨標籤通訊這件事
2024-12-012.48在現代 Web 應用裡，跨頁籤同步變得越來越常見。像是使用者登入、修改設定、或刪除一筆資料後，我們經常會希望其他開著的頁籤也能自動反映這些變動，不需要重新整理頁面或手動同步。這篇就來介紹幾個常見的場景，並一步步實作一個跨頁籤同步的 Todo List。什麼時候需要跨頁籤同步？幾個常見的例子：登入狀態同步：在一個頁籤中登出後，其他頁籤自動跳轉回登入頁。設定更新：像語言、主題這種偏好變更，希望所有頁籤