Next.js文件列表加载无法实时反映目录变更问题求助

问题根源 #

你的问题核心是Next.js App Router默认会对API路由的GET请求进行静态缓存：构建阶段就会执行一次API路由并缓存结果，后续用户请求时直接返回缓存内容，不会再去读取实际文件系统的最新状态，导致文件上传/删除后无法实时看到变更。

解决方案 #

1. 强制API路由动态执行（推荐） #

在/api/files/lab/route.js中添加动态配置，让该路由每次请求都重新执行，避免静态缓存：

import { NextResponse } from 'next/server';
import fs from 'fs/promises';
import path from 'path';

// 关键配置：强制该路由每次请求都动态处理，不缓存结果
export const dynamic = 'force-dynamic';

export async function GET() {
  const directoryPath = '*MY_DIRECTORY*';
  try {
    const files = await fs.readdir(directoryPath);
    const fileDetails = await Promise.all(files.map(async (file) => {
      const filePath = path.join(directoryPath, file);
      const stats = await fs.stat(filePath);
      return {
        name: file,
        uploadDate: stats.mtime.toISOString(),
        path: `/api/files/lab/download?file=${encodeURIComponent(file)}`,
      };
    }));
    // 额外添加响应头，防止客户端或CDN缓存结果
    return NextResponse.json({ files: fileDetails }, {
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0',
      }
    });
  } catch (error) {
    console.error('Error reading directory:', error);
    return NextResponse.json({ error: 'Failed to read directory' }, { status: 500 });
  }
}

2. 客户端请求禁用缓存 #

同时修改/lab/page.js中的fetch请求，确保客户端不会缓存API响应：

const fetchFiles = async () => {
    try {
      console.log('Fetching files...');
      const res = await fetch('/api/files/lab', {
        credentials: 'include',
        cache: 'no-store' // 禁用客户端缓存，每次请求都拉取最新数据
      });
      if (!res.ok) {
        throw new Error(`Error: ${res.status} ${res.statusText}`);
      }
      const data = await res.json();
      console.log('Files fetched successfully:', data.files);
      setFiles(data.files);
    } catch (error) {
      console.error('Failed to fetch files:', error);
      setError(error.message);
    }
  };

3. 可选：设置缓存重新验证时间 #

如果不需要完全实时，可设置定期重新验证缓存（比如每10秒更新一次），在route.js中替换dynamic配置为：

export const revalidate = 10; // 每10秒重新验证并更新缓存

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