What Happens If Different RSCs Need The Same Data?

    Jack HerringtonJack Herrington

    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.

    Subscribe for Free Tips, Tutorials, and Special Discounts

    We're in this together!

    I respect your privacy. Unsubscribe at any time.