client component using cookies + server SSR

[jayenashar]

Summary

I have a client component that uses cookies to decide what to render. How can I get the server SSR to render the same initially, before hydration? I believe I can't use a server action because those are asynchronous and client components have to be synchronous.

I tried creating a HOC to pass the cookie value to the client component. The HOC returns a server component or client component which reads the cookie. However, using my server component like <HOCServerComponent Component={Component} props={props}/> gives ⨯ [Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.]. I don't know why next thinks it's a server function when the file looks like this:

'use server';

export default async function HOCServerComponent({Component, props}) {
  return <Component {...props} user={null}/>
}

Additional information

No response

Example

No response

[jayenashar]

https://react.dev/reference/rsc/server-components

A common misunderstanding is that Server Components are denoted by "use server", but there is no directive for Server Components. The "use server" directive is used for Server Functions.