How to handle redundant HTTP requests between multiple parallel components?
Unanswered
Masai Lion posted this in #help-forum
Masai LionOP
Hello,
I am new to nextjs. I just finished building my first site, and I had a question about nextjs HTTP caching behavior and general design. Please consider the following page on my nextjs site (see screenshot attached):
https://yourpeer-f5f080230d56.herokuapp.com/locations/the-bowery-mission-tribeca
I have implemented this page as follows: the left sidebar view and map view are parallel routes. Each route is fetching data from a "location detail" REST API to get detailed information about a particular location. Furthermore, the site dynamic generateMetadata is hitting the location detail API in order to set the page title. This means that the location detail API is being fetched redundantly 3 times when this page is visited. (The app is open source and the source code is here, if that would be helpful: https://github.com/streetlives/yourpeer.nyc-nextjs)
My first question is, is this design OK and expected in NextJS architecture? Like, from reading the documentation, it seems like having different parts of the site (parallel routes, dynamic metadata function, etc.) making redundant API calls is expected, and the way this is dealt with is through HTTP caching. Like, I could try to consolidate API calls, e.g. by consolidating the parallel sidebar and map routes into a single route - this would eliminate one of the API calls, because the parallel routes would not be making the same API call in isolation from one other. But I don't see a way to avoid making another redundant request in the site metadata generator function, so either way, it seems like the NextJS architecture encourages making at least two redundant API calls. Do I have the correct understanding of NextJS architecture here?
The problem is that the location detail API being called is kind of slow (about .8s), and it means that the SSR response is also slow, taking about 2.5 seconds. I would like to get the SSR performance down to under a second. My second question is, even if I were to add HTTP caching, would all three redundant requests fire at the same time upon visiting this page? If so, then if it's the first time this page is visited, then the cache will be empty for all three requests, and they will all fire in parallel, leading to the same kind of slow performance that I am currently seeing. Subsequent requests would be faster, because the HTTP cache would be populated, but the first request would always be slow, because all three redundant HTTP requests would fire at the same time. Is this correct, or am I missing something? For example, is the NextJS fetch client clever about handling multiple redundant HTTP requests? E.g. does it detect that an incoming request is identical to one which is in flight, and cause the incoming redundant request to wait until the in-flight request finishes and populates the cache, or something like this?
I would appreciate any insight on this anyone can share. Thanks so much.
I am new to nextjs. I just finished building my first site, and I had a question about nextjs HTTP caching behavior and general design. Please consider the following page on my nextjs site (see screenshot attached):
https://yourpeer-f5f080230d56.herokuapp.com/locations/the-bowery-mission-tribeca
I have implemented this page as follows: the left sidebar view and map view are parallel routes. Each route is fetching data from a "location detail" REST API to get detailed information about a particular location. Furthermore, the site dynamic generateMetadata is hitting the location detail API in order to set the page title. This means that the location detail API is being fetched redundantly 3 times when this page is visited. (The app is open source and the source code is here, if that would be helpful: https://github.com/streetlives/yourpeer.nyc-nextjs)
My first question is, is this design OK and expected in NextJS architecture? Like, from reading the documentation, it seems like having different parts of the site (parallel routes, dynamic metadata function, etc.) making redundant API calls is expected, and the way this is dealt with is through HTTP caching. Like, I could try to consolidate API calls, e.g. by consolidating the parallel sidebar and map routes into a single route - this would eliminate one of the API calls, because the parallel routes would not be making the same API call in isolation from one other. But I don't see a way to avoid making another redundant request in the site metadata generator function, so either way, it seems like the NextJS architecture encourages making at least two redundant API calls. Do I have the correct understanding of NextJS architecture here?
The problem is that the location detail API being called is kind of slow (about .8s), and it means that the SSR response is also slow, taking about 2.5 seconds. I would like to get the SSR performance down to under a second. My second question is, even if I were to add HTTP caching, would all three redundant requests fire at the same time upon visiting this page? If so, then if it's the first time this page is visited, then the cache will be empty for all three requests, and they will all fire in parallel, leading to the same kind of slow performance that I am currently seeing. Subsequent requests would be faster, because the HTTP cache would be populated, but the first request would always be slow, because all three redundant HTTP requests would fire at the same time. Is this correct, or am I missing something? For example, is the NextJS fetch client clever about handling multiple redundant HTTP requests? E.g. does it detect that an incoming request is identical to one which is in flight, and cause the incoming redundant request to wait until the in-flight request finishes and populates the cache, or something like this?
I would appreciate any insight on this anyone can share. Thanks so much.