reactjs - Nextjs 检查初始渲染是否在服务器端完成

标签 reactjs lazy-loading next.js server-side-rendering

我有一个图像延迟加载组件,它只在服务器上渲染图像 src,并在客户端等待实际图像延迟加载时渲染加载器。

问题。
在初始渲染和客户端接管后,图像 src 不匹配。这是因为服务器设置了实际的src,而客户端设置了loader(占位符)。

问题。
有没有办法检测到这个初始渲染是服务器渲染的?就在客户端渲染/安装之前

最佳答案

您可以通过检查 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 的一些信息

关于reactjs - Nextjs 检查初始渲染是否在服务器端完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53614671/

相关文章:

c# - 持久化延迟加载属性

html - 带 CSS 网格的水平滚动

webpack - 如何使用 Next.js、Ant Design、Less 和 TypeScript 配置 Storybook.js Webpack

next.js - 即使 key 缓存在 Next.js 中,也会导致 useSWR 在页面挂载时重新获取

reactjs - Typescript:变量被分配了一个值但从未使用过,除非它被使用

entity-framework - Entity Framework 延迟加载和 DTO 模式

javascript - 第三方 slider 添加具有 'class' 等属性的动态元素。我正在使用 react

php - 学说 2 延迟加载失败

javascript - 如何统计一个 React 组件的实例被挂载了多少?

javascript - 如何在有或没有使用插件的情况下使用 react.js 实现水平和垂直拖放?