NextJS中静态促销页切换至过期页面的正确实现方案

问题描述 #

我有一批静态促销页面，需要在促销活动过期后自动跳转或展示过期页面。目前尝试在getStaticProps中检查过期状态，但因为重新验证（revalidation）间隔设为600秒，无法在活动到期的准点（比如凌晨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
  };
}

解决方案 #

1. 动态计算revalidate时间，精准对准过期时间 #

放弃固定600秒的revalidate间隔，根据当前时间到活动过期时间的差值动态设置：

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);
  let revalidate = 600; // 默认刷新间隔

  if (!isExpired) {
    const timeUntilExpiry = new Date(page.promoEnd).getTime() - Date.now();
    // 若距离过期时间小于默认间隔，直接用该差值作为revalidate时长
    if (timeUntilExpiry > 0 && timeUntilExpiry < revalidate * 1000) {
      revalidate = Math.ceil(timeUntilExpiry / 1000);
    }
  }

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

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

这样活动即将到期时，页面会在过期时间点附近触发重新验证，确保准点切换状态。

2. 前端客户端双重校验 #

在组件渲染时追加一次过期检查，避免静态页面缓存导致的延迟：

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export default function PromoPage({ page, isExpired, expiredPage }) {
  const router = useRouter();
  const [clientIsExpired, setClientIsExpired] = useState(isExpired);

  useEffect(() => {
    const checkExpiry = () => {
      const newIsExpired = checkIfExpired(page.promoStart, page.promoEnd);
      if (newIsExpired !== clientIsExpired) {
        setClientIsExpired(newIsExpired);
        // 若需要强制刷新服务器端缓存，可调用此方法
        router.refresh();
      }
    };

    // 首次渲染立即检查
    checkExpiry();
    // 设置定时器，在过期时间点触发检查
    const expiryTime = new Date(page.promoEnd).getTime();
    const timeUntilExpiry = expiryTime - Date.now();
    if (timeUntilExpiry > 0) {
      const timer = setTimeout(checkExpiry, timeUntilExpiry);
      return () => clearTimeout(timer);
    }
  }, [page.promoStart, page.promoEnd, clientIsExpired, router]);

  if (clientIsExpired && expiredPage) {
    return <ExpiredPage content={expiredPage} />;
  }

  return <PromoContent content={page} />;
}

这种方式能确保用户打开页面时，即使静态缓存未更新，客户端也能即时判断并展示过期页面。

3. Webhook主动触发页面刷新（高精度场景） #

如果需要绝对精准的控制，可在活动过期时通过Webhook主动调用Next.js的重验证API，强制刷新对应页面：

1. 创建API路由pages/api/revalidate.js：

export default async function handler(req, res) {
  // 验证请求合法性，比如通过预设密钥
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid secret' });
  }

  try {
    const slug = req.query.slug;
    await res.revalidate(`/promo/${slug}`);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Error revalidating');
  }
}

2. 在活动管理系统中设置定时任务，在活动过期时调用该API，强制刷新对应促销页面。

总结 #

• 常规场景优先使用动态计算revalidate时间，实现服务器端准点更新
• 配合客户端二次校验，覆盖缓存未及时更新的边界情况
• 高精度需求场景，采用Webhook主动触发刷新确保绝对准时

内容的提问来源于stack exchange，提问作者testcoder101