next.js - 如何在获取数据时显示加载指示器 uisng getserversideprops

Question

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

Answer 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);