Next.js App Router：非fetch服务端函数的重新验证配置问题

在Vercel托管的Next.js App Router项目中，直接通过Firebase SDK读取存储桶中的Markdown文件时，页面会被永久缓存，导致文件修改后无法及时同步。由于官方提供的缓存控制方案针对fetch API，而Firebase SDK调用不受其约束，可通过以下几种方案解决：

方案1：页面级配置缓存重验证时间 #

在页面组件中导出revalidate属性，指定缓存的过期时间（单位：秒），Next.js会自动定期重新获取数据并更新缓存：

import {TextPage} from "@/components";
import {downloadFromStorage} from "@/app/api/file-handling";

// 每60秒重新验证一次缓存，可根据需求调整时长
export const revalidate = 60;

export default async function PageTerms(props) {
    const text = await downloadFromStorage('pages/terms.md');
    return (<TextPage text={text.toString()}/>);
}

方案2：禁用页面缓存（实时获取最新内容） #

如果需要每次请求都获取最新的Markdown内容，可使用next/cache中的noStore方法禁用缓存：

import {TextPage} from "@/components";
import {downloadFromStorage} from "@/app/api/file-handling";
import { noStore } from 'next/cache';

export default async function PageTerms(props) {
    // 禁用缓存，强制每次请求重新执行数据获取逻辑
    noStore();
    const text = await downloadFromStorage('pages/terms.md');
    return (<TextPage text={text.toString()}/>);
}

方案3：在Firebase存储端设置缓存控制头 #

在上传Markdown文件到Firebase存储时，配置Cache-Control元数据，从源头上控制CDN的缓存策略：

// 示例：上传文件时设置缓存头（需修改你的上传逻辑）
await bucket.file(filename).save(markdownContent, {
    metadata: {
        // 缓存60秒，过期后可继续使用旧内容同时获取新内容
        cacheControl: 'public, max-age=60, stale-while-revalidate=30'
    }
});

注意事项 #

• 避免在服务端组件中调用内部API路由：Next.js App Router不支持服务端组件通过HTTP请求调用内部API，应直接调用数据获取函数（如你的downloadFromStorage）。
• 选择合适的缓存策略：根据业务需求平衡性能和内容新鲜度，定期重验证适合大多数静态内容场景，禁用缓存仅用于需要实时更新的页面。

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