HTML und CSS · Senior · Frage 16 von 75
Welche Probleme hat Runtime-CSS-in-JS (styled-components, Emotion) mit SSR und React Server Components?
- 1Sie können beim SSR keine Media Queries und Pseudoklassen festlegen
- 2Styles entstehen zur Laufzeit, ohne RSC-Kontext
- 3Keine: sie sind voll kompatibel mit Server Components und Streaming
Antwort zeigen
Richtige Antwort: Styles entstehen zur Laufzeit, ohne RSC-Kontext
Erklärung
Runtime-CSS-in-JS berechnet Styles beim Rendern und fügt sie ins Dokument ein: Auf dem Server müssen die Styles gesammelt und ins HTML eingebettet werden (sonst flackert es), und auf dem Client zahlt man die Laufzeitkosten. Sie stützen sich auf React Context, den Server Components nicht haben, also müssen solche Komponenten Client Components sein. Alternativen: CSS Modules, Tailwind, Lösungen ohne Laufzeit (vanilla-extract, Linaria, Panda).