Disabling API cache
Answered
Yellow and black potter wasp posted this in #help-forum
Yellow and black potter waspOP
I have this API call on frontend:
And this route.ts on backend:
And this works very fine when using dev mode, but in production mode (
I'm using Next.js v14.2.5, with pg package for PostgreSQL,
tried with this: https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache
But didn't work out, also tried with this on backend, but the same thing:
But when I change url to this:
Then it works.. So I guess when url is the same Nextjs is using cached results, but I don't want that, I want to fetch from db with each page visit, once again in production mode doesn't work
fetch(`/api/top_friends_users`, {
method: "GET"
})
.then((response) => {
return response.json();
})
.then((data: { user_full_name: string; friends: string }[]) => {
const localData = data.map(user => ({
userFullName: user.user_full_name,
friends: Number(user.friends)
}));
setTopFriendsUsers(localData);
});
And this route.ts on backend:
export async function GET(request: NextRequest) {
console.log('API: /top_friends_users');
const query =
`
SELECT ui.user_full_name, COUNT(r.referred_user_id) AS friends
FROM referrals AS r JOIN user_info AS ui
ON r.referrer_user_id = ui.user_id
GROUP BY ui.user_full_name
ORDER BY friends DESC
LIMIT 100;
`
const result = await pool.query(query);
const response = NextResponse.json(result.rows);
return response;
}
And this works very fine when using dev mode, but in production mode (
npm run build
, and then npm run start
) I don't get fresh results with each page visit, the results are cached..I'm using Next.js v14.2.5, with pg package for PostgreSQL,
tried with this: https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache
fetch(`/api/top_friends_users`, {
method: "GET",
cache: "no-store"
})
But didn't work out, also tried with this on backend, but the same thing:
const response = NextResponse.json(result.rows);
response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
response.headers.set('Pragma', 'no-cache');
response.headers.set('Expires', '0');
But when I change url to this:
fetch(`/api/top_friends_users${new Date()}`, ...)
Then it works.. So I guess when url is the same Nextjs is using cached results, but I don't want that, I want to fetch from db with each page visit, once again in production mode doesn't work
Answered by joulev
This is not because the fetch call is cached – that fetch call runs on the client so never cached, unlike server-side fetch – this is because the route handler is cached. GET route handlers are cached by default, this will change in Next.js 15.
To fix, add export const revalidate = 0 to the route.ts file.
To fix, add export const revalidate = 0 to the route.ts file.
4 Replies
This is not because the fetch call is cached – that fetch call runs on the client so never cached, unlike server-side fetch – this is because the route handler is cached. GET route handlers are cached by default, this will change in Next.js 15.
To fix, add export const revalidate = 0 to the route.ts file.
To fix, add export const revalidate = 0 to the route.ts file.
Answer
Yellow and black potter waspOP
And for what routes this happens? For ones that url doesn't change?
If I have for example this route:
If I have for example this route:
/api/get_user?user=123
, and then call /api/get_user?user=124
and then again /api/get_user?user=123
all those 3 calls will server fresh data?In those /api/get_user, you use searchParams which automatically opts you out of static generation
Yellow and black potter waspOP
Got it, thank you