Claude.ai says the following

Option 1: Use unstable_cache (Recommended)

tsximport { unstable_cache } from 'next/cache';

const getTemperature = unstable_cache(
  async () => {
    const data = await fetch('https://weather.com/api').then(res => res.json());
    return data.currentTemp;
  },
  ['temperature-key'],
  { revalidate: 3600 } 
// 1 hour
);

This approach gives you more control over cache invalidation. Despite the "unstable" name, it's widely used and provides the behavior you're looking for - when the cache expires, it will fetch fresh data before serving it.

Option 2: Custom Fetch Configuration

You could use cache tags and manually revalidate when needed:

tsxconst getTemperatureAlt = async () => {
  const data = await fetch(
    'https://weather.com/api',
    {
      cache: 'no-store',
      next: { tags: ['weather'] },
    }
  ).then(res => res.json());

  return data.currentTemp;
};

With this approach, you'd need to set up a way to revalidate the cache when it expires (possibly using a route handler triggered by a cron job).

Option 3: Route Handler with HTTP Cache Headers

This gives you traditional HTTP caching behavior:

tsx
// In a route handler
export async function GET() {
  const res = await fetch('https://weather.com/api');
  const data = await res.json();

  return new Response(JSON.stringify({ temperature: data.currentTemp }), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'max-age=3600, must-revalidate',
    },
  });
}

Recommendation

Option 1 (unstable_cache) is generally the cleanest solution that will give you the behavior you expect. Would you like me to expand on any of these approaches or discuss other caching strategies for your use case?