如何在使用 getserversideprops 获取数据时显示加载指示器

【问题标题】：how to show Loading indicator while fetching data uisng getserversideprops如何在使用 getserversideprops 获取数据时显示加载指示器
【发布时间】：2021-10-09 21:14:48
【问题描述】：

我想在使用 getseversideprops 从外部 API 获取数据时显示加载图标。加载指示器在更改路由时工作，但我想在使用 getServerSideProps 预渲染页面时显示加载指示器。

【问题讨论】：

使用getServerSideProps 获取数据将阻止呈现，直到第一个请求在服务器上生成 HTML（服务器端呈现）。

标签： next.js getserversideprops

【解决方案1】：

我用这个代码

useEffect(() => {
    const handleStart = () => { setPageLoading(true); };
    let handleComplete = () => {
        setTimeout(() => {
            setPageLoading(false);
        }, 500);
    };
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);
}, [router]);

setPageLoading 用于显示加载

const [pageLoading, setPageLoading] = useState<boolean>(false);

【讨论】：