Understanding Next.js Caching

Understanding Next.js Caching | TaQtiQ

app/page.tsx

import { Suspense } from 'react';
import { StaticHeader } from '@/components/Header';
import { ProductDetails } from '@/components/ProductDetails';
import { CartBadge, CartSkeleton } from '@/components/Cart';
import { RecommendedProducts, RecsSkeleton } from '@/components/Recs';

export default function Page() {
  return (
    <main>
      {/* 1. Static: Included in the initial static HTML shell */}
      <StaticHeader />
      <ProductDetails />

      {/* 2. Dynamic: Suspended boundary turned into a dynamic stream slot */}
      <Suspense fallback={<CartSkeleton />}>
        <CartBadge /> {/* Reads cookies / user session */}
      </Suspense>

      {/* 3. Dynamic: Streams independently from the cart */}
      <Suspense fallback={<RecsSkeleton />}>
        <RecommendedProducts /> {/* Slow database query */}
      </Suspense>
    </main>
  );
}

lib/data.ts

import { cacheLife } from 'next/cache';

export async function getUserProfile(userId: string) {
  'use cache';

  const user = await db.user.findUnique({ where: { id: userId } });
  return user;
}

components/RecommendedProducts.tsx

export async function RecommendedProducts({ category }: { category: string }) {
  'use cache';

  const products = await fetchProductsByCategory(category);

  return (
    <div>
      {products.map((item) => (
        <ProductCard key={item.id} product={item} />
      ))}
    </div>
  );
}

app/blog/[slug]/page.tsx

'use cache';

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

app/blog/page.tsx

'use cache'
import { cacheLife } from 'next/cache'
 
export default async function BlogPage() {
  cacheLife('days') // Blog content updated daily
 
  const posts = await getBlogPosts()
  return <div>{/* render posts */}</div>
}

app/actions/products.ts

import { cacheTag } from 'next/cache';

export async function getProductDetails(productId: string) {
  'use cache';
  
  // Tag this specific product AND tag the overall product collection
  cacheTag('products', `product-${productId}`);

  return await db.product.findUnique({ where: { id: productId } });
}

app/actions/admin.ts

'use server';

import { revalidateTag } from 'next/cache';

export async function updateProduct(productId: string, newData: any) {
  await db.product.update({
    where: { id: productId },
    data: newData,
  });

  // Instantly purges any cache entry tagged with `product-${productId}`
  revalidateTag(`product-${productId}`);
}

Understanding Next.js Caching

What is caching? (a brief overview)

With caching (fast)

Next.js: What Is Hydration?

Next.js: What Are React Hooks and How Do They Work?

Next.js: Why You Shouldn't Use a Global /components Folder for Everything

Next.js Server Components Vs Client Components: a Decision Framework

Without caching (slow)

The evolution of caching in Next.js:

Next.js 14

Next.js 15+:

Next.js 16 and the introduction of cache components

Partial prerendering (PPR)

Example

Cache components

The `'use cache'` directive

Function level

Component level

Route level

The `cacheLife` function with `use cache`

The `cacheTag` function with `use cache`

Example

Stay in the loop

Comments (0)

What is caching? (a brief overview)

With caching (fast)

Next.js: What Is Hydration?

Next.js: What Are React Hooks and How Do They Work?

Next.js: Why You Shouldn't Use a Global /components Folder for Everything

Next.js Server Components Vs Client Components: a Decision Framework

Without caching (slow)

The evolution of caching in Next.js:

Next.js 14

Next.js 15+:

Next.js 16 and the introduction of cache components

Partial prerendering (PPR)

Example

Cache components

The 'use cache' directive

Function level

Component level

Route level

The cacheLife function with use cache

The cacheTag function with use cache

Example

Stay in the loop

Comments (0)

The `'use cache'` directive

The `cacheLife` function with `use cache`

The `cacheTag` function with `use cache`