How to deal with slow load page in nextjs when using getInitialProps?

Question

I'm using nextjs 9 and redux .Here is a page of my app:

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;

I want to fetch some data and dispatch an action to store the data in redux .

I then use the data in ShowDataCmp .I need it to be Server side so that the data would be in the pagesourse so I have to get the data here. But because my fetch API is a little bit slow the page load will be really slow.

Are there any solutions to compensate the page slow load time?

Answer 1

Try to implement a loading screen in your _app page or layout component and optimize getData function