如何在Next.js getStaticProps中实现黑五页面的条件式GraphQL请求？

完全可行，你可以通过在服务端数据获取阶段（getStaticProps）先判断黑五页面是否过期，再决定是否请求过期页面数据，避免无意义的API调用。

核心优化思路 #

• 先获取黑五页面的核心数据（包含过期时间promoEnd）
• 对比当前时间与promoEnd，判断页面是否过期
• 仅当页面过期时，才调用接口拉取过期页面数据
• 组件直接根据服务端传递的状态渲染对应页面，无需客户端额外判断

修改后的代码实现 #

export async function getStaticPaths() {
  const blackFridaySlugs = await ContentfulApi.getBlackFridaySlugs();

  const paths = blackFridaySlugs.map((item) => ({
    params: { slug: item.slug }
  }));

  return {
    paths,
    fallback: "blocking"
  };
}

export async function getStaticProps({ preview = false, params, previewData }) {
  // 1. 先获取黑五页面数据，拿到过期时间
  const page = await ContentfulApi.getBlackFridayPromoBySlug(params.slug, {
    preview,
    environment: previewData?.environment // 修正原代码拼写错误：enviroment → environment
  });

  // 2. 判断页面是否过期
  const currentTime = new Date();
  const promoEndTime = new Date(page?.promoEnd);
  const isExpired = currentTime > promoEndTime;

  // 3. 仅当过期时才拉取过期页面数据
  let expiredPage = null;
  if (isExpired) {
    expiredPage = await ContentfulApi.getPageContentBySlug(
      "expired-page",
      {
        preview,
        environment: previewData?.environment
      }
    );
  }

  const globalSettings = await ContentfulApi.getGlobalSettings({ preview });

  return {
    props: {
      page,
      expiredPage,
      globalSettings,
      isExpired // 把过期状态传递给组件
    },
    revalidate: 100 // 保持增量静态再生，确保时间判断实时性
  };
}

function BlackFridayPages({ page, expiredPage, globalSettings, isExpired }) {
  // 直接根据服务端传递的isExpired状态渲染，无需客户端状态管理
  if (isExpired) {
    return <ExpiredPage expiredPage={expiredPage} />;
  }

  return <BlackFridayPage page={page} globalSettings={globalSettings} />;
}

export default BlackFridayPages;

关键改动说明 #

• 减少不必要API调用：只有当黑五页面确实过期时，才请求过期页面数据，节省带宽和接口资源
• 简化组件逻辑：把过期判断移到服务端，组件无需使用useState和useEffect，直接根据服务端传递的状态渲染
• 修复拼写错误：修正原代码中enviroment的拼写错误，避免潜在的环境配置问题
• 保证实时性：保留revalidate:100配置，确保页面每隔100秒重新生成，保证过期判断的准确性

内容的提问来源于stack exchange，提问作者testcoder101