使用getInitialProps時如何處理nextjs中加載緩慢的頁面？

Question

我正在使用nextjs 9和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;

我想獲取一些數據並dispatch an action來將數據存儲在redux中。

然后我使用ShowDataCmp中的數據。我需要它在服務器端，以便數據在頁面資源中，所以我必須在這里獲取數據。 但是因為我的 fetch API 有點慢，所以頁面加載會很慢。

是否有任何解決方案來補償頁面緩慢的加載時間？

Answer 1

嘗試在您的_app頁面或layout組件中實現加載屏幕並優化getData function