如何解决等待获取保持组件从渲染开始直到获取完成
在这里,我正在获取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,};
};
当我单击此页面上的链接进行路由
问题:
- 整个用户界面都会冻结,直到提取完成。
- 获取数据的最佳方法是什么
- 分配数据的最佳方法是什么。
解决方法
服务器端呈现的主要目的是先获取所有数据,然后再通过页面道具填充这些数据以进行前端操作。
尽管我发现这个概念非常有用,因为它可以防止组件重新呈现。
万一您真的需要在客户端发送请求,我建议您使用由Next.js团队开发的SWR挂钩: 有关更多信息和代码段,请访问以下链接: https://github.com/vercel/swr
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。