Subscribe for Free Tips, Tutorials, and Special Discounts
We're in this together!
We respect your privacy. Unsubscribe at any time.
Question: What happens when RSCs request the same data?
Answer: Let's say we have two versions of the navigation bar, one for desktop and another for mobile which we hide and show using media queries. Each of the nav-bars needs to get its data from the navigation
microservice. Because of the layout of the components it would be tough to have a top level RSC route all that data down to each component. What to do? Well, you can fetch
the data both places. And with the per-request caching built into React there will be only one request to the API even though each component is making its own request.
There are some limitations though. First, these need to be fetch
requests using the default GET
method. And second, the URLs need to match between the requests.
If that doesn't meet your needs then you should check out the cache
function exported from react
that you can use wrap a function in a cache and then you get to implement that function however you choose. React will make sure that you get a cache hit when all the parameters sent to the cached function match a previously cached version.
Share this article with your friends
Written by Jack Herrington
Jack Herrington is a Full Stack Principal Engineer who orchestrated the rollout of React/NextJS at Walmart Labs and Nike. He is also the "Blue Collar Coder" on YouTube where he posts weekly videos on advanced use of React and NextJS as well as other frontend technologies trends. His YouTube channel hosts an entire free courses on React and TypeScript. He has written seven books including most recently No-BS TypeScript which is a companion book to the YouTube course.