Why is the typeof window check needed in Nextjs Image component-CodePudding

So im making a placeholder image/svg to use Nextjs image component and i copied this code from their repo. Im not very experienced to backend development (mostly frontend) so i had to make research about buffer, streams, window.bto, etc. What i cannot fully understand is why is the typeof window === "undefined" is needed and the subsecuent lines of code. If I delete that, it works too.

I can understand that's a borderline case, like a "what if". But i can't wrap my head around why is needed. It's always going to be rendered to a browser. Why check if window is undefined?

Thanks in advance and sorry for the bad english, it's not my main language.

Nextjs Code

const shimmer = (w, h) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`

const toBase64 = (str) =>
  typeof window === 'undefined'
    ? Buffer.from(str).toString('base64')
    : window.btoa(str)

const Shimmer = () => (
  <div>
    <ViewSource pathname="pages/shimmer.js" />
    <h1>Image Component With Shimmer Data URL</h1>
    <Image
      alt="Mountains"
      src="/mountains.jpg"
      placeholder="blur"
      blurDataURL={`data:image/svg xml;base64,${toBase64(shimmer(700, 475))}`}
      width={700}
      height={475}
    />
  </div>

My implementation on the component

 <Image
 src={props.src}
 layout={props.layout}
 width={props.width}
 height={props.height}
 placeholder="blur"
 blurDataURL={`data:image/svg xml;base64,${toBase64(shimmer(300, 300))}`}
 />

CodePudding user response：

Next.js is a framework for React which helps developers manage Server-Side Rendering in react.

There are many benefits of server-side rendering including: caching specific pages (or caching only what is public and keeping user-specific data or auth-required data to be loaded on the frontend).

Since Next.js is doing server side rendering that means that sometimes they use the react.toHTMLString() function in Node.js. They build the full page as HTML and send it to the user who is browsing the site. While it runs on the server in Node.js (Server-Side Rendering) window is not defined in the Node.js runtime and it could crash before rendering. It also wouldn't make sense for window to be defined on the server.

CodePudding user response：

If this code is run on the server as part of pre-rendering (either server-side rendering or static rendering), there will be no window (and hence no window.btoa for base64-encoding) since there is no browser, but instead node.js's Buffer can be utilized.