我有一个图像延迟加载组件，它只在服务器上呈现图像src，并在实际图像延迟加载时在客户端挂起时呈现加载器。
**问题。**初始渲染和客户端接管后，图像源不匹配。这是因为服务器设置的是实际的src，而客户端设置的是加载器(占位符)。**问题。**有没有办法检测到这个初始渲染是由服务器渲染的？就在客户端呈现/装载之前
63lcw9qa1#
您可以通过检查getInitialProps中的req属性来确定它当前是否在服务器上执行页面代码示例
getInitialProps
req
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的一些信息
official repo about isServercheck
wvmv3b1j2#
您可以查看typeof Window === 'undefined'
typeof Window === 'undefined'
6ie5vjzr3#
修复方法是使用https://nextjs.org/docs/messages/react-hydration-error上的Next.js文档中描述的useEffect执行以下操作：
useEffect
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> ) }
显然，这个微不足道的例子会更新得如此之快，以至于您只会看到“is SSR？no！”但第一个结果将是肯定的。检查控制台。为什么？useEffect仅在浏览器中执行。
3条答案
按热度按时间63lcw9qa1#
您可以通过检查
getInitialProps中的req属性来确定它当前是否在服务器上执行页面代码示例
关于
official repo about isServercheck的一些信息wvmv3b1j2#
您可以查看
typeof Window === 'undefined'6ie5vjzr3#
修复方法是使用https://nextjs.org/docs/messages/react-hydration-error上的Next.js文档中描述的
useEffect执行以下操作：
显然，这个微不足道的例子会更新得如此之快，以至于您只会看到“is SSR？no！”但第一个结果将是肯定的。检查控制台。
为什么？
useEffect仅在浏览器中执行。