Style React Server Components with typed props and no 'use client', style registry or build plugin, with the CSS inside the HTML React streams. This article shows how that works in a Next.js App Router app, measures what it costs against a plain CSS module, and lists what still has to run on the client.

The examples here are screenshots; they run live in the original article .

The problem

You moved a page to the App Router, and the first component that styles itself wants 'use client' . Runtime CSS-in-JS works by collecting styles while the tree renders and then writing them somewhere, either from an effect or through a context that a provider sets up. A Server Component has neither. It runs once, on the server, and React never calls an effect there.

The Next.js guide to CSS-in-JS lists the popular libraries as supported in Client Components .…