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>

Это решает почти все - у меня все еще проблема с гидратацией Гэтсби, заменяющей / деформирующей некоторые элементы, но я подозреваю, что это другая проблема (добавлена ​​в исходный вопрос).

Источник
Другие вопросы по тегам