Caching in Next.js

Caching in Next.js improves application performance by storing data or rendered content temporarily, reducing repeated data fetching and enabling faster page loads.

• Stores frequently accessed data to reduce server requests and improve response time.
• Supports multiple caching strategies, including Data Cache, Full Route Cache, and Router Cache.
• Enhances performance, scalability, and user experience by serving cached content efficiently.

Steps to create the Next.js Application

Step 1: Create a new Next.js application using the following command:

npx create-next-app@latest testapp

Step 2: Navigate to the project directory:

cd testapp

Step 3: Inside the app directory, create a new folder named testpage and add a page.tsx file. Your project structure will look similar to the following:

Rendering and Caching Techniques

Rendering and caching techniques in Next.js determine how pages are generated, delivered, and stored to improve performance and user experience.

1. Static Generation (SSG)

Static Generation (SSG) is a rendering method in Next.js that generates pages at build time, resulting in faster page loads and improved performance.

• Generates pages at build time for faster loading.
• Serves static files that can be cached efficiently.
• Supports Incremental Static Regeneration (ISR) using the revalidate option.

Example: The following example revalidates the page every 10 seconds.

export const revalidate = 10;

async function fetchData() {
    const res = await fetch("https://api.example.com/data");
    return res.json();
}

export default async function Page() {
    const data = await fetchData();

    return (
        <div>
            <h1>Static Generation with ISR</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

The page is regenerated every 10 seconds, ensuring fresh content while maintaining the performance benefits of static generation.

2. Server-Side Rendering (SSR)

Server-Side Rendering (SSR) is a rendering method in Next.js that generates a page on every request, ensuring users always receive the latest content.

• Generates pages on every request with fresh data.
• Ensures users always receive up-to-date content.
• Uses cache: "no-store" in the App Router to disable caching and fetch fresh data.

Example: Fetches fresh data on every request.

async function fetchData() {
    const res = await fetch("https://api.example.com/data", {
        cache: "no-store",
    });

    return res.json();
}

export default async function Page() {
    const data = await fetchData();

    return (
        <div>
            <h1>Server-Side Rendering</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

cache: "no-store" ensures that the data is fetched from the server for every request, providing the most up-to-date content.

3. API Caching

API Caching in Next.js stores API responses temporarily, reducing repeated requests and improving application performance.

• Reduces latency by serving cached API responses.
• Decreases server load by minimizing repeated data fetching.
• Supports built-in caching using the fetch() API with the next.revalidate option.

Example: Caches the API response for 60 seconds.

async function fetchData() {
    const res = await fetch("https://api.example.com/data", {
        next: {
            revalidate: 60,
        },
    });

    return res.json();
}

export default async function Page() {
    const data = await fetchData();

    return (
        <div>
            <h1>API Caching</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

The API response is cached for 60 seconds. After that period, the cached data is automatically revalidated and updated when a new request is made.

4. Client-Side Caching

Client-side caching stores data in the browser to reduce repeated network requests, improving performance and providing a smoother user experience.

• Stores data locally to minimize repeated API requests.
• Improves performance and reduces network usage.
• Supports in-memory caching using @tanstack/react-query.

Example: Caches fetched data for 30 seconds.

"use client";

import { useQuery } from "@tanstack/react-query";

async function fetchData() {
    const res = await fetch("https://api.example.com/data");
    return res.json();
}

export default function MyComponent() {
    const { data, isLoading, error } = useQuery({
        queryKey: ["fetchData"],
        queryFn: fetchData,
        staleTime: 30000, // Cache data for 30 seconds
    });

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error loading data.</p>;

    return (
        <pre>{JSON.stringify(data, null, 2)}</pre>
    );
}

Best Practices for Caching in Next.js

• Choose the right caching strategy: Use force-cache, no-store, or revalidate based on how frequently your data changes.
• Use Static Generation with revalidate: Generate pages at build time and revalidate them periodically to keep content up to date.
• Avoid unnecessary data fetching: Cache frequently accessed data to reduce server load and improve response times.
• Monitor cache performance: Regularly review cache behavior and optimize revalidation intervals to balance performance and data freshness.