title: How to use components that use `window` reference in React with server-side rendering?
body: <p>An example of such component is Pikaday (react-pikaday) that contains in its code this line</p>
  
  <p><code>hasEventListeners = !!window.addEventListener</code></p>
  
  <p>but <code>window</code> is not defined on server so when I run the code it throws an error <code>ReferenceError: window is not defined</code>.</p>
  
  <p>I tried to solve this issue by conditionally import Pikady component, something along these lines:</p>
  
  <pre><code>let Pikaday;
  if (typeof window !== 'undefined' &amp;&amp; window.document &amp;&amp; window.document.createElement) {
      import('./Pikaday').then(P =&gt; {
          Pikaday = P.default;
      });
  }
  </code></pre>
  
  <p>In such a case it doesn't throw an error because the component is not loaded but I presumed that the initial HTML sent from server would not contain this component and then it would somehow "switch" to JS code on client side and the component would load. But this doesn't happen. I'm new to server-side rendering in general so I'm getting a bit lost.</p>
  
  <p>How can I solve this? I have the same problem with Leaflet library that also contains <code>window</code> in its code.</p>