#"use cache" in Vercel

1 messages · Page 1 of 1 (latest)

true mulch
#

I have had troubles with "use cache" on Vercel for the past hours. I never realized that this was going to be an problem and I thought my app was finished until it was deployed. I am really stressed out so I can't really grab my mind together so I am kind of required of assistence. I tried making use of Chat-GPT, but that didn't work out either.

I am on Next.js 16.1.0 and I use Supabase, my main concern is a table of 19000 rows being fetched that isn't cached properly anymore.

queen voidBOT
#

Hi @true mulch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I understand how stressful it can be when a feature works perfectly in development but fails after deployment. The knowledge sources indicate that the use cache directive currently behaves differently on Vercel compared to local development due to the serverless architecture.

Here is why your cache might be failing and how you can address it:

1. Default "Forgetful" Cache on Vercel

By default, Vercel’s dynamic use cache handler does not store entries in process memory because serverless functions run across many different processes. To preserve correctness regarding tag invalidations, the default handler essentially treats the cache as an "LRU with size 0," resulting in a miss every time for dynamic requests [Vercel "use cache" handler; Vercel "use cache" handler].

2. The Solution: use cache: remote

If you know your data (like your Supabase table) should be cached despite being in a dynamic context, you can instruct Next.js to use the remote cache layer. Users have reported that changing the directive fixes the issue on Vercel production:

// Use this directive instead of just 'use cache'
'use cache: remote'

export async function fetchSupabaseData() {
  // Your logic here
}

Using "use cache: remote" instructs the framework to store the result in Vercel's remote cache layer rather than local process memory [Vercel "use cache" handler].

#

3. Data Size Limitations

You mentioned a table with 19,000 rows. Be aware that use cache may fail silently if you are attempting to cache a very large amount of data [Docs: Use Cache + Supabase]. If use cache: remote does not work, you may need to verify if the payload size exceeds Vercel's cache limits.

4. Expiration Thresholds

There is evidence that if your cacheLife expiration time is set too low (e.g., less than 5 minutes), Vercel may treat the value as dynamic and skip caching. Ensure your cacheLife is set to a higher value, such as 300 seconds (5 minutes) or more, to ensure it is cached in production environments [PPR "use cache" functions].

Summary of steps to try:

  1. Change 'use cache' to 'use cache: remote'.
  2. Ensure your cacheLife (if used) is at least 300 seconds.
  3. Verify that the JSON payload of your 19,000 rows isn't exceeding Vercel's internal cache size limits.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@true mulch Kapa.ai is still learning and improving, please let me know how I did by reacting below.

true mulch
#

How can I debug cache? also this is made for an dashboard. Is a dashboard okay for Vercel? @queen void

queen voidBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Debugging the Cache

To debug cache behavior in Next.js, particularly for production-like environments, you can use the following methods:

  • Verbose Logging: Set the environment variable NEXT_PRIVATE_DEBUG_CACHE=1 in your .env file or your deployment settings. This will cause the server to log cache activity, including ISR (Incremental Static Regeneration) hits and misses, to the terminal or log collector [Troubleshooting; Docs: Use Cache].
  • Vercel Observability: On the Vercel dashboard, you can use the Observability tab to view "Runtime Cache" metrics. This provides insights into cache hit rates, reads, writes, and on-demand revalidations [Vercel Data Cache].
  • Fetch Logging: You can enable specific logging for the fetch API in your next.config.js to see which requests are cached:
    module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}
  • Note on Logs: In production, you will not see the [Cache] badges in the browser console that you see during development; these logs are only printed to the server's log drain for security reasons [Github Issue: use cache].

Using Vercel for a Dashboard

Yes, Vercel is suitable for dashboards, but you must choose the correct caching strategy for dynamic data:

#
  • In-Memory Limitations: In serverless environments like Vercel, in-memory caching (use cache) often has a near-zero hit rate because each function execution has ephemeral memory. If your dashboard uses dynamic values like cookies(), headers(), or searchParams, the cache might be evicted frequently [use cache: remote].
  • Remote Caching: For a dashboard fetching large amounts of data (like your 19,000 rows), using 'use cache: remote' is recommended. It provides a shared cache across all serverless instances, which reduces the load on your database (Supabase) and ensures faster load times for users [use cache: remote].
  • When to Avoid: If your dashboard data changes every few seconds or is unique to every single request (high cardinality), a cache may not be effective. However, if the data is shared or can tolerate being stale for a few minutes, remote caching is a strong fit [use cache: remote].

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: