CDN configuration in Remix - Mini Project: Build & Apply

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

💼 Career

Set cache headers for a static content route

Create a Remix route that exports a headers function setting Cache-Control for CDN caching. The page should be cached at the edge for 1 hour.

Remix

Hint

Export a headers function that returns an object with Cache-Control. Use s-maxage for CDN cache duration.

Configure immutable caching for build assets

In your Remix server entry, add middleware or headers for the /build path to set immutable caching since these files have content hashes.

Remix

Hint

Build assets have fingerprinted filenames (content hashes), so they can be cached forever. Use immutable: true and maxAge: '1y'.

Prevent caching on authenticated routes

Add headers to a dashboard route that should never be cached by a CDN since it shows user-specific data.

Remix

Hint

Use private to prevent CDN caching, and no-store to prevent any caching of sensitive user data.

Merge parent and child route headers

Remix only uses the deepest route's headers by default. Fix the child route to also include the parent's security headers.

Remix

Hint

The headers function receives a parentHeaders parameter. Use parentHeaders.get() to read the parent's headers and include them in the child's response.