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