nextjs - 💡(How to fix) Fix Docs: cacheComponent [1 comments, 2 participants]

Problem Summary

Next.js warns that Cache Components can’t be trusted because the current runtime’s setTimeout() implementation is unreliable (e.g., on the Edge runtime). The component ends up re‑validating at the wrong time or never at all.

Root Cause

• The Edge runtime (or a custom runtime) provides a non‑standard setTimeout that may be throttled, capped, or completely omitted after a short period.
• Cache components (unstable_cache, revalidate, fetch(..., { next: { revalidate } })) rely on setTimeout to schedule the next re‑validation. When the timer never fires, the cached value stays stale.

Fix Plan

1. Choose a runtime that guarantees setTimeout

2. Add a reliable setTimeout polyfill for Edge (if you must stay on Edge)

Create a file lib/edge-timers.ts and import it at the top of any file that uses caching:

// lib/edge-timers.ts
// Simple polyfill using the native scheduler (requestIdleCallback) when setTimeout is missing or capped.
export const safeSetTimeout = (cb: () => void, ms: number) => {
  // Edge may cap timers at 1 s; break long delays into chunks.
  const MAX_CHUNK = 1000; // 1 s
  if (ms <= MAX_CHUNK) {
    return setTimeout(cb, ms);
  }

  let remaining = ms;
  const tick = () => {
    if (remaining <= MAX_CHUNK) {
      setTimeout(cb, remaining);
    }