Reactjs 使用getInitialProps时如何处理nextjs中的慢加载页面？

我正在使用

nextjs9

和

redux

。下面是我的应用程序页面：

import React from 'react';
import { useRouter } from 'next/router';
import { ShowDataCmp } from '../../components';
import { getData } from '../../store/SamplePage/SamplePageAction';

const SamplePage = () => {
    const router = useRouter();
    return <ShowDataCmp query={router.query} />;
};

SamplePage.getInitialProps = async ({ store }) => {
    const config = {
        start_date: '1991-10-22',
        end_date: '2019-10-22',
    };
    await store.dispatch(
        getData(config),
    );
};

export default SamplePage;

从“React”导入React；
从“下一个/路由器”导入{useRouter}；
从“../../components”导入{ShowDataCmp}；
从“../../store/SamplePage/SamplePageAction”导入{getData}；
常量样本页=（）=>{
const router=useRouter（）；
返回；
};
SamplePage.getInitialProps=async（{store}）=>{
常量配置={
开始日期：“1991-10-22”，
结束日期：“2019-10-22”，
};
待命(
获取数据（配置），
);
};
导出默认样本页面；

我想获取一些数据并

分派一个操作

将数据存储在

redux

中

然后我使用

ShowDataCmp

中的数据。我需要它是服务器端的，这样数据就会在页面资源中，所以我必须在这里获取数据。但是因为我的fetchapi有点慢，所以页面加载会非常慢

---

是否有任何解决方案来补偿页面加载缓慢的时间？

尝试在

\u应用程序
页面或
布局
组件中实现加载屏幕，并优化
获取数据
功能尝试在
\u应用程序
页面或
布局
组件中实现加载屏幕并进行优化
getData
函数