Gatsbyjs Styled Components CSS отложенная загрузка

Question

В настоящее время я сталкиваюсь со странной проблемой с GatsbyJS в сочетании со стилизованными компонентами.

В разработке все работает нормально, но когда я создавал сайт и обслуживал его локально, все стили, созданные компонентами со стилем, загружались примерно через 100–300 мс после завершения загрузки страницы.Кажется, это относится только к стилям, которые используются в файлах макетов и шаблонов.

Я также включил gatsby-plugin-styled-components и babel-plugin-styled-components в свой проект без какого-либо успеха.

Я создал небольшой демонстрационный проект на https://github.com/alexanderwe/gatsby-styled-components-test, который показывает ошибку.Если вы хотите, вы можете загрузить его и запустить yarn && yarn workspace gatsby-theme-test serve, чтобы увидеть сообщение об ошибке.

Кто-нибудь сталкивался с подобной проблемой или имеет решение для этого?

Я ценю любую помощь

Answer 1

Похоже, вы реализовали wrapPageElement в gatsby-browser.js, забыли также реализовать его в gatsby-ssr.js. Это означает, что стилевые компоненты активируются только при загрузке браузера, а не при рендеринге на стороне сервера.

Для этого просто скопируйте ваш gatsby-browser.js в новый gatsby-ssr.js, API должен быть точно таким же.

• API Gatsby SSR - wrapPageElement
• API браузера Gatsby - wrapPageElement