Confusion about Chakra UI support in Next.js
Answered
Beveren posted this in #help-forum
BeverenOP
Next.js [documentation](https://nextjs.org/docs/app/getting-started/css#css-in-js) lists chakra-ui only supported in client components in the
But chakra-ui [documentation](https://www.chakra-ui.com/docs/components/concepts/server-components) say its components can be used in Next.js app router without
- Is Next.js documentation behind then?
- If chakra-ui provides me with client components how come I don't need to use the
I was also wondering why would anyone want to put their styling on server unless they are building something like a static blog page?
Since the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
app directory. And suggest using Tailwind CSS to style server components instead. But chakra-ui [documentation](https://www.chakra-ui.com/docs/components/concepts/server-components) say its components can be used in Next.js app router without
"use client" directive. That doesn't sound right to me. - Is Next.js documentation behind then?
- If chakra-ui provides me with client components how come I don't need to use the
"use client" directive?I was also wondering why would anyone want to put their styling on server unless they are building something like a static blog page?
The HTML is used to immediately show a fast non-interactive initial preview of the route. [1](https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-load)
Since the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
Answered by Rafael Almeida
the chakra components can be used on server components because they are marked as
all css-in-js libs that require client components (like chakra) will need to hydrate on the client, so performance-wise they are worse alternatives than using something that doesn't require client components, like tailwind or a more modern css-in-js lib
'use client' internally so you don't need to do it yourself, both documentations are correctSince the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
all css-in-js libs that require client components (like chakra) will need to hydrate on the client, so performance-wise they are worse alternatives than using something that doesn't require client components, like tailwind or a more modern css-in-js lib
3 Replies
@Beveren Next.js [documentation](https://nextjs.org/docs/app/getting-started/css#css-in-js) lists chakra-ui only supported in client components in the `app` directory. And suggest using Tailwind CSS to style server components instead.
But chakra-ui [documentation](https://www.chakra-ui.com/docs/components/concepts/server-components) say its components can be used in Next.js app router without `"use client"` directive. That doesn't sound right to me.
- Is Next.js documentation behind then?
- If chakra-ui provides me with client components how come I don't need to use the `"use client"` directive?
I was also wondering why would anyone want to put their styling on server unless they are building something like a static blog page?
> The HTML is used to immediately show a fast non-interactive initial preview of the route. [1](https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-load)
Since the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
the chakra components can be used on server components because they are marked as
all css-in-js libs that require client components (like chakra) will need to hydrate on the client, so performance-wise they are worse alternatives than using something that doesn't require client components, like tailwind or a more modern css-in-js lib
'use client' internally so you don't need to do it yourself, both documentations are correctSince the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
all css-in-js libs that require client components (like chakra) will need to hydrate on the client, so performance-wise they are worse alternatives than using something that doesn't require client components, like tailwind or a more modern css-in-js lib
Answer
@Rafael Almeida the chakra components can be used on server components because they are marked as `'use client'` internally so you don't need to do it yourself, both documentations are correct
> Since the initial page styling is rendered on the server anyway, are any practical benefits to using server side styling solution like Tailwind CSS over CSS-in-JS libraries?
all css-in-js libs that require client components (like chakra) will need to hydrate on the client, so performance-wise they are worse alternatives than using something that doesn't require client components, like tailwind or a more modern css-in-js lib
BeverenOP
I am thinking that most client components require interactivity. Like a form component for example. So it will have to marked with
"use client" and require hydration anyway. It doesn't look practically any beneficial to use native CSS solution here. Am I thinking wrong here?for an interactive form yeah but chakra has a lot of primitives that you end up using everywhere (Box, Flex, Stack) that don't really need to be client components, the performance penality is way higher