title: NextJS Dynamic Import of SSR component
body: <p>Looking at the manner in which one can import react components in NextJS:</p>
  <ol>
  <li>Plain old static import:</li>
  </ol>
  <pre><code>import Component from './Component';
  [...]
  return (
    &lt;Component /&gt;
  )
  </code></pre>
  <ol start="2">
  <li>Dynamic import:</li>
  </ol>
  <pre><code>import dynamic from 'next/dynamic'
  
  const DynamicComponent = dynamic(() =&gt;
    import('../components/hello').then((mod) =&gt; mod.Hello)
  )
  [...]
  return (
    &lt;DynamicComponent /&gt;
  )
  </code></pre>
  <ol start="3">
  <li>Dynamic import with ssr = false:</li>
  </ol>
  <pre><code>import dynamic from 'next/dynamic'
  
  const DynamicComponentWithNoSSR = dynamic(
    () =&gt; import('../components/hello3'),
    { ssr: false }
  )
  [...]
  return (
    &lt;DynamicComponentWithNoSSR /&gt;
  )
  </code></pre>
  <p>My question is simple: <strong>When is the 2nd option the preferred option?</strong> (In all three cases, imagine that SSR is enabled through the presence of getServerSideProps.)</p>
  <p>It seems that in any case my component is client-side-only or triggered by a user action, I'd want Option #3. And it seems that in any case it needs to be SSR'd, if I choose option #2, the chunk file gets downloaded immediately, during the <code>before-hydration</code> phase, so it doesn't appear to be saving me any time. It just appears to add a network call. So why wouldn't I just use Option #1?</p>
  <p>What's the actual use case for Option #2?</p>