Why is the typeof window check needed in Nextjs Image component

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))}`}
 />

Answer

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 reactDOMServer.renderToString() function in Node.js. They build the full page as HTML and send it to the user who is browsing the site. Next.js’ intention in generating the page HTML is to maximize the capabilities of CDNs and improve your page’s SEO. So not only do they render the React page as HTML. They make the API requests and await for them to return allowing them to render the list of elements which the API responded with.

This can allow developers to take advantage of much of the dynamic aspects of the page like {products.length <= 0 && <EmptyStateDiv type='products' />}, but sadly you can’t use things which relate to the client’s width / only display this if the browser’s innerWidth is > 1600, since there’s no knowledge of what the user’s browser window is (though you can probably optimize for mobile vs desktop with the right headers).

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 as window typically contains browser specific properties like clientHeight/clientWidth or allow a user to do client side redirects with window.location.assign which would be impossible on the server.