Storyblok响应桥重新启动数据更改预览

Question

我想将新的Storyblok反应桥与Next.js结合使用。在我的示例中，_app.js中直接有一个组件(它不应该在路由更改之间更改)，因此如下所示：

function MyApp({ Component, pageProps: { pageData, globalData } }) {
  const story = useStoryblokState(globalData.story)
  console.log('rendering app')
  return (
    <>
      <Collage story={story} />
      {/* <Component {...pageData} /> */}
    </>
  );
}

相应的getStaticProps如下所示：

export async function getStaticProps() {
  let sbParams = {
    version: "draft", // 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,
  };
}

在这里，一切都按预期的方式工作(例如，对数据的更改只会改变拼贴组件，而不会触及任何其他组件)，但是一旦我取消了主组件的注释，在Storyblok预览版(使用localhost:3000)中，更改任何数据都会重新启动iFrame，就像不使用React桥一样。我甚至可以看到，数据更改是在重新启动之前应用的。知道怎么解决这个问题吗？

Answer 1

useStoryblokState()从@storyblok/js包中调用useStoryblokBridge()。尽管它的名字，useStoryblokBridge()不是一个反应钩子，而是一个普通的功能，有副作用。它订阅来自Storyblok桥这里的事件。如果作为参数传递的故事不是通过Storyblok桥发送给事件侦听器的故事，则事件侦听器将重新加载整个页面。

https://github.com/storyblok/storyblok-js/blob/main/lib/index.ts#L40

这意味着，如果使用两个不同的层调用useStoryblokBridge()，则窗口将重新加载。