TTC
Theo's Typesafe Cult•4w ago
vhforbes

Suspense boundary trigger

I'm having some trouble understanding when a suspense boundary would be triggered or not. I have RSC that fetches some data and in my expectation when the URL changes with some filter options and the components starts to fetch again the fallback of the suspense should be activated. Thats not the case. The suspense boundary is only triggered on a full page refresh. 
export default async function TradeOperationsPage({ searchParams }: any) {
  return (
    <div className="container mx-auto w-full py-10">
      <h1 className="mb-4 text-2xl font-bold">Trade Operations</h1>
      <TradeOperationsFilter />
      <Suspense fallback={<TradeOperationsTableSkeleton />}>
        <TradeOperationsTable searchParams={searchParams} /> // This guy have a async fetch inside.
      </Suspense>
    </div>
  );
}
export default async function TradeOperationsPage({ searchParams }: any) {
  return (
    <div className="container mx-auto w-full py-10">
      <h1 className="mb-4 text-2xl font-bold">Trade Operations</h1>
      <TradeOperationsFilter />
      <Suspense fallback={<TradeOperationsTableSkeleton />}>
        <TradeOperationsTable searchParams={searchParams} /> // This guy have a async fetch inside.
      </Suspense>
    </div>
  );
}
Basically my expectation would be that when I change any filters it would activate the boundary. What is missing in my knowledge so I can understand it right? Really appreciate any help or direction to some more deep documentaton / issue someone already had.
3 Replies
vhforbes
vhforbesOP•4w ago
A image if it helps reading the code, the discord code is pretty ugly.
No description
vhforbes
vhforbesOP•4w ago
Solved this with this issue https://github.com/vercel/next.js/issues/53543 Basically just need to add the key to the suspense
GitHub
Updating search params does not trigger suspense fallback or loadin...
Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: linux Arch: x64 Version: #22 SMP Tue Jan 10 1...
Eren©
Eren©•4w ago
Unrelated but you can specify language name to trigger syntax highlighting 
console.log("This is js")
console.log("This is js")
```js console.log("This is js") ```

Did you find this page helpful?