🚀 Full Route Caching in Next.js

Full Route Caching in Next.js improves performance by storing entire pages in memory or on the edge, reducing server processing and speeding up page loads.

📌 1. How Next.js Caches Routes

Next.js automatically caches statically generated pages (SSG) and revalidates them based on configuration.

• Static Generation (SSG) → Cached at build time

• Incremental Static Regeneration (ISR) → Cached and updated periodically

• Server-Side Rendering (SSR) → No caching by default

• Client-Side Rendering (CSR) → Handled by the browser

📌 2. Enabling Full Route Caching

🔹 Using getStaticProps (SSG)

Pages generated at build time are cached indefinitely unless manually revalidated.

javascript
export async function getStaticProps() {  return {    props: { data: "Cached at build time" },  };}

✅ Pages are cached and served instantly

🔹 Using Incremental Static Regeneration (ISR)

Update cached pages without a full rebuild by adding revalidate:

javascript
export async function getStaticProps() {  return {    props: { data: "This page is cached and updates every 10 seconds" },    revalidate: 10, // Revalidate after 10 seconds  };}

✅ Reduces server load while keeping content fresh

📌 3. Full Route Caching for API Routes

By default, API routes don’t cache responses. Use Edge Middleware or a caching header:

javascript
export default function handler(req, res) {  res.setHeader("Cache-Control", "s-maxage=3600, stale-while-revalidate");  res.json({ message: "Cached API response" });}

✅ Caches API response for 1 hour (s-maxage=3600)

📌 4. Middleware-Based Caching

You can use Edge Middleware to cache routes dynamically:

javascript
import { NextResponse } from "next/server";export function middleware(req) {  const res = NextResponse.next();  res.headers.set("Cache-Control", "s-maxage=3600, stale-while-revalidate");  return res;}

✅ Useful for caching dynamic routes

📌 5. Optimizing with next.config.js

Modify next.config.js for better caching control:

javascript
module.exports = {  async headers() {    return [      {        source: "/:path*",        headers: [          { key: "Cache-Control", value: "s-maxage=3600, stale-while-revalidate" },        ],      },    ];  },};

✅ Applies cache headers to all routes

📌 6. Best Practices for Full Route Caching

✔️ Use ISR (revalidate) to avoid unnecessary rebuilds
✔️ Leverage API caching (s-maxage, stale-while-revalidate)
✔️ Use Edge Middleware for dynamic caching
✔️ Avoid caching user-specific or private pages