Error: Hydration failed because the initial UI does not match what was rendered on the server.

[wooden shore]

I'm having a hell of a time figuring this out. I'm using Next 13 and in multiple cases I'm triggering this error. Please help me determine if this is the right way to approach things.

In one case, I am loading a Material UI table on a page. This is how I have it set up:
I have a getClientDetails.js server component that pulls the data from the DB via Prisma like this const clientProjects = await getClientProjects(params.id);
I have a clientProjectTable.js client component which builds the table
In page.tsx I execute getClientDetails then pass the array to clientProjectTable to build the table like this <ClientProjectTable value={clientProjects} />

Every time the table renders on the page, I get the hydration error.

In the console I also get the message Warning: Only plain objects can be passed to Client Components from Server Components. Date objects are not supported.

The same issue is happening on the page where I'm loading the Auth.js login form. As the form loads, I get the same hydration error.

Am I misunderstanding something fundamental here?

I've spent hours trying to figure this out, any help you can provide is appreciated.

[cyan swallow]

The way you're doing this looks correct and how server components are supposed to be used.

Seems like you're creating a Date object somewhere in a server component. Be careful with dates, because they will be different depending on the local time of the server and client and then will cause hydration errors. Props that are passed from a server component to a client component need to be serializable. Date objects aren't. Pass dates as a string or number.

Also note that the client component renders on both server and client, so a Date object should only be created within useEffect. Very annoying topic.

[wooden shore]

Ok I will remove the date columns from my queries when I get home and see if that helps.

[wooden shore]

Hey @cyan swallow do you know how to go about changing this item from a Decimal to a String before passing it into the ChildComponent?

[wooden shore]

Hey @cyan swallow I want to confirm that the issue was being caused by the non-serialized data being passed into the Client Component. This issue is resolved! Thanks for your help.