Обзор
Twenty пока не предоставляет гарантию серверного рендеринга для всего пакета. Проверьте конкретные точки входа и компоненты, которые вы используете, с серверной сборкой и процессом гидратации вашего фреймворка.Загружайте CSS через свой фреймворк
Библиотека поставляется с готовыми таблицами стилей. Импортируйте их из точки входа приложения или макета, из которых ваш фреймворк позволяет загружать глобальный CSS. Сервер, который импортирует JavaScript без загрузчика CSS, не может напрямую загрузить импорт таблицы стилей. Компоненты, использующие API браузера, измерения макета или эффекты, должны находиться в клиентской границе, если ваш фреймворк различает серверные и клиентские компоненты.Инициализируйте тему
Таблицы стилей темы определяют свои токены в.light и .dark. Примените начальный класс в документе с серверным рендерингом, затем инициализируйте ThemeProvider с той же схемой на клиенте:
Выполняйте измерения браузера на клиенте
ThemeProvider разрешает значения с помощью вычисленных стилей в браузере. Во время серверного рендеринга или без поддержки вычисленных стилей значения темы могут оставаться ссылками на переменные CSS. Не предполагайте, что числовой токен, возвращённый при серверном рендеринге, уже является числом JavaScript.
Используйте ссылки на переменные CSS для стилей и отложите вычисления, требующие разрешённых размеров, до тех пор, пока клиент не загрузит тему. Тестируйте гидратацию с теми же компонентами, таблицами стилей и начальной схемой, которые вы развёртываете.
Рендерер фронтальных компонентов представляет собой отдельную песочницу с собственными ограничениями DOM; успешный рендеринг в браузере не означает поддержку в песочнице.