NextJs getInitialProps阻止路由，并使页面无响应

如何解决NextJs getInitialProps阻止路由，并使页面无响应

nextJs：9.0.2 反应：16.12.0

我正在使用next / link路由到动态路由，在getInitialProps（）中有大约12个api调用，在所有api提取完成之前，页面无响应。

我已经提到了有加载的示例，并且还禁用了的预取功能，但是效果不好。

    ***Page1***

<Link href={/page1/[id]} as={<props.dynamicRouteLink>}>
  <Card 
   
  />
</Link>

***Page2***

const HomePage = dynamic(() => import('components/Home'),{
    loading: () => <LoaderComponet />,});

const Home = props => {
return (
    <div>
    <Head>
        <title>{SEO_TAGS.index.title}</title>
        <meta name="description" content={SEO_TAGS.index.description} />
        <meta name="keyword" content={SEO_TAGS.index.keyword} />
        <meta name="og:title" content={SEO_TAGS.index.title} />
        <meta name="og:description" content={SEO_TAGS.index.description} />
    </Head>

    <HomePage
        {...props}
    />
    </div>
);
};



Home.getInitialProps = async props => {
const {
    PROVIDER_MEDIA_API_CALL,PROVIDER_BASIC_INFO_API_CALL,PROVIDER_FACULTY_API_CALL,PROVIDER_LOCATION_API_CALL,PROVIDER_FACILITY_API_CALL,PROVIDER_DIRECTOR_INFO_API_CALL,PROVIDER_CONTACT_DETAILS_API_CALL,PROVIDER_LANGUAGES_API_CALL,PROVIDER_YEARLY_CALENDER_API_CALL,PROVIDER_SCHEDULE_FOR_DAY_API_CALL,PROVIDER_WORKING_DAY_API_CALL,PROVIDER_EMERGENCY_SERVICES_API_CALL,PROVIDER_SCHEDULE_CHOICE_API_CALL,GET_USERS_CHILDREN_API_CALL,GET_USERS_TOUR_SCHEDULE_API_CALL,POST_CLICK_COUNT_API_CALL,} = props;

PROVIDER_MEDIA_API_CALL({ params: { id } });
PROVIDER_LOCATION_API_CALL({ params: { id } });
PROVIDER_BASIC_INFO_API_CALL({ params: { id } });
PROVIDER_DIRECTOR_INFO_API_CALL({ params: { id } });
PROVIDER_SCHEDULE_CHOICE_API_CALL({ params: {} });
PROVIDER_SCHEDULE_FOR_DAY_API_CALL({ params: { id } });
PROVIDER_WORKING_DAY_API_CALL({ params: { id } });
PROVIDER_CONTACT_DETAILS_API_CALL({ params: { id } });
PROVIDER_FACULTY_API_CALL({ params: { id } });
PROVIDER_FACILITY_API_CALL();
PROVIDER_LANGUAGES_API_CALL({ params: {} });
PROVIDER_YEARLY_CALENDER_API_CALL({ params: { id } });
PROVIDER_EMERGENCY_SERVICES_API_CALL({ params: {} });
GET_USERS_CHILDREN_API_CALL();
GET_USERS_TOUR_SCHEDULE_API_CALL();


return { };
};

这会降低用户体验。谁能为此建议解决方法或解决方案。

NextJs getInitialProps阻止路由，并使页面无响应

如何解决NextJs getInitialProps阻止路由，并使页面无响应

相关推荐