Next.js Discord

Discord Forum

Suspense Fallback not showing when changing search params

Answered
Jumbo flying squid posted this in #help-forum
Open in Discord
Jumbo flying squidOP
Hey all, in my application I have a page which contains an async component that fetches some data:

/dashboard/page.jsx
export default function Dashboard({ params, searchParams }) {
  const { id } = params;
  const { view: resultsView, dataView } = searchParams;

  return (
    <>
      <PageHeader />
      <Suspense
        fallback={<MainDataVizSkeleton {...{ resultsView, dataView }} />}
      >
        <MainDataViz {...{ id, resultsView, dataView }} />
      </Suspense>
    </>
  );
}


/MainDataViz.jsx
export const MainDataViz = async ({
  id,
  resultsView,
  dataView,
}) => {
  if (!dataView) {
    dataView = "Performance";
  }

  const data = await getMainData({
    id,
    resultsView,
    dataView,
  });

  ...
}

Right now the Skeleton fallback is rendering when the page first loads, but not when clicking a Link component to update the dataView search param. I expected that because changing that value causes the component to get fetch new data that it would trigger the suspense fallback again but I am not seeing that behavior.

If anyone could help me understand why the fallback is not being triggered when changing the dataView search parameter that would be great!
Answered by Siberian Flycatcher
Hi 👋

Try this:

/dashboard/page.jsx
export default function Dashboard({ params, searchParams }) {
  const { id } = params;
  const { view: resultsView, dataView } = searchParams;

  return (
    <>
      <PageHeader />
      <Suspense
     👉 key={searchParams.yourChangingProp}
        fallback={<MainDataVizSkeleton {...{ resultsView, dataView }} />}
      >
        <MainDataViz {...{ id, resultsView, dataView }} />
      </Suspense>
    </>
  );
}
View full answer

5 Replies

Shy Albatross
isn't your Link just prefetching the page so that it gets rendered ahead of time, not when you actually click the Link?
@Shy Albatross isn't your Link just prefetching the page so that it gets rendered ahead of time, not when you actually click the Link?
Jumbo flying squidOP
For context I am encountering this in dev mode. From re-reading the docs it looks like prefetching is not enabled in dev mode. Thanks for responding!


edit: I can also confirm this is not prefetching as I have a local API instance that receives the request from the getMainData(...) function, and I only see the request corresponding to each dataLevel when I navigate to that page even though they are all <Link />'d
Siberian Flycatcher
Hi 👋

Try this:

/dashboard/page.jsx
export default function Dashboard({ params, searchParams }) {
  const { id } = params;
  const { view: resultsView, dataView } = searchParams;

  return (
    <>
      <PageHeader />
      <Suspense
     👉 key={searchParams.yourChangingProp}
        fallback={<MainDataVizSkeleton {...{ resultsView, dataView }} />}
      >
        <MainDataViz {...{ id, resultsView, dataView }} />
      </Suspense>
    </>
  );
}
Answer
Siberian Flycatcher
When you reroute to the same page, Suspense re-renders, but not remounts. To remount Suspense, you need to provide a distinct key for every render.