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))}`}
/>
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 dynamic aspects of React and run JavaScript function within the rendering code (like: {products.length <= 0 && <EmptyStateDiv type='products' />}), but sadly you can't use JavaScript/functionality which lives on the client's/user's browser (as opposed to native to JavaScript/cross-platform Node.js/Browser).
So while all functionality built into JS (like Array prototype methods) can be used without a second thought. Other functionality like fetch can be used cross-platform on Node.js and Frontend/React but only due to cross-platform libraries like isomorphic-fetch. And finally, other functionality lives only within the browser and is not native to JavaScript. This especially includes methods/properties accessible from the specific user's browser like it might be great to do: document.innerWidth is > 1600 but that isn't possible since this function runs before a specific client had rendered the page.
Next.js built the page on the server side where things like document/window are not defined and where it wouldn't make sense for them to exist. (Though you can probably optimize and cache different experiences for mobile vs desktop users, by reading some the client's 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.
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.