Bagaimana untuk menukar halaman statik dengan betul menjadi "halaman tamat tempoh"?

Question

Saya mempunyai banyak halaman promosi statik. Walau bagaimanapun, jika promosi telah tamat tempoh, saya perlu menavigasi/memaparkan halaman tamat tempoh. Apakah cara yang betul untuk melakukan ini dalam halaman statik dengan NextJS?

Percubaan 1: Semak sama ada tamat tempoh dalam getStaticProps. Masalahnya, pengesahan semula berlaku setiap 600 saat. Jadi ini mungkin berlaku pada 12:28 AM dan bukannya tepat pada 12:00 (bergantung pada masa saya menggunakannya).

Jadi ia tidak menunjukkan halaman tamat tempoh tepat pada masanya. bagaimana untuk menyelesaikan masalah ini? Atau laksanakan cara "betul" untuk menukar halaman.

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

Anda boleh mengira masa pengesahan semula secara dinamik:

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

Ini mengandaikan promoEnd和promoStart ialah objek tarikh, tetapi anda boleh melaraskannya jika perlu. Juga pastikan masa pelayan sejajar dengan zon masa yang digunakan oleh objek tarikh.