Next.js v13.4.12无视no-cache header仍缓存API响应问题求助

问题原因 #

Next.js 13+的App Router中，fetch默认会对GET请求进行缓存，即便后端返回no-cache等禁用缓存的响应头，也会优先遵循Next.js自身的缓存配置。你代码里的next: { tags: ['content'] }只是用于**增量静态再生（ISR）**的标签，不会禁用缓存。

解决方案 #

修改fetch的配置，显式禁用缓存，有几种方式可选：

方式1：设置cache: 'no-store' #

直接在fetch选项里添加cache: 'no-store'，强制每次请求都从API获取最新数据：

async function getContent(userToken: string) {
    const authToken = await getAuthToken();
    console.log(authToken);
    const url = baseApi + '/content';
    const options = {
        method: 'GET',
        headers: {
            'content-type': 'application/json',
            userToken: userToken,
            Authorization: 'Bearer ' + authToken,
        },
        cache: 'no-store', // 禁用缓存，每次请求都拉取最新数据
        next: {
            tags: ['content']
        }
    };
    const res = await fetch(url, options)
    console.group("Content Fetch");
    const body = await res.json();
    console.log(body);
    console.groupEnd();
    return body;
}

方式2：设置next.revalidate: 0 #

通过Next.js的next配置项，将缓存有效期设为0，等同于禁用缓存：

async function getContent(userToken: string) {
    const authToken = await getAuthToken();
    console.log(authToken);
    const url = baseApi + '/content';
    const options = {
        method: 'GET',
        headers: {
            'content-type': 'application/json',
            userToken: userToken,
            Authorization: 'Bearer ' + authToken,
        },
        next: {
            tags: ['content'],
            revalidate: 0 // 缓存立即过期，每次请求都重新获取
        }
    };
    const res = await fetch(url, options)
    console.group("Content Fetch");
    const body = await res.json();
    console.log(body);
    console.groupEnd();
    return body;
}

验证修改 #

修改后重启开发服务器或重新部署，再次请求时会看到每次都显示Cache: MISS，确保每次都拉取最新的API响应。

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