Suspense only shows its fallback once (on page load), when async component suspends, the Suspense wrapper doesn't fall back. All components working however

[kyleatcolenso]

I'm following the same streaming pattern seen in the app- playground.

Essentally I have a search subtree.

app

search

page.tsx

Here's the page.tsx.

import { Suspense } from "react";
import styles from "./Search.module.css";
import SearchMasthead from "./_sections/SearchMasthead";
import SearchResults from "./_sections/SearchResults";
import SearchResultsSkeleton from "./_sections/SearchResultsSkeleton";

export const runtime = "experimental-edge";
export const dynamic = "force-dynamic";

export default function SearchPage({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const searchQuery = searchParams.query?.toString().toLowerCase();

  return (
    <>
      <main className={styles.container}>
        <SearchMasthead />
        <Suspense fallback={<SearchResultsSkeleton />}>
          {/* @ts-expect-error Async Server Component */}
          <SearchResults
            data={fetch(
              `https://dummyjson.com/products/search?q=${searchQuery}`,
              {
                cache: "no-store",
              }
            )}
          />
        </Suspense>
      </main>
    </>
  );
}

Notice the SearchResults component is wrapped in a Suspense component and has a skeleton fallback.

Here's the SearchResults.tsx

import styles from "../Search.module.css";
import SearchProductCard from "./SearchProductCard";

export default async function SearchResults({
  data,
}: {
  data: Promise<Response>;
}) {
  // fake delay of 3 seconds
  await new Promise((resolve) => setTimeout(resolve, 3000));

  const { products } = (await data.then((res) => res.json())) as any;

  return (
    <>
      <section className={styles.productGridHeader}>
        <h2 className={styles.gridTitle}>Products</h2>
        <span className={styles.gridCount}>
          {products ? products.length : 0} Results
        </span>
      </section>
      <section className={styles.productGrid}>
        {products.map((product: any) => {
          return (
            <SearchProductCard
              title={product.title}
              thumbnail={"/placeholder-slim.png"}
              description={
                "Description of the product that contains the keywords..."
              }
            />
          );
        })}
      </section>
    </>
  );
}

This works perfectly when the page first loads. However, <SearchMasthead /> actually has a search bar in it. What this will do is router.push('/search?query=${query}'). At this point the route / url updates and the API call gets done again, and successfully returns new results that I searched for.

The only problem i'm running into here is that during that second API call, the Suspense isn't falling back to the skeleton for this second call, the previous results are showing all the way up until they're instantly updated with the new results.

I'm relatively new to Nextjs so any clarification on what I should be doing here would be great. I'd prefer to keep this server side and not convert to client components as I'm a bit stubborn that this is the pattern shown in the playground.

Edit: One observation I made was that the URL only changes once the API call is completed again, so https://localhost:3000/search?query=phone wont change to https://localhost:3000/search?query=watch until the SearchResults are showing watches.

[kyleatcolenso]

@delbaoliveira I hope you don't mind me tagging you here, as you are the author of the example I'm following 😅

[zhanghaoda]

I've faced similar issue, and fix the problem when i add key prop to Suspense, like:

<Suspense key={suspenseKey} fallback={<Loading />}>
  {/*@ts-ignore*/}
  <DataTableComponent />
</Suspense>

suspenseKey could be the unique key relevant to the searchParams.

hope it helps!

[singleseeker]

What does your DataTableComponent code look like?
I found that, with this tip, when I click the button, I get a delay first.

@zhanghaoda

[Neo-Ciber94]

Tried this, but doesn't work for me

[christopher-caldwell]

Does this turn your entire route dynamic? This works for me, but causes side effects.

const Page = ({ searchParams }) => {
  return (
    <>
      <Suspense key={JSON.stringify(searchParams)}>
        <DynamicContent searchParams={searchParams} />
      </Suspense>
      <StaticContent />
    </>
  )
}

This might an issue with something like partial prerendering, but doing the above causes the whole route to go dynamic, when there is a valid case (I think) for ppr. Removing the key makes the page ppr, but then does not trigger fallbacks

[samithf]

it worked for me

[surjithctly]

Thanks @zhanghaoda for the solution.

I've solved it by adding key as you mentioned so that for each searchParam change, the SSR Suspense loading skeleton would appear.

export default async function Page({ searchParams }) {

  const params = new URLSearchParams(searchParams);

  return (
    <Suspense key={params.toString()} fallback={<Loading />}>
        {/* fetch data inside Listing*/}
        <Listing/>
   </Suspense>
   );
}

Note for googlers:
Another mistake I made earlier was fetching data outside the suspense and sending the data as props. The data fetching should happen inside the Suspense boundary to make the suspense work. It's inside the Listing in the above example.

[MelancholYA]

does it work after deploying ?

[engagepy]

Mine doesn't. Have not put key since context is different.

[RestartDK]

The data fetching should happen inside the Suspense boundary to make the suspense work. It's inside the Listing in the above example.

This comment saved my one hour frustration thank you for putting this up!

[zacBkh]

does it work after deploying ?

Does not work for me FYI with latest nextjs

[Jared-Dahlke]

can we suspend something in a client component with latest Nextjs?

[engagepy]

I am trying to do the same.

Works on local, but not post deployment on vercel.

[HamedSiaban]

I have not tested this, but You know this kind of headache is only for people (like me) who want to implement components server side as much as possible.
If you're going to do something client side, You can easily use react hooks to implement it.
Either use useTransition hook, or a useState hook for loading state.

[zacBkh]

Hello everyone,

My suspense usage is working perfectly in dev but not after deploying to Vercel...
Any insights? Is it caching?