#Data Fetching
Stale-while-revalidate fetching with Natrix.Swr, over a real endpoint. The server called it while rendering this page and sent the result along, so both cards started filled in without the browser asking for anything. They bind to the same key, so they share one request and one cached value: switching users refetches once for both, and switching back renders from cache while it revalidates. Break the API to watch the resource retry twice before it surfaces the error, and use '+1 follower' to write straight into the shared cache entry. The second card binds two users per component and fetches them in parallel; Grace sits in both pairs, so she is fetched once for the two of them. The third card is client-only, left for the browser to load after the page arrives.
#Demo
Two components, one key
Ada Lovelace
Mathematician · 1843 followers
Ada Lovelace
Mathematician · 1843 followers
Both cards were filled in by the server before this page was sent, so the browser fetched nothing to show them. Switching users sends one request for both cards. Ada, Grace and Linus are also bound by the pair cards below, so they arrived with the page and render from cache while they revalidate; Barbara is in no other card, so she is the switch that shows a real load.
Two keys, one component
Ada + Grace
Ada Lovelace
Mathematician · 1843 followers
Grace Hopper
Rear Admiral · 1959 followers
Grace + Linus
Grace Hopper
Rear Admiral · 1959 followers
Linus Torvalds
Kernel maintainer · 1991 followers
Each card binds two keys, and both requests go out at the same time rather than one after the other. Grace is in both pairs, so the two cards cost three requests between them, not four, and her card above shares the same entry: '+1 follower' there shows up here too.
Client only
Alan + Margaret
This card turns FetchOnServer off, so the server rendered its skeletons rather than calling the API, and the browser fetched both users after the page hydrated. Reload to watch IsLoading go true.