Gatsby build / SSR заменяет компоненты, вызывающие ошибки отображения
Обновление: указанная ниже проблема была решена, но у меня возникла аналогичная проблема:
В моем шаблоне галереи ( см. Пример страницы здесь, все загружается нормально, если перейти на сайт через сайт. При обновлении родительский div сетки (GalleryGrid в styled-components) стирается / меняет свой стиль / заменяется пустым div. На самом деле это происходит после освежиться во время гидратации Гэтсби.
Я попытался заменить стилизованный компонент на обычный div, стилизованный вручную, но безуспешно. Не уверен, что происходит!
У меня действительно странная ошибка!
Я создал сайт, используя Gatsby, источник из Prismic.io и использую стилизованные компоненты для стилизации. Я использую framer-motion для переходов между страницами и добавил свой компонент макета в gatsby-browser, чтобы перемещалось только содержимое страницы, и добавил аналогичный код в gatsby-ssr, чтобы исправить некоторые начальные ошибки ssr.
Что происходит сейчас, так это то, что всякий раз, когда страница, кроме индекса, посещается напрямую (попробуйте эту), некоторые компоненты не отображаются должным образом. В этом примере дата в верхней части страницы заменена на<Body>
компонент (стиль которого отличается от предполагаемого <Date>
компонент), а фактическое содержимое было усечено и показывает только первый <p>
.
Если вы перейдете в раздел "портфолио", а затем вернетесь на страницу каталога, страница отобразится правильно - теперь дата <Date>
компонент и отображается весь основной текст.
Аналогичная ошибка происходит с узлами "эссе" - например, на этой странице изображение предназначено для размещения в компоненте с именемImageContainer
но заменен дополнительным EssayContainer
при обновлении или прямом доступе (вместо перехода на страницу через навигацию по сайту).
Честно говоря, я понятия не имею, что здесь происходит или что может вызвать эту ошибку - сделал ли я что-то не так, или это ошибка в SSR Gatsby или styled-components/ плагине gatsby SC. Работает как положено при запускеgatsby develop
, значит, должно быть что-то в сборке или SSR.
Мой гэтсби-браузер:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export const shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
if (location.action === "PUSH") {
window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
} else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
() => window.scrollTo(...(savedPosition || [0, 0])),
transitionDelay
)
}
return false
}
И мой gatsby-ssr:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
И мое репо здесь.
Любая помощь приветствуется!
2 ответа
Я не уверен, что может быть не так с используемыми вами стилизованными компонентами, они должны быть уникальными для каждой страницы / компонента. В вашем проекте я заметил одну вещь: вы создаете страницы с помощью gatsby-node, и это хорошо. Но при использовании Prismic вы можете перейти на более поддерживаемый плагин, который позволит вам динамически генерировать страницы без необходимости настройки gatsby-node, а также позволяет легко настраивать предварительный просмотр. В этой статье объясняется, как это сделать:
Как перенести проект с gatsby-source-prismic на gatsby-source-prismic-graphql
Оказалось, что это две проблемы!
Проблема с заменой некоторых компонентов при сборке была связана с библиотекой медиа-запросов, которую я использовал - react-responsive
- без поддержки SSR. Я перешел на@artsy/fresnel
и это решило множество проблем.
Проблема с усеченным контентом, похоже, связана с тем, что стилизованные компоненты не так хорошо работают с SSR. У меня были стилизованные компоненты, устанавливающие внутренний HTML напрямую - вложение другого div внутри компонента и установка html оттуда помогли:
<Description>
<div
dangerouslySetInnerHTML={{
__html: data.prismicGallery.data.description.html,
}}
/>
</Description>
Это решает почти все - у меня все еще проблема с гидратацией Гэтсби, заменяющей / деформирующей некоторые элементы, но я подозреваю, что это другая проблема (добавлена в исходный вопрос).