Next.js Discord

Discord Forum

server component fetch revalidate/no cache

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
I don't understand why this isn't working to my expectation, isn't both cache: 'no-store' and revalidate 0 supposed to make it not cache the response. Every time I navigate back to the page it uses cached data
import { PokemonDetail, PokemonSummary, PokemonListResponse } from '@/types';

async function getRandomPokemons(offset: number): Promise<PokemonListResponse> {
  const pokemonsResponse = await fetch(
    `https://pokeapi.co/api/v2/pokemon/?limit=6&offset=${offset}`,
    { cache: 'no-store', next: { revalidate: 0 } }
  );

  if (!pokemonsResponse.ok) throw new Error('Failed to fetch pokemons');

  // validate reponse data

  return pokemonsResponse.json();
}

export default async function Pokemons() {
  const randomOffset = Math.floor(Math.random() * 1280);
  const pokemons = await getRandomPokemons(randomOffset);

  return (
    <div className="">
      <h2>pokemons page</h2>
      {JSON.stringify(pokemons)}
    </div>
  );
}
Answered by European sprat
Use a client component with router.refresh() or react query
View full answer

12 Replies

European sprat
This is router cache which lasts for 30 seconds
You'll need to use router.refresh() or client side fetching with react query or useSWR
Or wait and hope they let us change it
@European sprat https://github.com/vercel/next.js/issues/42991#issuecomment-1675459959
Barbary LionOP
u're telling me that something as simple as fetching from the database server side and wanting to refresh each time the page is visited is a "bug" ongoing for almost a year??
European sprat
Well it's not a bug according to Vercel. It's working as intended based on their implementation
But there's been a lot of people encountering this and it seems insane
Barbary LionOP
well, what are they trying to tell me what I should do then in this scenario instead?
@European sprat But there's been a lot of people encountering this and it seems insane
Barbary LionOP
I am clueless what to do
European sprat
I told you what to do
European sprat
Use a client component with router.refresh() or react query
Answer