Chakra and React Server Components #10197
-
|
Hello, We’re currently working on a commerce website and focusing on optimizing performance. To reduce Total Blocking Time (TBT), we’re transitioning to React Server Components (RSC) in order to minimize the number of components that need to be rehydrated and to reduce the overall JavaScript bundle size. At the moment, while Chakra UI v3 is compatible with RSC, it’s not fully optimized for it—most components are transitively marked as client components ("use client"), even when they don’t require client-side behavior (e.g., Box). Is there a roadmap or plan to make the library more tailored to RSC, with a clearer separation between client and server-compatible components? I assume the adoption of PandaCSS is a step in that direction—is that correct? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
That's correct, Philippe. I agree that Chakra isn't fully optimized for RSC, since it's a component library with lots of logic-based components. The layout-based components could be better optimized for RSC. Moving away from runtime CSS-in-JS is on our mid-term roadmap. Like you said, we'll be leveraging most of PandaCSS's core utilities to create a static CSS-based system. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response, Segun! I was hoping that the big announcement you mentioned on LinkedIn for tomorrow might relate to this. |
Beta Was this translation helpful? Give feedback.
That's correct, Philippe.
I agree that Chakra isn't fully optimized for RSC, since it's a component library with lots of logic-based components. The layout-based components could be better optimized for RSC.
Moving away from runtime CSS-in-JS is on our mid-term roadmap. Like you said, we'll be leveraging most of PandaCSS's core utilities to create a static CSS-based system.