#sure, what is the issue?

1 messages · Page 1 of 1 (latest)

dense pulsar
#

Will try to explain this shortly.

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

#

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 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

clever anvilBOT
dense pulsar
marble sandal
#

I get it, have you considered intercepting the route when trying to get a hotel preview in the hotels route, it could give you a middleground to work this out

dense pulsar
#

will give it a try.

#

I forgot to mention something. The fetch request to the /init API endpoint it made both on the /hotels page and on the /hotels/[searchId] page

  • I make /init the request on the /hotels page in order to get the searchId and the quick hotels
  • I make the /init request on the /hotels/[searchId] page in order to display those quick hotels

Now, the problem is: the fetch request isn't cached on the /hotels/[searchId] page. Does NextJS cache fetch requests only if the URL is the same? It seems redirecting from /hotels to /hotels/[searchId] invalidates the cache. The API endpoint and params are EXACTLY the same.

marble sandal
#

do you have an endpoint i can connect to?