Nuxt 3/Nitro Cache: Unable to invalidate cache in production

(edited)

I have an API route /api/text-snippet/en which makes an API call to the database to fetch all text snippets
The admin is able to edit the text snippets and he can manually delete the text snippet cache with a click of a button

Issue: It's not working in a Vercel environment only, it's working locally. How I define the cached function in Nuxt: /api/text-snippet/en:

1export default defineCachedEventHandler(async (event) => {2    const { locale } = getRouterParams(event)34    const supabase = serverSupabaseServiceRole<Database>(event)56    const { data, error } = await supabase.from('text_snippet')7        .select('*')8        .eq('locale', locale)910    if (error) throw createError(error)1112    return data13}, {14    swr: true,15    maxAge: 86400,16    staleMaxAge: 172800,17    getKey: (event) => `text-snippet:${getRouterParams(event).locale}`18})

Code to invalidate the cache: /api/admin/cache/invalidate.post.ts

1export default defineEventHandler(async (event) => {2    try {3        const cacheStorage = useStorage('cache')45        await cacheStorage.clear()67        return { success: true }8    } catch (error: any) {9        throw createError(error)10    }11})

These are the response headers:

1age:2156034cache-control:5public, max-age=0, must-revalidate67content-encoding:8br910content-type:11application/json1213date:1415Thu, 30 Jan 2025 10:03:39 GMT1617last-modified:18Thu, 30 Jan 2025 10:03:37 GMT1920server:21Vercel2223strict-transport-security:24max-age=630720002526x-vercel-cache:27HIT2829x-vercel-id:30fra1::iad1::8mvcg-1738232980359-72dbc3df8dd6

Nuxt 3
Production environment

Vercel Alum

Hi, Phillip!

To resolve the cache invalidation issue, could you try to first add cache control headers to your API routes, setting 'Cache-Control', 'Pragma', and 'Expires' headers to prevent Vercel from caching responses.

Next, modify the cache invalidation endpoint to not only clear the Nitro cache as before but also include the same cache control headers, ensuring Vercel doesn't cache the invalidation response.

Then, update your nuxt.config.ts file to add route rules that set default cache headers for all API routes.

These changes work in concert to prevent Vercel's Edge Cache from interfering with Nitro's caching mechanism, ensure proper cache invalidation in the production environment, and maintain your desired Nitro caching behavior.

These changes work together to:

Prevent Vercel's Edge Cache from interfering with Nitro's caching mechanism.
Ensure that cache invalidation works correctly in the production environment.
Maintain the desired caching behavior you've set up with Nitro.

Let us know how you get on!

(edited)

Hi Pauline, thanks for your quick reply. I've done what you suggested but unfortunately I'm still getting x-vercel-cache: HIT

This is how I've implemented it:

invalidate.post.ts

1export default defineEventHandler(async (event) => {2    try {3        // disable Vercel cache for this route4        setResponseHeaders(event, {5            'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',6            'Pragma': 'no-cache',7            'Expires': '0'8        });9        const cacheStorage = useStorage('cache')1011        await cacheStorage.clear()1213        return { success: true }14    } catch (error: any) {15        throw createError(error)16    }17})

api/text-snippet/[locale].ts

1import { serverSupabaseServiceRole } from '#supabase/server'2import { Database } from '~/types/supabase-generated.types'34export default defineCachedEventHandler(async (event) => {5    // disable Vercel cache for this route6    setResponseHeaders(event, {7        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',8        'Pragma': 'no-cache',9        'Expires': '0'10    });11    const { locale } = getRouterParams(event)1213    const supabase = serverSupabaseServiceRole<Database>(event)1415    const { data, error } = await supabase.from('text_snippet')16        .select('*')17        .eq('locale', locale)1819    if (error) throw createError(error)2021    return data22}, {23    swr: true,24    maxAge: 86400,25    staleMaxAge: 172800,26    getKey: (event) => `text-snippet:${getRouterParams(event).locale}`27})

nuxt.config.ts

1routeRules: {2      '/api/text-snippet/**': {3        cache: {4            swr: true,5            maxAge: 86400,6            staleMaxAge: 172800,7            name: 'text-snippet',8        },9        headers: {10            'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',11            'Pragma': 'no-cache',12            'Expires': '0'13        }14      }15  },

I can see the headers correctly in the API request. See screenshot attached Bildschirmfoto 2025-01-31 um 11.45.04

I'm relatively sure it's because of the Vercel Data Cache. Because whenever I've deployed to the server the cache was purged and I got the new data.

This topic is closed. It no longer accepts new replies.