Data fetching and performance (including Suspense)

Data fetching patterns in React & 如何 fetch data 才能讓使用者體驗更好

Data fetching 系列文

1. Data fetching and performance
2. Race condition
3. Fetch: AbortController

Waterfalls appear when we trigger data fetching not in parallel, but conditionally or in sequence

我相信只要是前端工程師就一定會接 API，這件事看似容易(原生 fetch (‘url’) 就可以達成)，但如何 fetch data 才能讓使用者體驗更好，這中間知識點超多，尤其當專案要應付各樣情境時

• 若在不同 components 都需要 fetch 同一支 API，那是不是該 cache 起來，怎麼做？
• 怎麼解決 race conditions
• 如果我 request 到一半刪了這個 component，那我要移除 request 嗎?
• 會造成 memory leak 嗎?
• 要用原生 fetch 還是套件 axios, SWR, react-query
• 同一個頁面要接多個 API

Fetching data in the frontend world is hard, and React is no exception, unfortunately.

🔖 文章索引

1. Browser Limitation
2. What is a "performant" React app?

Data fetching patterns in React
3. Fetch on render
4. Fetch then render
5. Render as you fetch (Suspense)

Browser Limitation

你可能想說啊好複雜，不如把網站上所有 request 都同時發出去，但不不不，瀏覽器同時可以處理 parallel requests 只有 6 個 (以 HTTP1 來說，which is still 70% of the internet)，大於 6 個就會把他放入 queue 中等待。

What is a “performant” React app?