Trigger Suspense on searchParams change using PPR

[leonardigabriele]

Summary

I am building an app where the posts archive gets filtered based on searchparams. Everything is server rendered and I wanted to implement finally PPR now that it is stable with version 16. So I am awaiting the searchParams prop only inside the posts component but by doing this I can't add them as a key to the parent Suspense as I would do before to trigger it while fetching the new data.
https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation

Is it possible to use PPR and also have Suspense triggering on navigation or I need to have the whole route dynamic?

Additional information

No response

Example

No response

[icyJoseph]

How are you doing this exactly?

import { setTimeout } from "node:timers/promises";
import { Suspense } from "react";

async function EchoSearchParams({ searchParams }: { searchParams: PageProps<'/'>['searchParams'] }) {
  const search = await searchParams

  await setTimeout(1000)

  return (<>
    <pre>{JSON.stringify(search)}</pre>

    <form method="GET">
      <input type="text" name="q" autoFocus />
    </form>
  </>)
}


export default function Home(props: PageProps<'/'>) {
  return (
    <>
      <h1>Echo your query</h1>

      <Suspense fallback={<p>Loading...</p>}>
        <EchoSearchParams searchParams={props.searchParams} />
      </Suspense>
    </>
  );
}

This one outputs:

Screen.Recording.2025-10-23.at.20.03.10.mov

I know what issue you are talking about, I had experienced it before, let's explore and investigate.

[leonardigabriele]

How are you updating the url? Personally the url updates only after the server fetch without triggering the Supense, I see instead in your example the url is updating immediately. Also, I am updating the searchParams outside of the suspense boundaries, higher up in the tree.

[icyJoseph]

In the snippet I shared, when the method of the action is GET, the input fields get appended to the URL as query params following some encoding rules. The problem with my example is that it hard navigates!

Let me rework this to do SPA transitions. (I was a bit tired when I sketched this one)

[leonardigabriele]

I did some tests and atm the only way to retrigger suspense is by awaiting searchparams in the direct parent and passing it as key (so another suspense then wrapping the parent too) AND using await new Promise((resolve) => setTimeout(resolve, 0)); inside the posts component before fetching data, otherwise it still doesn't trigger for some reason. Strange

[icyJoseph]

So, like, this one might look weird, but kind of gets the job done:

'use client';
import { useSearchParams } from 'next/navigation';

function SuspenseOnSearchInner({ children, fallback }: SuspenseProps) {
  const search = useSearchParams();

  return (
    <Suspense key={search.toString()} fallback={fallback}>
      {children}
    </Suspense>
  );
}

export function SuspenseOnSearch({ children, fallback }: SuspenseProps) {
  return (
    <Suspense fallback={fallback}>
      <SuspenseOnSearchInner fallback={fallback}>{children}</SuspenseOnSearchInner>
    </Suspense>
  );
}

So then my snippet turns into:

     <SuspenseOnSearch fallback={<p>Loading...</p>}>
        <EchoSearchParams searchParams={props.searchParams} />
      </SuspenseOnSearch>

And:

Screen.Recording.2025-10-24.at.15.56.17.mov

Besides the double Suspense weirdness, it should work fine I think ~ not sure if there's some more considerations I am missing. It is a bit of a lie to call it SuspenseOnSearch, cuz dynamic behavior under it would also bubble up to its fallback UI.

[daringcalf]

Double Suspense does the trick, and the outer Suspense doesn't need the fallback.