Wie konvertiere ich eine statische Seite korrekt in eine „abgelaufene Seite“?

Question

Ich habe eine Reihe statischer Werbeseiten. Wenn die Aktion jedoch abgelaufen ist, muss ich zu einer Ablaufseite navigieren bzw. diese anzeigen. Was ist der richtige Weg, dies auf einer statischen Seite mit NextJS zu tun?

Versuch 1: Überprüfen Sie in getStaticProps, ob es abgelaufen ist. Das Problem besteht darin, dass alle 600 Sekunden eine erneute Validierung erfolgt. Dies kann also um 00:28 Uhr passieren, statt genau um 12:00 Uhr (je nachdem, wann ich es bereitstelle).

Daher wird die abgelaufene Seite nicht rechtzeitig angezeigt. Wie kann dieses Problem gelöst werden? Oder implementieren Sie den „richtigen“ Weg zum Seitenwechsel.

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是日期对象，但你可以根据需要进行调整。还要确保服务器时间与日期对象使用的时区对齐。