Idea: handle “window is not defined” via JSDom context

[Jarred-Sumner]

A common source of frustration for SSR in React is “window is not defined”.

The current solution to this problem is requiring the developer to remember to check for “typeof window !== ‘undefined’” in many places and a number of conditional requires.

Instead of asking developers to fix this themselves, what if Next.js just fixed it by default?

While this loader wouldn’t specifically work for Next.js, a technique like it probably would: https://github.com/GoogleChromeLabs/prerender-loader. Basically, if we do the SSR in the context of the window object provided by JSDOM, then most browser APIs will “just work” and developers will rarely have to worry about making their code support SSR. I have this working in a project not using Next.js and so far it works well.

There’s a few things to consider here:

• What is the performance impact?
• Does this break any libraries?
• If this is added, should it be enabled by default? (Yes, IMO)

[timneutkens]

I strongly believe that we shouldn't. If you import a module that breaks because of window usage it means that the module itself is not working correctly and should be using the correct React lifecycle methods, being either componentDidMount or useEffect (hook).

[Jarred-Sumner]

👍