Fix: fetch is not cached by default in Next.js error

The ‘fetch is not cached by default’ error occurs when Next.js warns about uncached data fetching in Server Components. While fetch requests are cached by default in Next.js 13+, this error typically appears when you need to explicitly control caching behavior.

---

How the Error Happens

❌ Error Scenario - Uncached Fetch:

// ❌ This may trigger caching warnings
// app/page.js
export default async function HomePage() {
  // ❌ Fetch without explicit caching control
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return (
    <div>
      <h1>Data: {data.message}</h1>
    </div>
  );
}

❌ Error with Dynamic Data:

// ❌ This may cause issues with caching
// app/products/[id]/page.js
export default async function ProductPage({ params }) {
  // ❌ No caching control specified
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return (
    <div>
      <h1>{product.name}</h1>
    </div>
  );
}

---

✅ Quick Fix - Implement Proper Caching

Solution 1: Enable Auto Caching

// ✅ Fetch with auto caching (default behavior)
// app/page.js
export default async function HomePage() {
  // ✅ Next.js automatically caches this request
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return (
    <div>
      <h1>Data: {data.message}</h1>
    </div>
  );
}

Solution 2: Explicit Caching Control

// ✅ Fetch with explicit caching options
// app/page.js
export default async function HomePage() {
  // ✅ Explicitly enable caching
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache' // ✅ Cache the response
  });
  const data = await res.json();

  return (
    <div>
      <h1>Data: {data.message}</h1>
    </div>
  );
}

Solution 3: Dynamic Revalidation

// ✅ Fetch with revalidation
// app/products/[id]/page.js
export default async function ProductPage({ params }) {
  // ✅ Cache for 1 hour (3600 seconds)
  const res = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 3600 }
  });
  const product = await res.json();

  return (
    <div>
      <h1>{product.name}</h1>
    </div>
  );
}

Solution 4: Disable Caching When Needed

// ✅ Fetch without caching (for dynamic data)
// app/dashboard/page.js
export default async function DashboardPage() {
  // ✅ Disable caching for real-time data
  const res = await fetch('https://api.example.com/dashboard', {
    cache: 'no-store' // ✅ Never cache this request
  });
  const data = await res.json();

  return (
    <div>
      <h1>Real-time Data: {data.timestamp}</h1>
    </div>
  );
}

Solution 5: Conditional Caching

// ✅ Fetch with conditional caching
// app/api/[endpoint]/page.js
export default async function ApiPage({ params }) {
  const cacheOption = process.env.NODE_ENV === 'production' 
    ? 'force-cache' 
    : 'no-store';

  const res = await fetch(`https://api.example.com/${params.endpoint}`, {
    cache: cacheOption
  });
  const data = await res.json();

  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}