CSS-in-JS Limitations

~18 min · CSS-in-JS, styled-components, registry

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Why styled-components and emotion struggle

Both inject styles at runtime via JavaScript. Server Components ship zero JS to the client; runtime CSS-in-JS therefore can't work in a Server Component. The directive boundary becomes a hard wall.

Approach	Server Components	Client Components
CSS Modules	✅	✅
Tailwind CSS	✅	✅
styled-components	❌	✅ (with registry)
emotion	❌	✅ (with registry)

The registry pattern

If you must keep CSS-in-JS, wrap your app in a Client "style registry" that collects styles during server rendering and flushes them into the response. Performance is a tax you pay forever.

The clean answer

For new projects, use Tailwind or CSS Modules. They run everywhere and cost nothing at runtime.

Code

styled-components registry·tsx

// lib/StyledComponentsRegistry.tsx
'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

export function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
  const [sheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });

  return (
    <StyleSheetManager sheet={sheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

External links

CSS-in-JS docs

Exercise

If your project uses styled-components, set up the registry pattern and verify SSR styles arrive without a flash of unstyled content. If not, write a one-paragraph case for / against introducing it.