Next.js Discord

Discord Forum

Disabling API cache

Answered
Yellow and black potter wasp posted this in #help-forum
Open in Discord
Avatar
Yellow and black potter waspOP
I have this API call on frontend:
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.
View full answer

4 Replies

Avatar
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.
Answer
Avatar
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: /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?
Avatar
In those /api/get_user, you use searchParams which automatically opts you out of static generation
Avatar
Yellow and black potter waspOP
Got it, thank you