英文:
Next JS 13: How to fix JSON caching issue on website after session
问题
我正在使用以下版本："^13.3.0"，react："18.2.0"，具有以下的next.Config
experimental: {
appDir: true,
isrMemoryCacheSize: 0,
}
我已经通过AWS Amplify在AWS上部署了我的网站，使用了默认的生产构建配置。
问题是，每当我回到打开我的网站的标签页时，经过一段时间，大约一个小时或者一个会话后，网站上会出现一些JSON，似乎是nextJS为了更快的加载而进行的构建缓存。不确定如何解决这个问题。这在移动和PC浏览器中都会发生。附带参考的浏览器(Chrome)截图如下。
如何解决这个问题？
我尝试使用isrMemoryCacheSize: 0的实验性特性来清除缓存。
但问题仍然存在。
英文:
I'm using next: "^13.3.0", react: "18.2.0", with the following next.Config
experimental: {
appDir: true,
isrMemoryCacheSize: 0,
}
I've deployed my website on AWS via AWS Amplify with the default build config for production.
The issue is whenever I go back to the tab with my website open after some time like an hour or so, or after a session, some JSON appears on the website, seems like some caching of build by nextJS for faster loading. Not sure how to fix it. This happens in both mobile and PC browsers. Pic attached below for reference. The screenshot is of the browser(Chrome) in my PC.
Image of browser when issue occurs
How to fix this issue?
I tried to clear cache with experimental feature of isrMemoryCacheSize: 0.
But the issue continues.
答案1
得分: 1
我认为这与Next的预取功能有关。如果存在Next-Router-Prefetch: 1标头，Next似乎会返回一个状态树，而不是HTML。如果您的服务在没有根据此标头变化的情况下缓存结果，它将显示在浏览器中。
例如，您转到/，Next返回HTML。Next预取/about并获取一个状态树。现在，如果您转到/about（进行页面刷新），您将看到状态树。
您可以查看Amplify的缓存设置来解决此问题。希望这对您有所帮助。
英文:
I think this has to do with Next's prefetch feature. If the Next-Router-Prefetch: 1 header is present Next seems to return a state tree instead of HTML. If your service caches the result without varying on this header, it results in being shown in the browser.
For example, you go to / and Next returns HTML. Next prefetches /about and gets a state tree. Now if you go to /about (with a page refresh) you will see the state tree.
You might look into the cache settings of Amplify to solve this issue. Hope this helps.
答案2
得分: 0
以下是翻译好的内容：
这个 JSON 是 Next.js 的构建清单。这个清单被 Next.js 用来缓存构建文件，以便在页面刷新时加载得更快。
有几种方法可以解决这个问题。一种方法是使用 next.config.js 文件来完全禁用构建清单。要做到这一点，请将以下行添加到你的 next.config.js 文件中：
disableManifest: true
另一种解决方法是在 next.config.js 文件中使用 cache-bust 选项。这个选项将在构建清单的末尾添加一个唯一的哈希值，这将阻止浏览器缓存清单。要使用 cache-bust 选项，请将以下行添加到你的 next.config.js 文件中：
cacheBust: true
要永久解决这个问题，在我的情况下是在重定向到不同路由并尝试返回时引起的，配置如下：
const nextConfig = {
disableManifest: true,
cacheBust: true,
experimental: {
appDir: true
},
};
module.exports = nextConfig;
这将禁用构建清单并在构建清单的末尾添加一个唯一的哈希值，这将阻止浏览器缓存清单。
英文:
The JSON that you are seeing is the Next.js build manifest. This manifest is used by Next.js to cache the build files so that they can be loaded more quickly when the page is refreshed.
There are a few ways to fix this issue. One way is to use the next.config.js file to disable the build manifest entirely. To do this, add the following line to your next.config.js file:
disableManifest: true
Another way to fix this issue is to use the cache-bust option in the next.config.js file. This option will add a unique hash to the end of the build manifest, which will prevent the browser from caching the manifest. To use the cache-bust option, add the following line to your next.config.js file:
cacheBust: true
To permanently get rid of the problem which in my case is caused when I redirect to a different route and try coming back, here is what my configurations look like.
const nextConfig = {
disableManifest: true,
cacheBust: true,
experimental: {
appDir: true
},
};
module.exports = nextConfig;
This will disable the build manifest and add a unique hash to the end of the build manifest, which will prevent the browser from caching the manifest.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论