Next.js Discord

Discord Forum

need help understanding how router cache is working

Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
Going through the tutorial, this is the behaviour im getting while navigating between links. caching is happening only once. After 30 seconds its fetching from server every single time. oh and this is happening in dev server and also in prod

62 Replies

New Guinea Freshwater CrocodileOP
"use server"

import { unstable_noStore } from "next/cache";

export default async function Page(){
    let y = await hello();
    return(
        <p>Customers page</p>
    )
}

async function hello(){
    unstable_noStore();
}
This is the code im using inside these routes
Northeast Congo Lion
are u using pages or app router?
New Guinea Freshwater CrocodileOP
app router
Northeast Congo Lion
what are u expecting to haoppen? I don't see any data calls here.
New Guinea Freshwater CrocodileOP
see the logs getting spammed after 30 seconds? shouldnt it be just one call to server and then get cached for another 30 second?
Northeast Congo Lion
dev or prod?
from the video
New Guinea Freshwater CrocodileOP
dev in video but happens in prod too
Northeast Congo Lion
yh that is weird actually
my question is from ur page, ur using noStore on the hello() component, but what are you forcing not to cache?
New Guinea Freshwater CrocodileOP
i was just testing, i was trying to make invoice route highly dynamic by calling router.refresh on mount, saw 2 calls being made to server. At first i thought it was some issue with useeffect or router.refresh
Northeast Congo Lion
okay fair. To my knowledge, its pointless forcing non-cache on a component where no data is called.
maybe try implementing some fetch or database query and try see how the data is updated.
New Guinea Freshwater CrocodileOP
yeah this was just to test if it indeed is some wierd issue
Northeast Congo Lion
unstable prefix
always scares me
New Guinea Freshwater CrocodileOP
yeah now it scares me too hahaha
i mean it was used in the official tutorial qq and im only 3 days into nextjs xd
Northeast Congo Lion
so
New Guinea Freshwater CrocodileOP
same issue when used with fetch(..., {cache:'nostore'})
Northeast Congo Lion
did u fetch some data?
ignore the rsc
it is how data is shared between browser & server
caching works at fetch level
const nextConfig = {
    logging: {
        fetches: {
            fullUrl: true
        }
    }
};

export default nextConfig;
using the config, add logging
New Guinea Freshwater CrocodileOP
ye fetched some random data
Northeast Congo Lion
then insude ur terminal, u will see cache STATUS
e.g
HIT/MISS on CACHE
becos it is server component ui will not see network request on browser side.
adding the above config helps u to see what server request (fetch in this case) is being hit or miss

hit = cache found and used
miss = cache not found
New Guinea Freshwater CrocodileOP
this will be logging fetch cache right?
Northeast Congo Lion
ya
it will log the status of the fetch
New Guinea Freshwater CrocodileOP
but the issue is with router cache
isnt the router supposed to cache routes for 30 sec if its dynamic
Northeast Congo Lion
no
what?
where did u see that
u forced no-store?
New Guinea Freshwater CrocodileOP
https://nextjs.org/docs/app/building-your-application/caching#duration-3
im talking about this cache
Northeast Congo Lion
ah
srry i thought u were still chatting on data cache
New Guinea Freshwater CrocodileOP
nah ;p
Northeast Congo Lion
okay so
u want to get it live all the time?
New Guinea Freshwater CrocodileOP
yeah i wanted to disable this cache for few highly dynamic routes, from git i saw that they are testing this
Northeast Congo Lion
yeah
Note: There is experimental support for configuring these values as of v14.2.0-canary.53.
from docs
New Guinea Freshwater CrocodileOP
but for now i was expecting it to cache for 30 seconds but the behavior i get is that seen in video where it only caches one time. thats why i thought there might be some bug within router caching
Northeast Congo Lion
perhaps, especially with unstable
maybe on of the next-guys will be able to advise properly on this
New Guinea Freshwater CrocodileOP
if you know someone would you pls tag them?
Northeast Congo Lion
Tagging another dev out of convo is unfortunately against tos for this server
will just need to sit tight orcreate a github issue
New Guinea Freshwater CrocodileOP
sooo this was really a bug. It's fixed in canary and working as intended, initially routes will be cached for 30 sec, then it will be fetched from server and then cache for another 30 seconds.