等待 fetch 持有组件从渲染直到 fetch 完成答案

【问题标题】：Await fetch holding component from rendering until fetch is done等待 fetch 持有组件从渲染直到 fetch 完成
【发布时间】：2020-12-09 22:29:49
【问题描述】：

这里我正在为 SSR 获取数据并从客户端发送该数据。

const MyPage = ({
  myFetch1,
  myFetch2,
  myFetch3,
}) => {
  const dispatch = useDispatch();
  dispatch(doSomething1(myFetch1));
  dispatch(doSomething2(myFetch2));
  dispatch(doSomething3(myFetch3));

  return (
    <Page>
      <Head />

      <MyOtherItem />
    </Page>
  );
};

MyPage.getInitialProps = async () => {
  const myFetch1 = await myFetch1();
  const myFetch2 = await myFetch2();
  const myFetch3 = await myFetch3();

  return {
    myFetch1,
    myFetch2,
    myFetch3,
  };
};

当我点击此页面上的路由链接时

问题：

在抓取完成之前，整个 UI 都会冻结。
获取该数据的最佳方式是什么
调度该数据的最佳方式是什么。

【问题讨论】：

我认为，这是 getInitialProps() 的预期行为。组件将等待初始道具
是的。我怎样才能避免这种情况？我需要在客户端获取它吗？
是的，一种在客户端获取它的简单方法。它不会冻结你的用户界面

标签： node.js reactjs react-redux next.js

【解决方案1】：

服务器端渲染的主要目的是在通过页面道具填充数据之前获取所有数据以进行前端操作。

虽然我发现这个概念非常有用，因为它可以防止组件重新渲染。

如果你真的需要在客户端发送请求，我建议你使用 Next.js 团队开发的 SWR hook：有关更多信息和代码 sn-ps，请访问以下链接： https://github.com/vercel/swr

【讨论】：