Next.js Cache Performance Demo

🐛 Current Issue: Cache Not Working in Docker

Problem

• Docker container is running old code without cachedFetch()
• Many APIs show cache misses on every request
• Next.js Data Cache is not being used

Solution: Rebuild Docker Container

The code has been updated but the container needs to be rebuilt:

# Stop and remove old container
docker-compose down

# Rebuild with new code
docker-compose build --no-cache

# Start container
docker-compose up -d

# Check logs
docker-compose logs -f nextjs-cache

What Was Fixed

1. ✅ All API calls now use cachedFetch(url, revalidate)
2. ✅ Added cache directory permissions in Dockerfile
3. ✅ Added volume mount for persistent cache
4. ⏳ Needs rebuild to apply changes

Expected Behavior After Rebuild

First Request:

• All APIs: Cache MISS
• Load time: ~400-900ms per API

Second Request (within TTL):

• All APIs: Cache HIT
• Load time: ~0-5ms

Verify Cache is Working

Check logs for these patterns:

✅ Good: Cache HIT for jsonplaceholder-posts: 0ms
❌ Bad: Cache MISS for jsonplaceholder-posts

Local Development

npm run dev
# Visit http://localhost:3000/active-cache

Docker Deployment

docker-compose up -d
# Visit http://localhost:3003/active-cache

Architecture

• Phase 1 (/inactive-cache): Direct API calls, no caching
• Phase 2 (/active-cache): Next.js 16 fetch cache with revalidation
• Phase 3 (/full-route-cache): Full Route Cache with ISR (Static Generation)
• Comparison (/comparison): Side-by-side performance comparison of all 3 phases

Cache Strategy

Uses Next.js Data Cache with fetch(url, { next: { revalidate: seconds } }):

• Persists across requests in .next/cache folder
• Works in standalone Docker deployment
• Automatic revalidation based on TTL