Need help with app architecture
Answered
ionel lupu posted this in #help-forum
We have a website where you can search for hotels. You can input your location and dates and you will get a list of hotels. The pages for a website like this can be:
- the home page which welcomes you at "/"
- the hotel results page with the hotels you are looking for (and URL query params with your search info)
But, our setup is a bit more complex than that (also, the API can't be changed)
So, this is the following flow:
- a user hits the search button in order to search for hotels, which redirects the user from "/" url to "/hotels" url which has a loading spinner from a <Suspense> component.
- the "/hotels" url, a server component, calls an API endpoint (let's call it "/init") to quickly get some hotels (it also contains a "search ID" string value which will come handy later). I say "quickly" because it's not precise, but it returns something users can see while waiting. There is also and API endpoint (let's call it "/results" that returns a precise list of hotels, but it takes like 10s to load. We display the hotels from /init while the user waits ~10s for the hotels from /results
- In order for the /results API endpoint to work, we send the "search ID" from the /init API request to the /results API request
- in order to have this "search ID", I made the /hotels page to redirect to "/hotels/[searchID]"
- the "/hotels/[searchID]" takes the "search ID" param and passes it to the /results API endpoint to get the final hotels
- the home page which welcomes you at "/"
- the hotel results page with the hotels you are looking for (and URL query params with your search info)
But, our setup is a bit more complex than that (also, the API can't be changed)
So, this is the following flow:
- a user hits the search button in order to search for hotels, which redirects the user from "/" url to "/hotels" url which has a loading spinner from a <Suspense> component.
- the "/hotels" url, a server component, calls an API endpoint (let's call it "/init") to quickly get some hotels (it also contains a "search ID" string value which will come handy later). I say "quickly" because it's not precise, but it returns something users can see while waiting. There is also and API endpoint (let's call it "/results" that returns a precise list of hotels, but it takes like 10s to load. We display the hotels from /init while the user waits ~10s for the hotels from /results
- In order for the /results API endpoint to work, we send the "search ID" from the /init API request to the /results API request
- in order to have this "search ID", I made the /hotels page to redirect to "/hotels/[searchID]"
- the "/hotels/[searchID]" takes the "search ID" param and passes it to the /results API endpoint to get the final hotels
Answered by ionel lupu
so.... I had to go with another approach to fix all of these issues:
- have only one route /hotels and remove the /hotels/[searchId]
-have the searchID as a query parameter
Having searchID as a parameter makes the fetch request cache the response, so to fix this, I have to do router.refresh() after removing it from the URL. (I remove the searchID from the URL in order to trigger a completely new search)
Now, there is still a weird bug: if I add a 2s wait before making the fetch request, it somehow makes the fetch not cache anything making the page reload indefinitely. It's a small issue because I manually added that 2s wait. If I remove the artificial wait, everything works correctly. I just hope we won't have this issue in production
- have only one route /hotels and remove the /hotels/[searchId]
-have the searchID as a query parameter
Having searchID as a parameter makes the fetch request cache the response, so to fix this, I have to do router.refresh() after removing it from the URL. (I remove the searchID from the URL in order to trigger a completely new search)
Now, there is still a weird bug: if I add a 2s wait before making the fetch request, it somehow makes the fetch not cache anything making the page reload indefinitely. It's a small issue because I manually added that 2s wait. If I remove the artificial wait, everything works correctly. I just hope we won't have this issue in production
2 Replies
Scenarions:
- the user can refresh the page. At this point, I want to render the cached hotels from the /init API endpoint while the user is waiting for the /results API endpoint to load again. The /results API endpoint is never cached.
- while on the /hotels/[searchID] page, the user can restart the search by clicking a button on the page. This will redirect the user to the "/hotels" page again . Which means, it will trigger the /init API endpoint again and everything starts over. I want to clear any caches at this point for the /init API endpoint
There are two problems we are facing:
1. if the user clicks the search buttons again to restart the search (we are using using
2. having the two pages /hotels and /hotel/[searchID] with the same loading.tsx, makes the page flicker when the redirect happens from /hotels to /hotel/[searchID].
Now, I know our setup is not quite correct, but I run out of ideas about how to make it work. Would appreciate if we can get in a call to show you. There are a lot more to say, but this is the gist of it
- the user can refresh the page. At this point, I want to render the cached hotels from the /init API endpoint while the user is waiting for the /results API endpoint to load again. The /results API endpoint is never cached.
- while on the /hotels/[searchID] page, the user can restart the search by clicking a button on the page. This will redirect the user to the "/hotels" page again . Which means, it will trigger the /init API endpoint again and everything starts over. I want to clear any caches at this point for the /init API endpoint
There are two problems we are facing:
1. if the user clicks the search buttons again to restart the search (we are using using
router.push("/hotels") on the button), the /hotels page isn't rendered on the server anymore after the 2nd click. It's only rendered after the 1st click.2. having the two pages /hotels and /hotel/[searchID] with the same loading.tsx, makes the page flicker when the redirect happens from /hotels to /hotel/[searchID].
Now, I know our setup is not quite correct, but I run out of ideas about how to make it work. Would appreciate if we can get in a call to show you. There are a lot more to say, but this is the gist of it
so.... I had to go with another approach to fix all of these issues:
- have only one route /hotels and remove the /hotels/[searchId]
-have the searchID as a query parameter
Having searchID as a parameter makes the fetch request cache the response, so to fix this, I have to do router.refresh() after removing it from the URL. (I remove the searchID from the URL in order to trigger a completely new search)
Now, there is still a weird bug: if I add a 2s wait before making the fetch request, it somehow makes the fetch not cache anything making the page reload indefinitely. It's a small issue because I manually added that 2s wait. If I remove the artificial wait, everything works correctly. I just hope we won't have this issue in production
- have only one route /hotels and remove the /hotels/[searchId]
-have the searchID as a query parameter
Having searchID as a parameter makes the fetch request cache the response, so to fix this, I have to do router.refresh() after removing it from the URL. (I remove the searchID from the URL in order to trigger a completely new search)
Now, there is still a weird bug: if I add a 2s wait before making the fetch request, it somehow makes the fetch not cache anything making the page reload indefinitely. It's a small issue because I manually added that 2s wait. If I remove the artificial wait, everything works correctly. I just hope we won't have this issue in production
Answer