Верстка · Senior · Запитання 16 з 75
Які проблеми в runtime CSS-in-JS (styled-components, Emotion) під час SSR і з React Server Components?
- 1Жодних: вони повністю сумісні із Server Components і стримінгом
- ✓Правильна відповідь: Стилі створюються в рантаймі: потрібне їх збирання під час SSR, а в RSC немає контексту
- 3Вони не вміють задавати медіазапити й псевдокласи під час SSR
Пояснення
Runtime CSS-in-JS обчислює стилі під час рендеру й вставляє їх у документ: на сервері стилі треба зібрати й вбудувати в HTML (інакше мерехтіння), на клієнті - заплатити часом виконання. Їм потрібен React Context, якого немає в Server Components, тому такі компоненти мають бути клієнтськими. Альтернативи - CSS Modules, Tailwind, zero-runtime рішення (vanilla-extract, Linaria, Panda).