Блог

Я использую nextjs для SSR. Я использую эту технику для визуализации стилей на стороне сервера. Поэтому, когда DOM загружается, он получает не только HTML, но и весь CSS, необходимый для рисования в теге стиля.

Как только HTML проанализирован, он начинает рисовать — пока все хорошо, проблема начинается после загрузки и анализа JS. В частности _app.js , styled-components удаляет существующие стили, ссылки.

Как это влияет на производительность?

Мое единодушие:

• FCP и LCP будут отложены из-за перекраски
• Когда браузер занят рисованием и перекраской, основной поток блокируется и может быть не в состоянии обрабатывать взаимодействие с пользователем, что в конечном итоге приведет к снижению частоты кадров.

Происходит ли то же самое при изменении маршрута, потому что он будет извлекать новые файлы JS, компилировать и устанавливать стили. Это та стоимость, которую мы имеем для стилизованных компонентов?

Использование стилизованных компонентов сопряжено с определенными затратами, оно отлично подходит для статически создаваемых веб-сайтов/приложений, но рендеринг на стороне сервера определенно не является его сильной стороной. каждое обновление они пытаются повысить свою производительность в SSR на несколько процентов. Это определенно известная проблема, и такие компании, как Atlassian, работают над преодолением этого узкого места. Это единственная причина, по которой они работают над Compiled CSS-в-JS, которая направлена на устранение этой проблемы путем быстрого доступа к вашему коду во время компиляции. Ознакомьтесь с официальной документацией

а также ознакомьтесь с этой замечательной статьей Натана на LogRocket dev о компиляции и ее происхождении