Проблема в версии продукта Styled-Components при рендеринге с помощью Rendertron

Question

имеют очень простой пример приложения, которое создает Create React App + Styled-Components, чтобы доказать эту проблему. Но у меня есть действительно большое приложение, с которым я сталкиваюсь в этом вопросе, и я собираюсь объяснить его ниже.

Я хотел бы предварительно отрендерить это приложение с помощью Rendertron для SEO / GoogleBots и т. Д. Но проблема заключается в том, что я создаю ПРОИЗВОДНУЮ версию React App, в которой используются Styled-компоненты. все стили будут отсутствовать на статической версии, которую выпустил Rendertron, но с другой стороны, если я попробую тот же рабочий процесс с dev-сервером приложения, все выглядит хорошо.

До сих пор я знал, что в версии PROD и версии DEV моего приложения при рендеринге с помощью Rendertron есть различия. Но я не уверен, что является причиной этой проблемы и как я могу решить эту проблему.

Я ищу решение или идею, которая может помочь мне решить эту проблему.

Вот мой пример кода, который я подправил для теста.

https://github.com/AJ-7885/test-styled-component-with-rendertron

Вот снимок экрана с другой версией рендеринга на базе Rendertron на версии PROD или DEV того же приложения.

введите описание изображения здесь

Answer 1

После долгих поисков я наконец-то выяснил причину.Библиотека Styled Components использует так называемый «скоростной режим» для внедрения стилей в производство.Это заставляет стили обходить DOM` и вводиться непосредственно внутри CSSOM, таким образом, появляясь в инспекторе, но полностью невидимый в DOM.

К счастью, Styled Components 4.1.0 были исправлены для этой проблемы!Теперь вы можете установить для глобальной переменной SC_DISABLE_SPEEDY значение true, чтобы отключить режим Speedy и заставить стили появляться и в Production.

Ссылка: https://www.styled -components.com / Releases # v4.1.0

Но единственная часть, я не уверен, как установить отключение этого быстрого режима вCreate-React-App без извлечения, доза любое тело имеет какие-либо идеи?

Answer 2

Вам необходимо визуализировать ваши стили на стороне сервера и внедрить эти стили в предварительно отрендеренное приложение реакции.Styled-components объясняет, как это сделать, здесь: https://www.styled -components.com / docs / advanced # серверная отрисовка

Также я бы порекомендовал использовать реакции-snap для предварительного рендеринга, поскольку это рекомендовано документами Create React App .Reaction-snap - это, скорее, решение, специфичное для React, которое проще реализовать, особенно с помощью styleled-компонент.