HTTP caching strategies in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a cache control header for 1 hour in Remix loader.

Remix

export const loader = async () => {
  return new Response('data', {
    headers: { 'Cache-Control': '[1]' }
  });
};

Drag options to blanks, or click blank then click option'

Aprivate, max-age=0

Bpublic, max-age=3600

Cno-cache

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' which forces revalidation.

Using 'no-store' which disables caching completely.

The Cache-Control header with public, max-age=3600 tells browsers and proxies to cache the response for 3600 seconds (1 hour).

2fill in blank

medium

Complete the Remix loader code to set a stale-while-revalidate directive for 30 seconds.

Remix

export const loader = async () => {
  return new Response('content', {
    headers: { 'Cache-Control': 'public, max-age=60, [1]=30' }
  });
};

Drag options to blanks, or click blank then click option'

Astale-while-revalidate

Bno-transform

Cmust-revalidate

Dstale-if-error

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing stale-while-revalidate with stale-if-error.

Using must-revalidate which forces revalidation every time.

stale-while-revalidate=30 allows the cached response to be used while the browser fetches a fresh copy in the background for 30 seconds.

3fill in blank

hard

Fix the error in the Remix loader to properly set a no-store cache policy.

Remix

export const loader = async () => {
  return new Response('no cache', {
    headers: { 'Cache-Control': '[1]' }
  });
};

Drag options to blanks, or click blank then click option'

Ano-store

Bmax-age=0

Cno-cache

Dprivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' which still allows caching but requires revalidation.

Using 'max-age=0' which may still cache but expires immediately.

no-store tells browsers and proxies not to cache the response at all, ensuring fresh data every time.

4fill in blank

hard

Fill both blanks to create a Remix loader that caches publicly for 5 minutes and allows stale content while revalidating for 10 seconds.

Remix

export const loader = async () => {
  return new Response('cached data', {
    headers: { 'Cache-Control': 'public, max-age=[1], [2]=10' }
  });
};

Drag options to blanks, or click blank then click option'

A300

Bstale-while-revalidate

C60

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using 60 instead of 300 for 5 minutes.

Confusing stale-while-revalidate with stale-if-error.

max-age=300 caches for 5 minutes (300 seconds), and stale-while-revalidate=10 allows using stale content for 10 seconds while fetching fresh data.

5fill in blank

hard

Fill all three blanks to create a Remix loader that caches privately for 2 minutes and disables transformation.

Remix

export const loader = async () => {
  return new Response('private cache', {
    headers: { 'Cache-Control': '[1], max-age=[2], [3]' }
  });
};

Drag options to blanks, or click blank then click option'

Apublic

B120

Cno-transform

Dprivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'public' instead of 'private' for private caching.

Omitting 'no-transform' which can allow proxies to change content.

private caches only in the browser, max-age=120 caches for 2 minutes, and no-transform prevents proxies from modifying the response.