All Articles

What Happens If Different RSCs Need The Same Data?

Jack Herrington
Jack Herrington
August 14th, 2023

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

Subscribe for Free Tips, Tutorials, and Special Discounts

We're in this together!

We respect your privacy. Unsubscribe at any time.

Jack Herrington

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.