Next.js Firebase项目缓存重生成问题：curl刷新后浏览器无缓存

问题原因 #

Firebase CDN会根据请求头的关键字段（如User-Agent、Accept、Accept-Encoding等）生成缓存键，不同的请求头组合对应不同的缓存条目。你用curl请求时的头信息和浏览器差异极大，所以生成的缓存只匹配后续curl请求，浏览器访问时因为头信息不同，CDN会判定为新请求，重新触发页面渲染。

解决方案 #

通过模拟浏览器的核心请求头发起请求，让CDN生成适配浏览器的缓存条目，以下是三种工具的实现方式：

Bash（curl模拟浏览器请求） #

直接修改curl的请求头，模拟Chrome浏览器的核心字段：

curl -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36" \
     -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8" \
     -H "Accept-Encoding: gzip, deflate, br" \
     -H "Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3" \
     -L \
     https://your-nextjs-site.com

• -L参数用于跟随跳转，适配Next.js可能的路由跳转逻辑
• 可根据目标浏览器调整User-Agent字段

Node.js（使用node-fetch模拟） #

先安装node-fetch，再编写脚本模拟浏览器请求：

import fetch from 'node-fetch';

async function prewarmCache(url) {
  try {
    const response = await fetch(url, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
        'Accept-Encoding': 'gzip, deflate, br',
        'Accept-Language': 'zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3'
      },
      redirect: 'follow'
    });
    if (response.ok) {
      console.log(`缓存预热成功：${url}`);
    } else {
      console.log(`请求失败，状态码：${response.status}`);
    }
  } catch (error) {
    console.error('预热出错：', error);
  }
}

// 替换为你的网站地址
prewarmCache('https://your-nextjs-site.com');

运行脚本：node cache-prewarm.js

PHP（使用cURL扩展） #

编写PHP脚本模拟浏览器请求：

<?php
$url = 'https://your-nextjs-site.com';
$ch = curl_init($url);

// 设置浏览器请求头
$headers = [
    'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
    'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8',
    'Accept-Encoding: gzip, deflate, br',
    'Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3'
];

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); // 跟随跳转
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if ($httpCode >= 200 && $httpCode < 300) {
    echo "缓存预热成功：{$url}\n";
} else {
    echo "请求失败，状态码：{$httpCode}\n";
}

curl_close($ch);
?>

运行脚本：php cache-prewarm.php

注意事项 #

• 如果网站有多个路由页面，需要遍历所有路由地址逐一发起请求
• 可根据用户群体的主流浏览器调整User-Agent，比如添加Safari、Edge的UA来生成对应缓存
• 若页面配置了额外的缓存键字段，需确保请求时带上所有影响缓存键的自定义头

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