How can i trigger suspense when search param change in NexJS 16 with cache component

[ThangBui2703]

Hi, I am following the Next conf project (https://github.com/vercel-solutions/nextjs16-conf-workshop) to learn cache component. i want re-trigger suspense when my searchPrams change for loading UI
And i try to add key to suspense by await the searchParams but i have error Uncached data was accessed outside of Suspense
This is my code:

import { getBlogPosts, getCategories } from "@/api";

import BlogPosts, { BlogPostsSkeleton } from "@/components/blog-posts";
import CategoryFilter from "@/components/category-filter";
import { Suspense } from "react";

export async function SearchResults({ searchParams }: { searchParams: Promise<{ category?: string, search?: string }> }) {
const { category } = await searchParams;
const posts = await getBlogPosts(category);
return
}

export default async function BlogPage({
searchParams,
}: {
searchParams: Promise<{ category?: string }>;
}) {
const categories = await getCategories();
return (



Blog Posts

Discover our latest articles and insights


  <CategoryFilter categories={categories} />

    <Suspense fallback={<BlogPostsSkeleton />} key={JSON.stringify(await searchParams)}>
      <SearchResults searchParams={searchParams} />
    </Suspense>
</div>
);
}

I already try to use "use cache: private" for using search params but it not re-trigger the suspense

Thanks for help me.

[icyJoseph]

I think you can do this trick:

// src/app/blog/page.tsx

async function SearchResultsContainer({
  searchParams,
}: {
  searchParams: Promise<{category?: string}>;
}) {
  const {category} = await searchParams;

  return (
    <Suspense key={category} fallback={<BlogPostsSkeleton />}>
      <SearchResults category={category} />
    </Suspense>
  );
}

export default function BlogPage({searchParams}: {searchParams: Promise<{category?: string}>}) {
  return (
    <div>
      <CategoryFilter />
      
      <Suspense fallback={<BlogPostsSkeleton />}>
        <SearchResultsContainer searchParams={searchParams} />
      </Suspense>
    </div>
  );
}

It's like you want to show some fallback for the searchParam access and then also for when you do work within the SearchResults - that one has to be keyed.

This is a client component version of it: #85278 (reply in thread)

Also I think it is worth exploring past the workshop: /blog/[[...category]]/page.tsx with a sibling loading and parent layout.

// /blog/[[...category]]/page.tsx
import {getBlogPosts} from "@/api";

import BlogPosts from "@/components/blog-posts";

export default async function BlogPage(props: PageProps<"/blog/[[...category]]">) {
  const {category} = await props.params;

  const posts = await getBlogPosts(typeof category === "string" ? category : undefined);

  return <BlogPosts posts={posts} />;
}

This is really just defining the fallback UI for Suspense boundary that wraps your page (if you don't define it then nothing is wrapped IIRC)

// /blog/[[...category]]/loading.tsx
import {BlogPostsSkeleton} from "@/components/blog-posts";

export default function Loading() {
  return <BlogPostsSkeleton />;
}

And

// /blog/layout.tsx
import {getCategories} from "@/api";

import CategoryFilter from "@/components/category-filter";

export default async function Layout({children}: LayoutProps<"/blog">) {
  "use cache";
  const categories = await getCategories();

  return (
    <div className="container mx-auto flex flex-col gap-8 px-4 py-8">
      <header>
        <h1 className="mb-4 text-4xl font-bold">Blog Posts</h1>
        <p className="text-muted-foreground">Discover our latest articles and insights</p>
      </header>

      <CategoryFilter categories={categories} />

      {children}
    </div>
  );
}

Screen.Recording.2025-11-12.at.21.03.51.mov

[ThangBui2703]

I am fixing that by create loading.tsx, because loading.tsx also a suspense boundary but my header and category do not prebuild as html any more, instead it prebuild the loading.tsx file. So Cache component do not work in this case ?

[icyJoseph]

This is why right now, in the learning path of Cache components, the loading.tsx is often not a super good idea. In your case you likely also needed a layout. Layout wraps the loading, and the page.

In this case, for learning purposes, I'd stick to the Suspense boundary in your page code, to have a clear view of the tree hierarchy.

Does that make sense?

[lewiii254]

once you add a loading.tsx, it becomes the first Suspense boundary for that route, so your header + categories get wrapped by that boundary instead of being prebuilt by the Cache component. This is why the cached output no longer streams immediately.

Cache Components only work as expected when the first Suspense boundary is the one you place in the page/layout. If loading.tsx is present, it takes over that role.

So in your case:

• If you want to re-trigger Suspense on searchParams change and keep the cached HTML for your header/categories → avoid using loading.tsx and keep a manual <Suspense> in the page.
• If you do need loading.tsx, then wrap your static UI in a layout, because layouts render outside the route-level loading boundary.

So the rule of thumb is:

Cache Components + route-level loading.tsx conflict unless the cached UI lives in a parent layout.