Next.js：如何防止更新文件的缓存下载？

Question

我正在开发一个 Next.js 应用程序，用户可以在其中下载许可证文件。 替换服务器上的文件后，用户仍然下载旧版本。我怀疑缓存问题。

这是生成下载链接的代码：

<a
  target="_blank"
  href={`${apibaseUrl}/files/upload/user_licence_file/${licenseFileFirst}`}
>
  <span className="text-success text-center">
    <CloudArrowDownIcon className="h-16 w-16 m-auto" />
  </span>
</a>

这是获取数据的函数：

async function getData(productId, user_id) {
  const url = `${apibaseUrl}/api-user/user-activation-course-page`;
  const bodyData = { product_id: productId, user_id: user_id };

  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-cache, no-store, must-revalidate",
        "Pragma": "no-cache",
        "Expires": "0",
      },
      body: JSON.stringify(bodyData),
      cache: "no-cache",
    });

    if (!response.ok) {
      console.log("Error in response: ", response.statusText);
      return null;
    }

    return response.json();
  } catch (error) {
    console.error("Failed to fetch data:", error);
    return null;
  }
}

如何确保用户始终下载文件的最新版本？

Answer 1

为了确保用户始终在 Next.js 应用程序中下载最新版本的文件，您可以将唯一的查询参数附加到文件 URL。这种方法强制浏览器将每个文件下载视为新请求，绕过任何缓存的版本。以下是修改代码的方法：

解决方案：

1。将 Cache Buster 附加到 URL：

在文件 URL 中添加唯一的查询参数（例如时间戳），以确保浏览器请求最新版本。

    <a
      target="_blank"
      href={`${apibaseUrl}/files/upload/user_licence_file/${licenseFileFirst}?t=${new Date().getTime()}`}
    >
      <span className="text-success text-center">
        <CloudArrowDownIcon className="h-16 w-16 m-auto" />
      </span>
    </a>

2。确保后端没有缓存：

确认提供文件的服务器已设置标头以防止缓存。例如：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

3.检查您的数据获取功能：

确保您的 getData 函数正确地从服务器获取最新数据，而不是提供缓存数据。这是调整后的功能：

async function getData(productId, user_id) {
  const url = `${apibaseUrl}/api-user/user-activation-course-page`;
  const bodyData = {
    product_id: productId,
    user_id: user_id,
  };

  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-cache, no-store, must-revalidate",
        "Pragma": "no-cache",
        "Expires": "0",
      },
      body: JSON.stringify(bodyData),
      cache: "no-cache",
    });

    if (!response.ok) {
      console.log("Error in response: ", response.statusText);
      return null;
    }

    return response.json();
  } catch (error) {
    console.error("Failed to fetch data:", error);
    return null; // Handle the error according to your application's needs
  }
}

通过这些调整，浏览器应将每个文件下载视为唯一的请求，确保获取最新的文件。如果问题仍然存在，请确保处理文件上传的服务器端逻辑正确替换旧文件并提供新文件。