Help understanding UI libraries and client vs server components
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
It seems like almost all react UI library components are client components due to the hooks used, does this mean we lose any benefits if say a Mantine, or MUI component is used inside of a server component?
If my server page.jsx imports a client component, does it lose any benefits versus if I coded something directly using tailwind instead of using a library?
If my server page.jsx imports a client component, does it lose any benefits versus if I coded something directly using tailwind instead of using a library?
Answered by B33fb0n3
benefits if say a Mantine, or MUI component is used inside of a server component?yes and no. It depends on how there are structured and created.
Shadcn (also a design library) creates components, style them with tailwind css and they work on both sides: serverside and clientside.
You can try to import them into a server component. If that throws an error, they don't support it. Else, they support it.
If my server page.jsx imports a client component, does it lose any benefitsThe server component part will stay serverside and the client component part will stay clientside
4 Replies
@Asiatic Lion It seems like almost all react UI library components are client components due to the hooks used, does this mean we lose any benefits if say a Mantine, or MUI component is used inside of a server component?
If my server page.jsx imports a client component, does it lose any benefits versus if I coded something directly using tailwind instead of using a library?
benefits if say a Mantine, or MUI component is used inside of a server component?yes and no. It depends on how there are structured and created.
Shadcn (also a design library) creates components, style them with tailwind css and they work on both sides: serverside and clientside.
You can try to import them into a server component. If that throws an error, they don't support it. Else, they support it.
If my server page.jsx imports a client component, does it lose any benefitsThe server component part will stay serverside and the client component part will stay clientside
Answer
@Asiatic Lion solved?
Asiatic LionOP
solved! thanks for the help 🙂
happy to help