[英]How to deal with slow load page in nextjs when using getInitialProps?
I'm using nextjs 9
and redux
.Here is a page of my app:我正在使用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;
I want to fetch some data and dispatch an action
to store the data in redux
.我想获取一些数据并dispatch an action
来将数据存储在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.然后我使用ShowDataCmp
中的数据。我需要它在服务器端,以便数据在页面资源中,所以我必须在这里获取数据。 But because my fetch API is a little bit slow the page load will be really slow.但是因为我的 fetch API 有点慢,所以页面加载会很慢。
Are there any solutions to compensate the page slow load time?是否有任何解决方案来补偿页面缓慢的加载时间?
Try to implement a loading screen in your _app
page or layout
component and optimize getData
function尝试在您的_app
页面或layout
组件中实现加载屏幕并优化getData
function
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.