如何正确将静态页面转变为“已过期页面”？

Question

我有一堆静态的推广页面。然而，如果促销活动已经过期，我需要导航/显示一个过期页面。在NextJS的静态页面中，正确的方法是什么？

尝试1：在getStaticProps中检查是否过期。问题是，重新验证每600秒发生一次。所以这可能发生在凌晨12:28而不是准点的12:00（取决于我何时部署它）。

所以它没有按时显示过期页面。如何解决这个问题？或者实现“正确”的更换页面的方式。

export const getStaticPaths = async () => {
  const pageSlugs = await api.getAllSlugs();

  const paths = pageSlugs.map((slug) => (params: {promo: slug})
  );

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

export async function getStaticProps({ preview = false, params, previewData }) {
  const page = await api.getSlug(params.promo, {
    preview,
    enviroment: previewData?.enviroment
  });

  const isExpired = checkIfExpired(page.promoStart, page.promoEnd);

  const expiredPage =
   isExpired
      ? await api.getPage("expired-page", {
          preview,
          enviroment: previewData?.enviroment
        })
      : null;


  return {
    props: {
      page,
      isExpired,
      expiredPage,
    },
    revalidate: 600
  };
}

Answer 1

你可以动态计算重新验证时间：

export async function getStaticProps({ preview = false, params, previewData }) {
  const page = await api.getSlug(params.promo, {
    preview,
    enviroment: previewData?.enviroment
  });

  const isExpired = checkIfExpired(page.promoStart, page.promoEnd);

  const expiredPage =
   isExpired
      ? await api.getPage("expired-page", {
          preview,
          enviroment: previewData?.enviroment
        })
      : null;

 let revalidate = 600
 if (Date.now() <= page.promoStart) {
   revalidate = (page.promoStart - Date.now()) / 1000
 } else if (date.now() > page.promoStart && Date.now() <= page.promoEnd) {
   revalidate = (page.promoEnd - Date.now()) / 1000
 }

  return {
    props: {
      page,
      isExpired,
      expiredPage,
    },
    revalidate
  };
}

这假设promoEnd和promoStart是日期对象，但你可以根据需要进行调整。还要确保服务器时间与日期对象使用的时区对齐。