title: Lazy load components in NextJS without using `next/dynamic`
body: <p>I'm creating a <strong>component (Editor)  that needs to be lazy-loaded</strong> always. But it needs to work in any React app.</p>
  <p><code>React.lazy</code> works with CRA but, not with NextJS and Gatsby and other SSG/SSR solutions.</p>
  <p>I cant use <code>next/dynamic</code> cuz then my component gets tied to NextJS. And I'm trying to avoid using <code>react-loadable</code> to keep bundle size small for the user when the component is not needed.</p>
  <p>I've tried lazy loading the following ways -</p>
  <pre class="lang-js prettyprint-override"><code>const Title = () =&gt; &lt;h1&gt;title&lt;/h1&gt;; // test component to lazy load 
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const Title = React.lazy(() =&gt; import(&quot;./Title&quot;));
  const Method1 = () =&gt; &lt;Title /&gt;;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const Method2 = () =&gt; {
    const [Title, setTitle] = React.useState(React.Fragment);
    React.useEffect(() =&gt; {
      import(&quot;./Title&quot;).then((module) =&gt; setTitle(module.default));
    }, []);
    return &lt;Title /&gt;;
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const Method3 = () =&gt; {
    const [Title, setTitle] = React.useState(React.Fragment);
    React.useEffect(() =&gt; {
      setTitle(require(&quot;./Title&quot;));
    }, []);
  
    return &lt;Title /&gt;;
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const Method4 = () =&gt; {
    const Title = React.createRef(React.Fragment);
    const [isClient, setIsClient] = React.useState(false);
    React.useEffect(() =&gt; {
      Title.current = require(&quot;./Title&quot;);
      setIsClient(true);
    }, [Title]);
  
    const Component = Title.current;
    return isClient ? &lt;Component /&gt; : null;
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// Next JS `page/index.js`
  export default function IndexPage() {
    return &lt;Method4 /&gt;; //&lt;Method1 /&gt;, &lt;Method2 /&gt;, &lt;Method3 /&gt; doesn't work either.
  }
  </code></pre>
  <p>Codesandbox with code - <a href="https://codesandbox.io/s/flamboyant-benz-emw2l?file=/pages/index.js:31-278" rel="nofollow noreferrer">https://codesandbox.io/s/flamboyant-benz-emw2l?file=/pages/index.js:31-278</a></p>