I have an image lazy load component that just renders the image src when on the server, and renders a loader when on client pending when the actual image is lazyloaded.
The problem. After the initial render and client side takes over, the image src mismatch. This is because the server set the actual src, but the client is setting the loader (placeholder).
Question. Is there a way to detect that this initial render was server rendered? just before the client renders/mounts
You can find out if it is currently executed on the server by checking for req attribute inside getInitialProps
Example page code
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;
Some info on official repo about isServercheck
You can check that typeof Window === 'undefined'
The fix is to use useEffect as described in the Next.js docs at https://nextjs.org/docs/messages/react-hydration-error
do this:
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>
)
}
Obviously, this trivial example will update so quickly that you would only ever see "Is SSR? No!" but the first render will be yes. Check the console.
Why? useEffect is only executed in the browser.
