There are no links in the provided repository.

There are no links in the provided repository.

Actually, there are several, they are just in the layout file not the page.

Strange, I ran this earlier and I only saw Page for index: none, maybe I accidentally removed the layout 😅 Not sure how though, https://stackblitz.com/github/wangwalton/nextjs-bug?file=src%2Fapp%2Fpage.tsx I ran it on a Stackblitz ~ anyway, looking into this

Ok, so this is like a known issue... Suspense boundaries persist, so if one already triggered, it won't trigger again, one common trick is to do:

import { Suspense } from 'react';

export default async function PageWrapper({
  searchParams,
}: {
  searchParams: Promise<{ index?: string }>;
}) {
  const search = await searchParams;
  const key = new URLSearchParams(search).toString();
  return (
    <Suspense key={key} fallback={<div>⏳ Suspense Fallback...</div>}>
      <Page searchParams={search} />
    </Suspense>
  );
}

async function Page({ searchParams }: { searchParams: { index?: string } }) {
  await new Promise((resolve) => setTimeout(resolve, 1500));
  return <h1>Page for index: {searchParams.index ?? 'none'}</h1>;
}

I'll post more x-ref links in a minute.

• Working example: https://stackblitz.com/edit/github-fce5befp?file=src%2Fapp%2Fpage.tsx using OPs submission
• Updating search params does not trigger suspense fallback or loading.tsx #53543 (comment)
• Suspense only shows its fallback once (on page load), when async component suspends, the Suspense wrapper doesn't fall back. All components working however #50563

So, by changing the key passed to the boundary, we recreate that instance, https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key

works great 👍 👍 👍 thanks so much!

The React docs do have an entry about this, I had missed it, https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation

Please don't forget to close if you are satisfied.