Asset Caching Test Page

This page demonstrates different caching strategies for static assets.

Test Assets:

❌ No Cache

Cache-Control: no-store

Re-downloaded every time

✅ With Cache

Cache-Control: public, max-age=31536000, immutable

Cached for 1 year

✅ SWR

stale-while-revalidate

Cached with background refresh

What's wrong?

• Static assets served without cache headers
• Assets re-downloaded on every page load
• Increased bandwidth usage
• Slower page load times
• Higher server load
• Poor user experience, especially on slow connections

Expected Detection:

Check: asset-caching (automatic, detection not yet implemented)

Status: Future Issue

Detection logic would need to:

• Inspect HTTP response headers for all assets (images, CSS, JS, fonts)
• Check for presence and value of Cache-Control header
• Flag assets without appropriate caching
• Consider asset type (static vs dynamic content)
• Verify CDN/proxy headers (if applicable)

Good Cache-Control Headers:

// For versioned static assets (with hash in filename)
Cache-Control: public, max-age=31536000, immutable
// Cached for 1 year, won't be revalidated

// For frequently changing assets
Cache-Control: public, max-age=3600
// Cached for 1 hour

// With stale-while-revalidate (modern, best UX)
Cache-Control: public, max-age=3600, stale-while-revalidate=86400
// Serve stale for 24h while fetching fresh version

// For private user data
Cache-Control: private, max-age=0, must-revalidate
// Cached by browser only, always revalidate

Bad Cache-Control Headers:

// Disables all caching (BAD for static assets)
Cache-Control: no-store, no-cache, must-revalidate

// No cache header at all (BAD)
(missing Cache-Control header)

// max-age=0 for static assets (BAD)
Cache-Control: public, max-age=0

Asset Type Guidelines:

How to Fix:

In Next.js API routes:

export async function GET() {
  return new Response(assetData, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable',
    }
  })
}

In Next.js config for static files:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ]
  },
}

Testing Cache Headers:

• Open browser DevTools → Network tab
• Reload page and inspect asset responses
• Check Response Headers for Cache-Control
• Look for "(from disk cache)" or "(from memory cache)" on subsequent loads
• Use online tools: WebPageTest, GTmetrix
• Test with curl: curl -I https://example.com/asset.png