Nextjs проверяет, был ли сделан первый рендеринг на стороне сервера

Question

У меня есть компонент с отложенной загрузкой изображений, который просто отображает src изображения на сервере и загружает загрузчик в ожидании клиента, когда фактическое изображение загружается.

Эта проблема. После того, как начальный рендер и сторона клиента вступают во владение, src изображения не соответствует. Это потому, что сервер установил фактический src, но клиент устанавливает загрузчик (заполнитель).

Вопрос. Есть ли способ обнаружить, что этот начальный рендер был отрендерен сервером? незадолго до того, как клиент рендерит / монтирует

Answer 1

Вы можете узнать, выполняется ли он в данный момент на сервере, проверив req атрибут внутри getInitialProps

Пример кода страницы

function Page({ isServer }) {
  return <div>Is this page on the server? - {isServer ? 'YES' : 'NO'}</div>;
}

Page.getInitialProps = async ({ req }) => {
  return { isServer: !!req };
};

export default Page;

Некоторая информация о official repo about isServercheck

Answer 2

Исправление должно использоваться, как описано в документации Next.js по адресу https://nextjs.org/docs/messages/react-hydration-error .

сделай это:

      import { useState, useEffect } from 'react'

function AnyComponent() {
  const [isSSR, setIsSsr] = useState(true)
  console.log(`isSSR: `, isSSR);
  useEffect(() => setIsSsr(false))

  return (
    <span>Is SSR? {isSSR ? 'Yes!' : 'No!'}</span>
  )
}

Очевидно, что этот тривиальный пример будет обновляться так быстро, что вы увидите только «SSR? Нет!» но первый рендер будет да. Проверьте консоль.

Почему?useEffectвыполняется только в браузере.

Answer 3

Вы можете проверить этоtypeof Window === 'undefined'