Next.js增量静态生成模式下已删除页缓存无法持续返回404问题求助

问题1解答：Next.js对应缓存配置及修改方式 #

该问题属于ISR场景下notFound状态未持久化覆盖旧成功缓存的问题，可通过两个配置修改：

• 显式为notFound返回值添加revalidate参数，让404状态的缓存覆盖原有成功页面的缓存，示例修改如下：

export const getStaticProps: GetStaticProps = async (context: any) => {
    const username = context.params.username;
    const userData = await getUserData(username);
    if (!userData || userData.images.length < 1) {
        return {
            notFound: true,
            // 配置404状态的缓存有效期，和正常页面的revalidate保持一致即可
            revalidate: 300
        };
    }

    return {
        props: {
            userData
        },
        revalidate: 300
    };
};

• 对接按需增量静态再生（On-Demand ISR），用户删除操作完成后主动调用接口清除对应路径的缓存，完全避免旧缓存返回，示例API路由代码如下：

// pages/api/revalidate-user.ts
export default async function handler(req, res) {
    // 自行添加鉴权逻辑，避免接口被恶意调用
    if (req.headers['x-secret'] !== process.env.REVALIDATE_SECRET) {
        return res.status(401).end();
    }
    const { username } = req.body;
    try {
        await res.revalidate(`/myapp/${username}`);
        return res.status(200).json({ success: true });
    } catch (e) {
        return res.status(500).json({ success: false });
    }
}

如果需要关闭ISR的内存缓存避免多实例缓存不一致，可以在next.config.js中添加配置：

module.exports = {
    experimental: {
        isrMemoryCacheSize: 0
    }
}

问题2解答：是否属于ISR功能缺失 #

不属于功能缺失，这是Next.js ISR的默认降级设计：默认情况下，ISR优先保障页面可用性，当重新校验接口出现异常时会继续返回已有的旧缓存页面避免服务不可用。而notFound属于业务级的正常返回，没有显式配置revalidate的情况下，404状态不会持久化覆盖之前的成功页面缓存，等404的短缓存过期后就会恢复返回旧的成功缓存，属于符合设计预期的行为。

问题3解答：预发正常生产异常的可能原因 #

有三个常见的原因：

• 缓存淘汰策略差异：预发环境流量极低，ISR使用的LRU缓存会优先淘汰不常访问的旧页面缓存，404缓存过期后没有旧成功缓存可以返回，会重新调用getStaticProps返回404；而生产环境该路径访问量高，旧成功缓存一直被命中不会被淘汰，404缓存过期后就会直接返回旧缓存。
• 缓存层配置差异：生产环境通常会配置CDN、反向代理等额外缓存层，多层缓存的叠加会导致404状态没有被正常同步到所有缓存节点，而预发环境一般没有配置额外的公共缓存层，缓存状态更一致。
• 实例数量差异：生产环境通常会部署多份Next.js实例，每个实例的ISR缓存相互独立，可能部分实例没有更新到404缓存就返回了旧的成功页面，而预发环境实例数量少，缓存更容易全量更新。

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