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

【问题标题】：How to deal with slow load page in nextjs when using getInitialProps?使用getInitialProps时如何处理nextjs中加载缓慢的页面？
【发布时间】：2019-10-01 19:58:20
【问题描述】：

我正在使用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 有点慢，所以页面加载会很慢。

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

【问题讨论】：

标签： reactjs performance next.js server-side-rendering

【解决方案1】：

尝试在您的_app页面或layout组件中实现加载屏幕并优化getData功能

【讨论】：