How to pass fetched data to client components without streaming when cacheComponents is enabled?

[AmirHosseinNP]

Summary

Hello. I'm fetching and caching data in a function using the "use cache" directive. I'm calling and awaiting the function in a server component, but when I want to pass the fetched data to a client component, it wants me to wrap the client component in a Suspense tag, but I don't want to stream the fetched data; I want it to be prerendered and be interactive at the client side.

Additional information

No response

Example

No response

[pouriya73]

Hi @AmirHosseinNP

<Suspense> does not automatically mean streaming.

Suspense is just the mechanism React uses when something can suspend.
If your page is pre-rendered (SSG) or server-rendered without streaming, Suspense can still be present and your output can still be fully prerendered HTML. The fallback is only meaningful if something actually suspends at runtime.

Make sure you pass plain serializable data (no Promises, no class instances, no Dates without conversion, no BigInt, no Response objects).

Server component:

import ClientView from "./ClientView";

export default async function Page() {
  const data = await getData(); // uses "use cache" inside getData
  return <ClientView data={data} />;
}

Client component:

"use client";

export default function ClientView({ data }: { data: any }) {
  // fully interactive, no Suspense needed
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

If Next still asks for Suspense, it’s a signal that data isn’t actually a plain resolved value in a way it can serialize safely.

normalize it:

const json = await res.json();
return JSON.parse(JSON.stringify(json)); // brute-force normalization

[AmirHosseinNP]

Thank you. You are right. I was receiving the Suspense warning because I was using the Nuqs library in my client component, and I thought it was due to the data fetching.