CSS-in-JS and React Server Components: A Developer Guide

With React’s evolving ecosystem, particularly with Next.js shifting toward a “server-first” approach, applications using CSS-in-JS solutions like Emotion and styled-components are facing significant challenges. These CSS-in-JS libraries are inherently incompatible with the new React paradigm.

While one could argue these libraries could be updated to align with the new server-first direction, it’s important to remember that they’re maintained by unpaid open source contributors. Expecting them to completely overhaul their libraries to accommodate changes in React is a daunting and potentially unrealistic task.

Let’s look at why some CSS-in-JS solutions are unable to work in the new server-first world, then I’ll introduce you to one alternative, Linaria, which uses an almost identical API as styled-components

The RSC Paradigm

This is going to turn into a long-winded explanation, but it’s important to understand how React used to work (pre-React Server Components) and how it works now (post-RSC).