fetch-on-render (render triggers fetch)

fetch-on-render 是指在 Component render 後，才開始觸發 API 資料請求。

使用範例:

useEffect(() => {
  fetchData().then((response) => {
    setData(response);
  });
}, []);

優點

• 簡單易用：這是大部分 React 開發者所採用的方式，不論是 useEffect 或是 React Query 的 useQuery 。
• 狀態管理方便：資料請求和狀態管理通常放在同一個 Component 內。

缺點

• 效率低：需要等 Component 完全 render 之後才開始進行資料請求，導致資料取得時間較晚。
• Waterfall 問題：Component 會是層層 render 的，會導致打 API 的 Waterfall。如果一個元件的數據要求依賴於另一個元件的數據，這會使情況變得更複雜。

fetch than render

在進入頁面時預先抓取資料，再渲染完整的頁面。以下範例僅為方便說明，通常會使用套件或框架來實作。

使用範例:

function fetchProfileData() {
  return Promise.all([fetchUser(), fetchPosts()]).then(([user, posts]) => {
    return { user, posts };
  });
}

優點

• 解決 waterfall 的問題 : 透過並行請求，減少資料獲取的時間。

缺點

• 等待時間較長：必須等待所有 API 回應完成才能 render，若有一個 API 請求較慢，整個頁面渲染會延遲，影響載入速度。上面的範例還可以再優化，但當有許多 API 時處理上會比較麻煩。

render-as-you-fetch

React 團隊推薦的用法，搭配 React 18 的 Suspense 使用。

使用範例:

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

當你進入一個頁面時，會立即開始抓取資料。在取得資料時，會顯示 fallback UI (<Loading />)，完成後才會顯示裡面 <SomeComponent /> 的內容。

優點

• 解決 Race Condition : 會確保所有的資料都已經完成載入，才會解除 Suspense 的阻擋狀態。
• 提高效能：資料抓取和 UI 渲染同時進行，降低了整體延遲。
• 更方便處理 loading 狀態 : 語法更簡潔。

缺點

• 支援條件限制：並不是所有情況都支援此語法，像是使用 useEffect 或 event handler fetch data 並不會觸發 Suspense。
• Suspense 的適用場景：需要使用支援 Suspense 的框架（如 Relay、Next.js、SWR 或 React Query 等），或者是使用 React 19 引入的 use 來讀取 Promise。

參考資料:

https://17.reactjs.org/docs/concurrent-mode-suspense.html#approach-2-fetch-then-render-not-using-suspense
https://chentsulin.medium.com/%E7%90%86%E8%A7%A3-react-%E7%9A%84%E4%B8%8B%E4%B8%80%E6%AD%A5-concurrent-mode-%E8%88%87-suspense-327b8a3df0fe
https://bobaekang.com/blog/component-colocation-composition/
https://www.youtube.com/watch?v=lcLbYictX3k
https://react.dev/reference/react/Suspense