2025-09-09 · React

用 React Server Components 載入資料並避開瀑布請求

在伺服器端取得一次資料,把原本需要三趟往返的頁面串流出去。

前言

說明如何把資料取得與元件擺在一起、將 promise 往下傳遞,並實際量化你從關鍵路徑上移除的請求數量。

常見的翻車方式

跳過這個步驟的團隊,通常會踩到三種坑:

  • 優化了一個沒有人同意要動的數字。
  • 照抄了約束條件完全不同的專案的作法。
  • 一直延後決策,直到反悔的成本高得嚇人。

建議的切入方式

  1. 用使用者的語言,一句話講清楚問題。
  2. 選一個每週都能量測的訊號,而不只是上線當天看一次。
  3. 給小實驗設時間盒;兩天的 spike 勝過兩週的辯論。

小結

如果 React 教會我們什麼,那就是「無聊的一致性」打贏「聰明的一次性方案」。把學到的東西帶回團隊,別讓它變成口耳相傳的都市傳說。