I recently started using URL query strings in my Gatsby site. This worked in local development, local build, and even Github build using Github actions.

However, when I would add a new blog page, BrowserRouter from react-router-dom would suddenly be called(?) and cause an issue with server-side rendering:

error "document" is not available during Server-Side Rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

  331 |   }
  332 |   let {
> 333 |     window = document.defaultView,
      | ^
  334 |     v5Compat = false
  335 |   } = options;
  336 |   let globalHistory = window.history;

This error is thrown by getUrlBasedHistory from react-router, see ln. 5 router/history.ts

I was able to solve the issue by making the BrowserRouter render conditionally:

    return (
        typeof document !== "undefined" ? (
            <BrowserRouter>
                <Posts data={Data}/>
            </BrowserRouter>
        ) : (
            <Posts data={Data}/>
        )
    );

But what I do not understand is, how is it possible that adding an extra page can change the behaviour of this component?

What would probably help me is to understand when BrowserRouter is called?