首页 > 解决方案 > Next js getServerSideProps 有时不会被调用

问题描述

我正在为电子商务项目构建一个前端应用程序,我正在使用 React 17.x 和 Nextjs 10.2.3。我的问题是当我使用 next/link 更改页面时 getServerSideProps 没有被调用,但是当我刷新页面时 getServerSideProps 被调用并向后端发送请求。我查看了 next/link 的文档,它说 next/link 有一个浅属性,用于调用 getServerSideProps 进行预取与否,我将该属性设置为 false,但 getServerSideProps 仍然没有使用 next/link 调用。除了不使用下一个/链接之外,还有什么办法吗?

我的项目的一页

interface HomeProps {
  announcements: IAnnouncement[];
  campaigns: ICampaignResponse[];
  companies: ICompaniesResponse[];
  creditSummary: ICreditResponse;
}
export const getServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const announcements = await queryEndpoints.getAnnouncements();
  const creditSummary = await queryEndpoints.getCredit();
  const companies = await queryEndpoints.getCompanies();
  const campaigns = await queryEndpoints.getCampaigns();
  return {
    props: {
      announcements,
      creditSummary,
      companies,
      campaigns,
    },
  };
};
export default function Home({
  companies,
  campaigns,
  creditSummary,
}: HomeProps) {
  return (
    <>
      <Container>
        <CampaignsBlock campaigns={campaigns} />
        <div className="grid grid-cols-12 gap-4 pt-18 pb-24">
          <div className="border border-gray-300 p-8 rounded-md col-start-1 col-end-13 lg:col-end-8 xl:col-end-8 order-2 lg:order-1 xl:order-1">
            <div className="w-full">
              <SectionHeader sectionHeading="Duyuru" />
              <p className="text-body text-xs lg:text-sm leading-normal xl:leading-relaxed">
                Monochrome elegance. Made with a relaxed wide-leg, these
                trousers are made from a sustainable soft organic cotton with a
                mechanical stretch making the garment easily recycled.
              </p>
            </div>
          </div>
          <div className="col-start-1 col-end-13 lg:col-start-8 xl:col-start-8 order-1  lg:order-2 xl:order-2">
            <CreditsBlock creditSummary={creditSummary} />
          </div>
        </div>
        <CompaniesBlock companies={companies} />
      </Container>
    </>
  );
}

标签: reactjsnext.jsserver-side-rendering

解决方案


推荐阅读