分頁 (Pagination) 是什麼
分頁是一種控制資料載入與呈現方式的技術。想想看，不論是電商商品還是部落格文章，當資料量逐漸增加時，一次性從 server-side 拉取所有資料不僅會因回應資料過多導致等待請求時間拉長，另一方面要將取回的資料全部呈現在畫面上，在前端渲染大量的 DOM 節點時效能也會很差。透過分頁技術，我們可以控制每次載入的資料量。
分頁的目的
- 降低載入延遲：減少一次性傳輸的資料量，讓使用者更快看到第一筆資料。
- 減少記憶體消耗：避免前端瀏覽器或後端資料庫一次加載數萬筆資料，導致卡頓。
- 優化渲染效能 ：減少前端 DOM 節點數量，提升渲染速度。
分頁的實現方法
分頁的實現方法可分為前端分頁 (Client-side Pagination )與後端分頁 (Server-side Pagination)。1. 前端分頁 (Client-side Pagination)
概念：後端不過濾，一次傳回所有資料給前端，前端取得資料後再根據目前頁碼擷取需要的資料片段並顯示。
流程示意：
Server 回傳全部資料 → 資料在前端存起來 → 透過 slice 分頁優點：
- 切換速度快：分頁切換時不需要再發送 API 請求，快又有效！
- 搜尋與排序方便：前端擁有完整資料，可以立即進行全文檢索或重新排序。
缺點：
- 首次加載慢：第一次進入頁面時需要等待所有資料下載完成。
- 硬體要求高：若資料量達到數萬條，會佔用大量手機或電腦的記憶體。
2. 後端分頁 (Server-side Pagination)
概念： 前端發送請求時帶上參數 (例如：page=2&size=10)，後端資料庫再根據參數，利用 LIMIT 與 OFFSET 等指令只撈取該頁的資料並回傳。
流程示意：
前端 API 請求 page=2 → Server 查 DB → 回傳 10 筆
優點:
- 極佳的擴展性：即使總資料量超大，每次傳輸的資料量都一樣小。
- 首屏速度快：使用者只需下載當前頁面的數據。
缺點：
- 頻繁請求：每次跳到其他分頁都會發送新的 API 請求，且會有短暫的加載等待。
- 開發複雜度較高：需前後端互相配合。
簡單來說，Client-side 分頁偏向在前端操作資料，而 Server-side 分頁則是在資料來源端控制資料量。
何時使用哪種方法
Client-side Pagination
- 資料量較小 (千筆內)
- 需要頻繁搜尋、排序
- 個人專案或 MVP
Server-side Pagination
- 資料量龐大 (千筆以上)
- 需要節省頻寬與提升效能
- 正式產品或商業系統
結論
分頁技術並沒有絕對的優劣之分，關鍵在於不同場景中選擇合適的方法。
如果你開發的是一個內容精簡的個人部落格或小型管理後台，前端分頁能帶給使用者最流暢的翻頁體驗，且開發成本比較低。但若你面對的是流量大的電商平台，為了確保任何裝置都能快速開啟網頁，後端分頁則是不可或缺的必備技術。
在設計架構時，先評估資料的預期成長量與使用者的硬體環境，才能選出最合適的技術方案，打造出既快又穩的 Web 應用~
