Hey everyone 👋
I have an issue with Next.js (App Router, page.tsx).

In my page.tsx I fetch data on the server and pass it to a client component:

```tsx
return (
<DerivationsClient
f_derivations={l_derivations_data}
f_cycles={l_cycles.data}
f_documentations={l_documentations.data}
f_qualifications={l_qualifications.data}
unauthorized={{
derivations: l_derivations.isUnauthorized,
cycles: l_cycles.isUnauthorized,
documentations: l_documentations.isUnauthorized,
qualifications: l_qualifications.isUnauthorized,
}}
/>
);

f_derivations is every second hard refresh empty in the client,
but on the server side the data is always there (I logged it in page.tsx).

Some details:
The f_derivations array has ~1200 objects.
The other props (f_cycles, f_documentations, f_qualifications) are always fine.
No errors in the browser console.

My questions:
Any idea what could cause this “every second refresh is empty in the client but not on the server” behavior?

Is passing an array of ~1200 objects from a server component to a client component a problem in Next.js (serialization, limits, etc.)?

Whats the recommended way to handle larger datasets in Next.js for a data management app (pagination, infinite scroll, client-side fetching, something else)?