Unexpected API Route Caching in Next.js on Vercel

Help
3

I think I finally got it working:

On my client component:

  useEffect(() => {
    const fetchSubscriptions = async () => {
      try {
        const response = await fetch('/api/subscriptions', {
          cache: 'no-store',
        });
        if (!response.ok) throw new Error('Failed to fetch subscriptions');

        const data = await response.json();
        setSubscriptions(data);
      } catch (err) {
        setError('Failed to load subscriptions. Please try again.');
      } finally {
        setLoading(false);
      }
    };

note the: cache: ‘no-store’,

But you also have to add revalidate in our API route:

import { NextResponse } from 'next/server';
import Stripe from 'stripe';

export const revalidate = 0; // Revalidate on every request

export async function GET() {
<...>
    //not sure if needed but it works so I am not touching it
    return NextResponse.json(subscriptions, {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-store, max-age=0, must-revalidate', // Prevent caching
      },

This was a 2 day journey of frustration. I hope this helps.