Hydration errors are usually caused by randomly generating data on the client side, it is irrelevant to server components.
Hydration is a process that transforms the initial render into interactive UI after finish loading Javascript.

It happens only in client components, so if you're using server components, you won't get this error.
However, everyhing depends on the cause of hydration error, putting everything in a server component doesn't make sense.

To avoid hydration error:
1. Do not generate/use random data in client components
2. Only interact with native browser APIs in a useEffect
3. If the code causes hydration error, usually putting it in a useEffect solves the problem
4. Just ignore if it's expected, hydration errors won't crash your app. Add suppressHydrationWarning can ignore the hydration error of a element.

You need to evalute exact error. Some times you need to import components via next/dynamics.

https://ui.shadcn.com/docs/components/toast

I'm trying to use this shadcn component, I've already made some attempts by placing some components with the dynamic do next but without success

I remember it was a bug related to Radix UI, about Portal or useId. Just add suppressHydrationWarning since it's expected

i think nextjs latest should have this bug fixed already

upgrade nextjs to latest version

ACTUALLYYY no this is not the same thing; the nextjs bug causing useId to error out would cause an error message like server: :abcd:, client: :efgh: where abcd and efgh are random strings

this is your code bug

you have to put Toaster inside body

solved, it was very simple 🤦