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的某些信息