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

编程问答 2022-12-06

问题描述

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 { };
};

enter image description here

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-reduxreactjsreactjsserver-side-renderingvercel