系列文章
[Day 21] Hooks 模式
今天要介紹的是 React 的 Hook 模式，嚴格來說 Hooks 不一定是一種設計模式，但它可以替代很多傳統的設計模式。介紹 Hooks 前，先來看看 R...
[Day 22] 程式碼拆分(Code Splitting)與動態匯入(Dynamic Import) (1)
今明兩天要介紹的是 React 中的程式碼拆分(Code Splitting)與動態匯入(Dynamic Import)，會先從一般的靜態匯入開始介紹，說明靜...
[Day 23] 程式碼拆分(Code Splitting)與動態匯入(Dynamic Import) (2)
延續昨天介紹的 Code Splitting，今天要介紹如何使用動態匯入來拆分程式碼，會以 React 的動態匯入來說明。 沒有動態匯入🤯 在介紹動態匯入前，...
[Day 24] PRPL 模式
今天要介紹的是 PRPL 模式，這也是和優化效能有關的模式。PRPL 模式是由 Google Chrome 團隊所發展提出的，目的是提供更快的網絡體驗。這個模...
[Day 25] 渲染模式初探與效能指標介紹
接下來幾篇會介紹渲染模式 Rendering Pattern，渲染模式應該是系列文裡我最頭痛的內容...，若有任何敘述錯誤或不清楚的歡迎提出討論！ 渲染模式的...
[Day 26] Client Side Rendering(CSR)
今天要介紹 Client Side Rendering 的運作流程、優缺點與改善方式。 Client Side Rendering 運作流程 以 React...
[Day 27] Server Side Rendering(SSR)、Streaming Server-Side Rendering、Selective Hydration
Server Side Rendering 是最古老的渲染網頁內容的方式之一，今天要介紹它的運作流程與優缺點，另外也會介紹 SSR with hydratio...
[Day 28] Static Rendering/Static Site Generation (SSG)
根據前面的介紹，我們知道在 SSR 渲染模式中，如果伺服器遇到高流量請求時，會延後 TTFB 的時間；而 CSR 的缺點則是大型的 JavaScript bun...
[Day 29] Incremental Static Generation/Regeneration(ISR) 與渲染模式總結
延續昨天介紹的 SSG，今天要介紹的是 SSG 的優化版本 Incremental Static Generation/Regeneration(ISR)。為...
[Day 30] 系列文總結與完賽心得
這是我第一次參與鐵人賽，很感動終於完成啦🥳！ 系列文總結 文章回顧 先來回顧一下此次系列文包含的主題： [Day 01] 系列文動機與大綱 Desig...