title: Storyblok React Bridge Restarting Preview On Data Change
body: <p>I want to use the new <a href="https://github.com/storyblok/storyblok-react" rel="nofollow noreferrer">Storyblok React bridge</a> with Next.js.  In my case, there is a component directly in the <code>_app.js</code> (which should not change between route changes), so it looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>function MyApp({ Component, pageProps: { pageData, globalData } }) {
    const story = useStoryblokState(globalData.story)
    console.log('rendering app')
    return (
      &lt;&gt;
        &lt;Collage story={story} /&gt;
        {/* &lt;Component {...pageData} /&gt; */}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>The corresponding <code>getStaticProps</code> looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>export async function getStaticProps() {
    let sbParams = {
      version: &quot;draft&quot;, // or 'published'
    };
  
    const storyblokApi = getStoryblokApi();
    let { data: pageData } = await storyblokApi.get(`cdn/stories/home`, sbParams);
    let { data: globalData } = await storyblokApi.get(
      `cdn/stories/collage`,
      sbParams
    );
  
    return {
      props: {
        pageData,
        globalData,
      },
      revalidate: 3600,
    };
  }
  </code></pre>
  <p>Here everything works as intended (i.e. changes to data will only rerender the collage component but not touch anything else), but as soon as I uncomment the main component, in the Storyblok preview (with <code>localhost:3000</code>), changing any data will restart the iFrame, just like it would be the case if no React bridge is used.  I can even see that the data changes are applied just before it restarts.  Any idea how to fix this?</p>