title: Putting event handlers inside NextJS _document -- and relationship between NextJS pages and React SPA
body: <p>I'm learning NextJS and am trying to wrap my head around the difference between server-rendered and client-side React code -- while NextJS seems great, I'm having some trouble conceptually understanding the difference between the two types of rendering and what those differences <em>mean</em>. </p>
  
  <p>For instance, I came across the following comment in the NextJS documentation, in the section describing `_document``</p>
  
  <pre><code>// _document is only rendered on the server side and not on the client side
  // Event handlers like onClick can't be added to this file
  </code></pre>
  
  <p>Why can one not put event handlers in <code>_document</code>?  What is the difference between this and putting them 'client side'?</p>
  
  <p>Also I'm somewhat confused because NextJS seems to be oriented around building 'pages' -- that is, there's support for adding <code>&lt;HEADER&gt;</code>, etc, as if we were building a static website.  But if I were to build a React SPA, there's only one page, no?  One can simulate different 'pages' using the React router, but the actual containing HTML (header, body, etc) remains the same, no? That is, we never really leave the actual HTML page?</p>
  
  <p>I can <em>use</em> NextJS OK -- following through the documentation's tutorials -- but clearly <em>conceptually</em> I'm missing the forest for the trees.  Any clues or pointers much appreciated!</p>