У меня SSR реализован с styled-components.
Когда страница загружается с SSR, все выглядит хорошо.Однако, когда app.js загружается и гидратируется вместе с версией SSR, на странице пропускаются некоторые стили и разрывается несколько элементов.
Что еще важно - когда я переворачиваю приложение локально, с помощью npm start или, по сути, просто удаляюSSR, все работает нормально и стили применяются правильно.
Важно : когда я захожу на страницу и app.js загрузки и стили нарушаются, если я меняю маршрут - новый маршрут отображается с примененными стилями правильно, и проблема ... исчезает,
- SSR загружает - стили в порядке
- затем через несколько секунд app.js загружает (процесс гидратации) - стили нарушаются
локально запущенное приложение - без проблем со стилями
запущенное приложение без SSR - без проблем со стилями
Итак, вкратце - если я использую SSR, я пропускаю некоторые стили, сама SSR возвращает правильные стили, но после гидратации с app.js некоторые компоненты не работают.
Бьюсь об заклад, это, вероятно, проблема с styled-components.SSR работает нормально и все остальное, кроме того компонента, в котором отсутствуют стили.
Я знаю, что это довольно неполная информация о моем деле, но чтобы показать каждую часть, которая может быть причиной этой ошибки, я должен опубликовать весь проект, однако, возможно, вы сталкивались с подобным случаем, и вы бы мне помогликак-то.Благодарю.
Редактировать : Мой babel-styled-component-plugin config:
['babel-plugin-styled-components', {
ssr: true,
displayName: false,
fileName: false,
transpileTemplateLiterals: false,
minify: false,
}],