React
Next.js 的 revalidate 跟 force-static 搭在一起到底會發生什麼事？
2025-05-202.52最近在玩 Next.js 的時候，發現 export const dynamic = 'force-static' 搭配 revalidate 系列功能會有一些… 意料之外的行為，所以這邊稍微記錄一下，順便整理幾個可能會搞混的場景。基礎場景設計我們有以下幾個重要的檔案與設定：📁 根目錄├── 📁 components│ ├── 📄 btns.tsx├── 📁 utils│ &
React
Lighthouse 分數提高攻略 - Next.js
2025-04-221.08最近在開發公司日本官網，研究了一番 Lighthouse 提高分數的方法，因 Lighthouse 分數對網站品質的影響非常直接，不只工程師自己會參考，連顧客看到網站體驗好不好，來檢視公司產出的品質。它幾乎就是評估網站品質的最直觀量化依據之一。其中 Lighthouse 的四大項目中，「效能（Performance）」是最難搞的一個。其他像是「無障礙（Accessibility）」、「最佳做法（B
React
Parent Component？Owner Component？是甚麼東西？
2025-02-121.19如果你有在寫 React / Next.js，Parent Component（父元件）這個詞你應該耳熟能詳吧。但你知道還有個叫做「Owner Component」的東西嗎？這兩個聽起來很像，實際上差很多。尤其當你的應用越寫越大，效能越來越卡，就會開始在意「到底是誰在控制這顆元件」，而不只是「誰包住它」。先講什麼是 Parent？Parent 就是最簡單的那種「我在 JSX 裡包住你」的關係。fu
React
多開分頁也能同步？來聊聊跨標籤通訊這件事
2024-12-012.48在現代 Web 應用裡，跨頁籤同步變得越來越常見。像是使用者登入、修改設定、或刪除一筆資料後，我們經常會希望其他開著的頁籤也能自動反映這些變動，不需要重新整理頁面或手動同步。這篇就來介紹幾個常見的場景，並一步步實作一個跨頁籤同步的 Todo List。什麼時候需要跨頁籤同步？幾個常見的例子：登入狀態同步：在一個頁籤中登出後，其他頁籤自動跳轉回登入頁。設定更新：像語言、主題這種偏好變更，希望所有頁籤
React
前端如何實現模糊圖像加載特效
2024-09-191.54前言圖片在前端是一個經常出現的元素，網頁的圖片可以吸引用戶的訪問者的注意力，讓內容整體更加生動，但當一張圖片檔案大小太大時，用戶可能就需要較長的時間才能看到圖片加載完成，無疑會造成幾個問題 :影響用戶體驗加載時間過長會讓用戶感到焦慮，進而影響整體的網站體驗，可能導致用戶離開網站。降低信任感網站加載速度過慢可能會讓用戶對網站的專業性和可靠性產生懷疑，降低品牌信任導致重複請求如果圖片加載過慢，用戶可能