next.js: [NEXT-1141] Next router / link not working when redirecting with new search params [Regression]

Hey everyone, is there any update on this? loading.tsx is not rendering once searchParams has changed after using the example in the docs.

I experimented a little and found that using a regular anchor tag “a” instead of Link trigger loading.tsx every time.

I guess all assets are reloaded when using tag “a”

What I’ve done to circumvent this issue is to use my own suspense boundary (with a key prop) instead of relying on the loading.tsx file’s boundary.

In the Suspense’s key prop I stringify the search params, that way it’ll re-render (and fallback) whenever the search params change.

With this approach I was also able to exclude certain params from influencing the loading state, like the currently opened dialog.

example: https://github.com/wise-old-man/wise-old-man/blob/53bbe450f845d220895a46eee3f9da903f34674f/app-v2/src/app/names/page.tsx#L55

I tried this, and it’s only working for me in dev but not in prod:

import { Suspense } from 'react';

import { getHouses } from '@/utils/houses';

import Listings from '../components/listings';

type Props = {
  searchParams: {
    [key: string]: string;
  };
};

export default async function SearchPage({ searchParams }: Props) {
  const key = JSON.stringify(searchParams);
  const listingsPromise = getHouses(searchParams);

  return (
    <Suspense key={key} fallback={<Listings.Skeleton />}>
      {/* @ts-expect-error Async Server Component */}
      <Listings listingsPromise={listingsPromise} />
    </Suspense>
  );
}

PS: Keep in mind I’m sending the promise and not the result so that shouldn’t be a problem.

I had this issue today and had a difficult time finding a solution until i found this thread, using a key on the Suspense Element fixes it.

Let’s get this issue resolved 🙏

What I’ve done to circumvent this issue is to use my own suspense boundary (with a key prop) instead of relying on the loading.tsx file’s boundary.

In the Suspense’s key prop I stringify the search params, that way it’ll re-render (and fallback) whenever the search params change.

With this approach I was also able to exclude certain params from influencing the loading state, like the currently opened dialog.

example: https://github.com/wise-old-man/wise-old-man/blob/53bbe450f845d220895a46eee3f9da903f34674f/app-v2/src/app/names/page.tsx#L55

I’m doing a filter based on searchParams and I need to trigger the reload when the params change. Looking in the comments here it seems that in previous versions of Next it worked, I’m using version 14.0.3 and changing the params do not trigger the loading.tsx page.

Any updates on this?

Even with a key on Suspense I’m not seeing the loading template when updating query params and pushing into the router.

Guys, any news on that?

Any updates on this? Even with a key on Suspense I’m not seeing the loading template when updating query params and pushing into the router.

I’ve actually realized that while this may not be expected behavior, I don’t want to reload the entire fallback on query param changes. I’d rather use useTransition to provide a more subtle loading indicator per the React docs https://react.dev/reference/react/Suspense#preventing-unwanted-fallbacks.

Yes, this is something I have come to realize too, I now see the loading skeleton as the state for “no data yet”, but if I’m updating the UI with new data (maybe due to some search or filters being changed in the URL), I prefer the user to still be able to see the previous results, with some more inline and subtle indication that the data is changing.

Here’s an example in my app:

https://beta.wiseoldman.net/competitions

You’ll see that as you first visit the page, there’s a loading skeleton, but if you type in any search or select a filter, there’s a subtle inline loading indicator that uses useTransition.

I found myself doing weird things like adding a key prop to the Suspense boundary, it was usually an indication that I was fighting the mental model of the app router because I thought that all loading states are equal. I do not believe they are, anymore.

https://www.youtube.com/watch?v=UNEXbGJCTw8

In this video he demonstrates several techniques, the best for me is the one in minute 17

@psikoi is right that this is not a bug, but that the right solution is to use useTransition to show a more subtle localized loading state while query params are changing.

i added the JSON.stringify(searchParams) as a key on the suspense and it worked not in production tho , it only works in dev env