I have recently being playing around with the app router in NextJS. This is “new paradigm for building applications using React’s latest features”, and was introduces in v13. Personally I find this a real headache to work with. Mainly because the documentation is a bit scant and only covers the happy path. It feels a bit “early” to be using this, so I would probably stick to Page Routing for anything critical.
NEXT_PRIVATE_DEBUG_CACHE
One problem is that it will refuse to cache any fetch over 2Mb (well, looking at their code anything with more than 2 * 1024 * 1024 string length, which is an approximation. However 2Mb and a bit is a annoyingly low limit. I tried to hack it to be higher, but it seems Vercel refuses to cache it anyway. I discovered a nice hidden feature in their library code. Dotted around it are statements like this:
if (res.status === 404) {
if (this.debug) {
console.log(`no fetch cache entry for ${key}, duration: ${Date.now() - start}ms`);
}We have a debug flag, which if set logs more stuff. And more logs lead to, well more knowing what the hell is going on! How to set this debug flag on? Simple. Set the environment variable NEXT_PRIVATE_DEBUG_CACHE to true (or any truthy value). If you are using Vercel to host, you can set this up in your settings, under environment variables, then redeploy. Like this:
Here are some example logs, after doing that:
no fetch cache entry for 7710c8185037cf970b4bbd65edf9625c9f8acd1a32b78bc76ec6fc2314ff8273, duration: 83ms
no fetch cache entry for 7710c8185037cf970b4bbd65edf9625c9f8acd1a32b78bc76ec6fc2314ff8273, duration: 44ms
set cache 7710c8185037cf970b4bbd65edf9625c9f8acd1a32b78bc76ec6fc2314ff8273 { tags: '/deals/[UniqueId]/page' }
set cache 7710c8185037cf970b4bbd65edf9625c9f8acd1a32b78bc76ec6fc2314ff8273 { tags: '/deals/[UniqueId]/page' }Repeats of this told me what I expected, my stuff ain’t getting cached. Now I need to figure out why.
