HTML i CSS · Senior · Pytanie 16 z 75
Jakie problemy ma runtime CSS-in-JS (styled-components, Emotion) z SSR i React Server Components?
- 1Żadnych: są w pełni kompatybilne z Server Components i streamingiem
- ✓Poprawna odpowiedź: Style tworzone są w czasie działania: trzeba je zebrać przy SSR, a RSC nie mają kontekstu
- 3Nie potrafią definiować media queries i pseudoklas podczas SSR
Wyjaśnienie
Runtime CSS-in-JS oblicza style podczas renderowania i wstrzykuje je do dokumentu: na serwerze style trzeba zebrać i wstawić do HTML (inaczej pojawia się mignięcie), a na kliencie płaci się kosztem runtime'u. Opierają się na React Context, którego Server Components nie mają, więc takie komponenty muszą być klienckie. Alternatywy: CSS Modules, Tailwind, rozwiązania zero-runtime (vanilla-extract, Linaria, Panda).