Hey guys, I'll try to explain it as indepth as I can.

I have this page structure:

directory, fetches data on server side, all data is present
rendering a listing page in page.tsx -> into a Card.tsx component

If I make this card component with use client at the top, then some of my data just disappears, see attached video of me constantly refreshing the page, so the data is there and then it hydrates and it disappears with no useful error.
To solve this the only way possible right now is to remove use client from all cards and then it works just fine, however I need some client side hooks like useRef


I literally have no clue as to why data would disappear like this, on a console log on the client side it's literally not there anymore, it happens with multiple data points but the confusing part is that it doesn't happen with ALL of them

Here's my fetch function ran in the server in page.tsx

 const nextCookies = cookies()

  const token = nextCookies.get('payload-token')

  const results = await fetch(process.env.NEXT_PUBLIC_API_URL, {
    method: 'POST',
    ...{
      credentials: 'include',
      headers: {
        'content-type': 'application/json',
        ...(token?.value && {
          Authorization: `JWT ${token.value}`,
        }),
      },
    },
    ...(token?.value
      ? {
          cache: 'no-store',
        }
      : {
          next: {
            revalidate: 600,
          },
        }),
    body: JSON.stringify({ query: GetSupplierBySlugDocument, variables: { slug: slug } }),
  })