如何正確將靜態頁面轉變為「已過期頁面」？

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是是日期對象，但你可以根據需要進行調整。還要確保伺服器時間與日期物件使用的時區對齊。