Caching Strategies & Best Practices

# Nginx configuration for static assets
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    # Cache for 1 year (immutable files with cache busting)
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML pages - revalidate on each request
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "public, must-revalidate, max-age=0";
}

# API responses - no caching
location /api/ {
    add_header Cache-Control "no-store, no-cache, must-revalidate";
}

<!-- Filename versioning (best) -->
<link rel="stylesheet" href="/styles.abc123.css" />
<script src="/app.def456.js"></script>

<!-- Query string versioning (fallback) -->
<link rel="stylesheet" href="/styles.css?v=1.2.3" />

<!-- Webpack/Next.js automatic hashing -->
<!-- Output: main.8f4c2a1b.js, styles.3d9e7f2c.css -->

# Cloudflare Page Rules example
# Static assets - cache everything for 1 year
URL: yourdomain.com/static/*
Cache Level: Cache Everything
Edge Cache TTL: 1 year
Browser Cache TTL: 1 year

# HTML pages - cache for 1 hour
URL: yourdomain.com/*.html
Cache Level: Cache Everything
Edge Cache TTL: 1 hour
Browser Cache TTL: 1 hour

# API endpoints - bypass cache
URL: yourdomain.com/api/*
Cache Level: Bypass

// service-worker.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

// Install event - cache critical assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Fetch event - serve from cache, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Return cached version or fetch from network
        return response || fetch(event.request);
      })
  );
});

// Strategy 1: Cache First (for static assets)
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cached) => cached || fetch(event.request))
  );
});

// Strategy 2: Network First (for dynamic content)
self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .catch(() => caches.match(event.request))
  );
});

// Strategy 3: Stale While Revalidate
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(event.request).then((cached) => {
        const fetchPromise = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });
        return cached || fetchPromise;
      });
    })
  );
});

// workbox-config.js
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Precache build artifacts
precacheAndRoute(self.__WB_MANIFEST);

// Cache images with expiration
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
      }),
    ],
  })
);

// API calls - network first with cache fallback
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
  })
);

// Node.js with Redis
const redis = require('redis');
const client = redis.createClient();

async function getUser(userId) {
  const cacheKey = `user:${userId}`;

  // Try to get from cache first
  const cached = await client.get(cacheKey);
  if (cached) {
    console.log('Cache hit');
    return JSON.parse(cached);
  }

  // Cache miss - fetch from database
  console.log('Cache miss');
  const user = await db.users.findById(userId);

  // Store in cache for 1 hour
  await client.setEx(cacheKey, 3600, JSON.stringify(user));

  return user;
}

// Invalidate cache on update
async function updateUser(userId, data) {
  await db.users.update(userId, data);
  await client.del(`user:${userId}`); // Clear cache
}

// Next.js API route with caching
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get('id');

  // Cache for 1 hour with revalidation
  const data = await fetch(`https://api.example.com/data/${id}`, {
    next: { revalidate: 3600 }
  });

  return Response.json(await data.json());
}

// Static page with ISR (Incremental Static Regeneration)
export const revalidate = 3600; // Revalidate every hour

export default async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}