Caching Strategist

2. Next.js Data Cache

// Server component — cached for 60 seconds
async function getAssessments() {
  const res = await fetch(`${process.env.API_URL}/assessments`, {
    next: { revalidate: 60 }, // Cache for 60 seconds
  });
  return res.json();
}

// Server component — cached with a tag
async function getOccupationList() {
  const res = await fetch(`${process.env.API_URL}/occupations`, {
    next: { tags: ["occupations"] }, // Tagged for invalidation
  });
  return res.json();
}

// Invalidate by tag when data changes
import { revalidateTag } from "next/cache";
revalidateTag("occupations"); // All fetches tagged "occupations" refetch

3. ISR Strategies

Time-Based (Simple)

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour

On-Demand (Precise)

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { secret, path, tag } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: "Invalid secret" }, { status: 401 });
  }

  if (tag) revalidateTag(tag);
  if (path) revalidatePath(path);

  return NextResponse.json({ revalidated: true });
}

4. Upstash Redis Caching

npm install @upstash/redis

// lib/cache/redis.ts
import { Redis } from "@upstash/redis";

export const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

// Read-through cache pattern
export async function cached<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttlSeconds = 3600
): Promise<T> {
  const hit = await redis.get<T>(key);
  if (hit !== null) return hit;

  const data = await fetcher();
  await redis.set(key, data, { ex: ttlSeconds });
  return data;
}

Key Naming Convention