Разве CSS-in-JS не мешает браузеру кэшировать CSS?

Question

Я ищу лучшие практики для стиля приложения React с рендерингом на стороне сервера.

Я вижу различные варианты, такие как использование препроцессоров, таких как SASS, или размещение стилей внутри кода JS, таких как JSS, компоненты стиля и т. Д.

Играя вокруг JSS, я вижу, что он помещает стили в заголовок раздела в HTML. Я просто использую следующий пример, чтобы увидеть поведение:

https://github.com/cssinjs/examples/tree/gh-pages/react-ssr

Разве это не помешает браузерам кэшировать CSS, чтобы поместить его в заголовочный раздел и, следовательно, увеличить время последовательной загрузки страницы? Есть ли способ поместить стиль во внешний файл с помощью JSS, чтобы браузер мог его кешировать?

Answer 1

В этом примере вы видите Critical CSS. Только CSS используется именно в этом представлении, он не должен кэшироваться, это быстрее, чем загрузка внешнего ресурса блокирующим способом и оплата с задержкой.

Критический CSS - это актуальная оптимизация производительности.