Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NextJS/Vercel caching simple fetch request [duplicate]

I have deployed a NextJS (13.2.4) app to Vercel that works well locally. I am making a simple fetch request from a component (‘use client’).

The request points to a route inside the /app directory and inside it there’s an API call to a third party service.

As I mentioned above, it works alright locally but not on Vercel. When I make the fetch request on the deployed app, it works normally the first time but it caches the response and never gets fresh data again.

It seems to be refreshing the data and makes the net call but it’s super fast and data does not change at all (and it should).

I have tried adding cache: “no-store” to the fetch request but no luck.

If any more information is needed I’d be glad to provide it.

like image 682
JMRBDev Avatar asked Jun 14 '26 06:06

JMRBDev


1 Answers

I have been banging my head against this all day. Next13 on Vercel has been caching my google api call.

The best answer I found for this was this one here by Youssouf Oumar:

How to avoid caching in the app directory of Next.js?

Here is the link to the specific section in the docs:

Revalidating Static Data

Next13, in production, seems to cache most fetch calls in the app folder (although I had two calls to Hubspot that were not). If you are making a plain fetch in the route.js function, you are supposed to be able add "{ cache: 'no-store' }" to the fetch in your page to prevent caching.

const response = await fetch('/agents', { cache: 'no-store' });

However, this didn't work for me because I am using the google api sdk.

What finally worked for me was exporting the revalidate variable as 0 in my route.js file.

// app/agents/route.js
import { NextResponse } from 'next/server'
import getAgentInfo from '../../lib/google-sheets/getAgentInfo.js';

export async function GET() {
  const agents = await getAgentInfo();
 
  return NextResponse.json({ agents })
}

export const revalidate = 0;

This fixed the caching in the page where I make a fetch to this, and now I am getting current data back (thank goodness).

I hope this helps you!

like image 158
HalcyonVagabond Avatar answered Jun 16 '26 19:06

HalcyonVagabond



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!