Several screens need the same server data and it keeps getting refetched. How would you handle that?

Put the data in a caching layer keyed by request rather than in component state. A query library deduplicates concurrent requests for the same key, serves cached data instantly while revalidating in the background, and gives you one place to invalidate after a mutation. On the server side, request level caching plus prefetching in the route means the client often has the data before the component mounts.

The root cause is usually that the data is being treated as component state, so every screen owns its own copy and its own fetch. I move it into a query cache keyed by something meaningful, like the resource name plus the id. Once it is keyed, three components asking for the same thing during one render pass produce one network request, and the second screen gets an instant paint from cache while a revalidation happens quietly behind it. I set stale time per resource rather than globally, because a user profile can be stale for minutes and a live order status cannot. Mutations then invalidate specific keys instead of everything, and I keep the key builders in one module so nobody invents a slightly different key and quietly breaks the cache. If the framework supports it I prefetch in the route or fetch on the server, so the data is already in flight before the component mounts, which is what actually removes the waterfall rather than just hiding it behind a spinner.