Comment convertir correctement une page statique en « page expirée » ?

Question

J'ai un tas de pages de promotion statiques. Cependant, si la promotion a expiré, je dois naviguer/afficher une page d'expiration. Quelle est la bonne façon de procéder dans une page statique avec NextJS ?

Tentative 1 : Vérifiez si le fichier a expiré dans getStaticProps. Le problème est que la revalidation a lieu toutes les 600 secondes. Cela peut donc se produire à 00h28 au lieu de 12h00 exactement (selon le moment où je le déploie).

La page expirée n'est donc pas affichée à temps. Comment résoudre ce problème? Ou implémentez la manière « correcte » de changer de page.

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

Vous pouvez calculer le temps de revalidation de manière dynamique :

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

Cela suppose que promoEnd和promoStart est un objet date, mais vous pouvez l'ajuster si nécessaire. Assurez-vous également que l'heure du serveur est alignée sur le fuseau horaire utilisé par l'objet date.