Delay in router.push when going from one page to another page that is rendered on server

[maneetlodha2839]

Hi Team,
I am using router.push to navigate to another page but when doing so on production there is a slight delay in going to that page, not sure but I guess it waits till the server call is resolved(I am making a server side api call). But is it possible for me to navigate to the page and have my loader shown till the response from my server is resolved. It works fine on my local but it is creating a bad user experience on production as it waits on the page till the API call on server is resolved and browser has received the response.

[devjiwonchoi]

Could you try the redirect function? This replaces by default and works great with streaming, so I'm assuming it might give you a better experience.

[devjiwonchoi]

Like this? I'm not sure if the query string also passes.

redirect(`/bus/results?${queryString}`)

If the above doesn't work, I'd be glad to help you with this, could you share a repro?

[maneetlodha2839]

I can't share that same repo due to org policies, but sharing the screenshot of the code, this code is running inside the onClick function of button:

 if (departure && arrival) {
        const queryString = `fromCity=${departure.cityId}&toCity=${arrival.cityId}&journeyDate=${journeyDate}&fromCityName=${splitDepartureCity}&toCityName=${splitArrivalCity}`;
        router.push(`/bus/results?${queryString}`, { scroll: false });
      }
      

  and this is the page.tsx file for results:

      const Page = async ({ searchParams }: { searchParams: SearchQuery }) => {
  return (
    <Suspense fallback={<CTLoader />}>
      <div className="results-page">
        <div className="flex mt-6 w-100p">
          <div className="filter-section flex-1">
            <Filters />
          </div>

          <div style={{ width: "75%" }} className="ml-12">
            <Suspense fallback={<CouponLoader />}>
              <Coupon />
            </Suspense>

            <DateTabs />

            <Suspense
              key={`${searchParams.journeyDate}_${searchParams.fromCity}_${searchParams.toCity}`}
              fallback={<TupleLoader />}
            >
              <SRP searchParams={searchParams} />
            </Suspense>
          </div>
        </div>
      </div>
    </Suspense>
  );
};

[karthikjn01]

@devjiwonchoi I'm also running into this issue - I'm not entirely sure what's caused it, I think it's the fact I was using router.push inside of a useTransition? Either way - the Next docs say to use redirect in component renders and not inside of event handlers (which is where I need my router.push). Would you be able to advise if the docs are outdated or I'm missing something, this is a huge issue for us as prod is almost unusable atm.

[karthikjn01]

I've fixed it by using redirect but I'd like to know and understand the benefits/disadvantages of using this over router.push.

[Sumanmethuku]

redirect can't be used in the client components. So, what is the ultimate solution. Could anyone explain? I am using Next.JS App router

[dommanga]

Hello. I'm having same problem with my code. Did you solve this?

[ibrahimAboelsuod]

I have the same issue even with redirect.

[Sumanmethuku]

Basically, in my case the delay is mostly because of the server side rendering and when I fixed those api's the delay is reduced.