4 replies

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.

TTC

Theo's Typesafe Cult•14mo ago•

4 replies

vhforbes

Suspense boundary trigger

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>
  );
}

Suspense boundary trigger

Similar Threads

Suspense boundary trigger

Similar Threads

Similar Threads

Similar Threads