Gatsby 中的缓存清除 page-data.json 文件

Question

我有一个盖茨比生成的网站，我在其中替换了主页的内容。

不幸的是，以前的版本提供了/page-data/index/page-data.json不正确的缓存控制标头，导致/page-data/index/page-data.json缓存在客户端浏览器上（除非强制刷新，否则会显示陈旧的数据）。我还发现 page-data.json 文件没有经过哈希处理（请参阅https://github.com/gatsbyjs/gatsby/issues/15080）。

我已经更新了缓存控制标头，以便从现在起版本不会被缓存，但这对现在拥有缓存版本的客户端没有帮助。

我该如何强制客户端请求该文件的最新版本？

Answer 1

我最终到达了那里......这是我的gatsby-node.js

const hash = md5(`${new Date().getTime()}`)

const addPageDataVersion = async file => {
  const stats = await util.promisify(fs.stat)(file)
  if (stats.isFile()) {
    console.log(`Adding version to page-data.json in ${file}..`)
    let content = await util.promisify(fs.readFile)(file, 'utf8')
    const result = content.replace(
      /page-data.json(\?v=[a-f0-9]{32})?/g,
      `page-data.json?v=${hash}`
    )
    await util.promisify(fs.writeFile)(file, result, 'utf8')
  }
}

exports.onPostBootstrap = async () => {
  const loader = path.join(__dirname, 'node_modules/gatsby/cache-dir/loader.js')
  await addPageDataVersion(loader)
}

exports.onPostBuild = async () => {
  const publicPath = path.join(__dirname, 'public')
  const htmlAndJSFiles = glob.sync(`${publicPath}/**/*.{html,js}`)
  for (let file of htmlAndJSFiles) {
    await addPageDataVersion(file)
  }
}

Answer 2

除了单独访问每个客户端浏览器并清除其缓存之外，没有任何其他方法可以使所有客户端缓存失效。如果您的网页位于您可以控制的 CDN 后面，您可以在 CDN 级别强制失效，这样新客户端将始终被路由到最新的网页，即使 CDN 缓存了预先存在的过时副本。