Projects
Services
Migration
Blog
Alt textAlt text

The state of Chakra UI & Next 13.4

Reading Time

3 min read

Published on

May 22, 2023

Author

We're approaching the renaissance of web development. Or if you've been around the forums on the web... The "PHP Part 2" days. You might be asking why the time is so fraught with discussion and why that awful language (PHP) has been brought up once again.

It's React Server Components. You've potentially heard of them, but here's the basic gist of what's happened. They're the new way of handling client/server-side rendering. Why is this important? Well, let me give you the rule of thumb.

Just use "use client" less

Essentially for the purpose of this explanation, everytime a dev uses "use client", a decent chunk of Javascript is passed to the end user. A chunk of javascript is slow to load, and overall the more chunks of javascript get passed, the slower your website will be and the madder the overseer Google will be, and shove you to the bottom of the search results.

What has this got to do with Chakra UI?

Well if you've been following so far, there's probably a good reason that I've filled the exposition of the first two paragraphs with a definition of "use client".

You guessed it. Chakra UI pretty much only works with "use client" and therefore ships a ton of Javascript to the end user. So not good.

Where does this leave us? Well, frankly, there are a couple of solutions how to band-aid fix this. See here. But none of them are actually all that convincing of a solution. So the next best thing is flagging this to the world for anybody considering using Chakra UI, such as ourselves.

image-2eaeafe7a654d66cd30b988d17bbe15034fd32a5-3008x1444-png

Our thoughts

We personally reckon this issue will be solved in the coming months, as Next 13.4 (RSC became product-ready) has only been out for 18 days. However, if you plan to build something using the Next.js app directory and server components, it would be a safer bet to use Tailwind.css for now.

If you're looking for more in-depth takes and checking on progress, there is a V3.0 roadmap. Part of that roadmap includes a static way of handling stylings - which, in theory, means you won't have the "use client" issue if they migrate to it. However, we're ultra-cynical at the best of times, so until we see a working prototype, it's probably not something we would rely on seeing the light of day.

EDIT: Found out there's a pretty damn good write-up available here from Segun Adebayo himself
Get in touch

Starting to "use client"

If you're looking at building with the latest and greatest "React Server Components" get in touch, we've had our fair share of experience and we'd love to talk shop.

Logo

Services

Legal

Like what you see?

Sign up for our newsletter to stay up to date with our latest projects and insights.

© 2024 Roboto Studio Ltd - 11126043

Roboto Studio Ltd,

71-75 Shelton Street,

Covent Garden,

London, WC2H 9JQ

Registered in England and Wales | VAT Number 426637679