HTML & CSS · Senior · Question 16 of 75
What problems does runtime CSS-in-JS (styled-components, Emotion) have with SSR and React Server Components?
- 1None: they're fully compatible with Server Components and streaming
- ✓Correct answer: Styles are created at runtime: they must be collected during SSR, and RSC has no context
- 3They can't define media queries and pseudo-classes during SSR
Explanation
Runtime CSS-in-JS computes styles during render and injects them into the document: on the server the styles must be collected and inlined into HTML (otherwise you get a flash), and on the client you pay the runtime cost. They rely on React Context, which Server Components lack, so such components must be client components. Alternatives: CSS Modules, Tailwind, zero-runtime solutions (vanilla-extract, Linaria, Panda).