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