title: Losing threejs context in NextJS
body: <p>I'm using <strong>react-three-fiber</strong> within <strong>Next.js</strong> and am rendering the component that holds the canvas and loads a glTF file via <code>useGLTFoader</code> using Next's <code>dynamic</code> import with disabled server side rendering.
  When visiting / reloading the page the glTF is loaded and shown as expected.</p>
  <p>My problem is, that when switching pages I get the following error:</p>
  <blockquote>
  <p>THREE.WebGLRenderer: Context Lost.</p>
  </blockquote>
  <p>When navigating back to the page again, the model is not visible although the canvas is available and my component that takes a screenshot on a specified action is working correctly too (but does not show the model as well).</p>
  <p>The component that holds the canvas and renders the glTF  is very basic looks like this:</p>
  <pre><code>export const Rendering = ({
    resourcePath,
  }) =&gt; {
    const gltf = useGLTFLoader(resourcePath, false);
  
    return (
      &lt;Canvas
        colorManagement
        shadowMap
        camera={{ position: new Vector3(1, 1, 1) }}
        pixelRatio={window.devicePixelRatio}
        gl={{ preserveDrawingBuffer: true }}
      &gt;
        &lt;MakeScreenshot /&gt;
        &lt;primitive object={gltf.scene} position={[0, -1, 0} /&gt;
        &lt;ambientLight intensity={0.8} /&gt;
        &lt;pointLight intensity={1} position={[0, 6, 0]} /&gt;
      &lt;/Canvas&gt;
    );
  };
  </code></pre>
  <p>The import (as described <a href="https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr" rel="nofollow noreferrer">here</a>) is done like this:</p>
  <pre class="lang-js prettyprint-override"><code>const Rendering = dynamic(() =&gt; import('../rendering/rendering'), {
    ssr: false,
  });
  </code></pre>