Cache headers for performance 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 a Remix loader.

Remix

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

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

Aprivate

Bno-store

Cno-cache

Dmax-age=3600

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' which disables caching.

Using 'private' which restricts caching to a single user.

Using 'no-store' which prevents any caching.

The max-age=3600 directive tells the browser to cache the response for 3600 seconds (1 hour).

2fill in blank

medium

Complete the code to add a cache-control header that allows public caching for 5 minutes.

Remix

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

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

Ano-cache

Bprivate, max-age=300

Cpublic, max-age=300

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'private' which restricts caching to the browser only.

Using 'no-store' which disables caching.

Using 'no-cache' which forces revalidation.

The public, max-age=300 header allows caching by any cache for 300 seconds (5 minutes).

3fill in blank

hard

Fix the error in the cache-control header to enable caching for 10 minutes.

Remix

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

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

Amax-age=600, no-store

Bmax-age=600

Cno-cache, max-age=600

Dprivate, no-store

Attempts:

3 left

💡 Hint

Common Mistakes

Combining 'max-age' with 'no-store' disables caching.

Using 'no-cache' forces revalidation.

Using 'private' restricts caching to the browser only.

Only max-age=600 correctly enables caching for 600 seconds (10 minutes). Adding 'no-store' or 'no-cache' disables caching.

4fill in blank

hard

Fill both blanks to set a cache-control header that caches publicly for 1 day and allows stale content for 1 hour.

Remix

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

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

Apublic, max-age=86400

Bmax-age=86400

Cstale-while-revalidate=3600

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching.

Confusing 'public' with 'max-age' in this context.

Omitting 'stale-while-revalidate' loses stale serving benefit.

max-age=86400 caches for 1 day (86400 seconds). stale-while-revalidate=3600 allows serving stale content for 1 hour while revalidating.

5fill in blank

hard

Fill all three blanks to create a cache-control header that caches publicly for 30 minutes, allows stale content for 5 minutes, and forces revalidation after 1 hour.

Remix

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

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

Apublic

Bmax-age=1800

Cstale-while-revalidate=300

Dmust-revalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'stale-while-revalidate' with 'must-revalidate' can conflict.

Omitting 'must-revalidate' causes stale content to be served indefinitely.

Not setting 'public' restricts caching to private browsers.

public allows shared caching. max-age=1800 caches for 30 minutes. must-revalidate forces the cache to revalidate after expiration. stale-while-revalidate=300 is not used here because revalidation is forced.

Practice

1. What is the main purpose of setting Cache-Control headers in a Remix app?

easy

A. To log user activity on the server

B. To tell browsers how long to keep files before reloading

C. To add security features to the app

D. To change the page layout dynamically

Solution

1. Step 1: Understand what cache headers do

   Cache headers tell browsers how long to keep files so they don't reload them unnecessarily.

2. Step 2: Identify the role of Cache-Control

   The Cache-Control header specifically controls caching duration and behavior.

3. Final Answer:

   To tell browsers how long to keep files before reloading -> Option B

4. Quick Check:

   Cache-Control sets caching time = D [OK]

Hint: Cache-Control controls browser file storage time [OK]

Common Mistakes:

• Confusing cache headers with security settings
• Thinking cache headers change page design
• Assuming cache headers track user actions

2. Which of the following is the correct way to export cache headers in a Remix route module?

easy

A. export const cacheHeaders = () => ({ 'Cache-Control': 'max-age=3600' })

B. export const headers = { 'Cache-Control': 'max-age=3600' }

C. export default function cache() { return { 'Cache-Control': 'max-age=3600' } }

D. export function headers() { return { 'Cache-Control': 'max-age=3600' } }

Solution

1. Step 1: Recall Remix header export pattern

   Remix expects a function named headers that returns an object with headers.

2. Step 2: Check syntax correctness

   export function headers() { return { 'Cache-Control': 'max-age=3600' } } correctly exports a function named headers returning the header object.

3. Final Answer:

   export function headers() { return { 'Cache-Control': 'max-age=3600' } } -> Option D

4. Quick Check:

   headers function export = B [OK]

Hint: Export a function named headers returning headers object [OK]

Common Mistakes:

• Exporting headers as a constant object instead of a function
• Using wrong export names like cacheHeaders
• Using default export instead of named export

3. Given this Remix route code snippet, what will be the Cache-Control header value sent to the browser?

export function headers() {
  return { 'Cache-Control': 'public, max-age=600' };
}

medium

A. 'public, max-age=600'

B. 'private, max-age=600'

C. 'no-cache'

D. 'max-age=3600'

Solution

1. Step 1: Read the returned header object

   The function returns an object with 'Cache-Control' set to 'public, max-age=600'.

2. Step 2: Confirm the exact header value sent

   The header value sent to the browser is exactly 'public, max-age=600'.

3. Final Answer:

   'public, max-age=600' -> Option A

4. Quick Check:

   Returned Cache-Control value = A [OK]

Hint: Return exact Cache-Control string in headers function [OK]

Common Mistakes:

• Assuming default values instead of reading code
• Confusing 'public' with 'private' directive
• Ignoring max-age value given

4. You wrote this Remix route code but the cache header is not working as expected:

export const headers = {
  'Cache-Control': 'max-age=1200'
};

What is the problem?

medium

A. Headers must be exported as a function, not an object

B. The max-age value is too low to cache

C. Cache-Control header name is case-sensitive and must be lowercase

D. You need to import a cache module to use headers

Solution

1. Step 1: Check Remix header export requirements

   Remix requires the headers export to be a function returning headers, not a plain object.

2. Step 2: Identify the export type mistake

   The code exports headers as a constant object, which Remix does not accept for headers.

3. Final Answer:

   Headers must be exported as a function, not an object -> Option A

4. Quick Check:

   headers export must be function = A [OK]

Hint: Export headers as function, not object [OK]

Common Mistakes:

• Exporting headers as object instead of function
• Thinking header names are case-sensitive
• Assuming cache module import is needed

5. You want to cache a Remix route's data for 5 minutes but ensure the page updates immediately after a user submits a form. Which cache header strategy should you use?

hard

A. Set Cache-Control to 'public, max-age=300' without revalidation

B. Set Cache-Control to 'max-age=300, no-store' to prevent caching

C. Set Cache-Control to 'max-age=300, must-revalidate' to allow revalidation after 5 minutes

D. Do not set any cache headers to always fetch fresh data

Solution

1. Step 1: Understand caching with form submissions

   You want caching for 5 minutes but also immediate update after form submit, so revalidation is needed.

2. Step 2: Choose cache header with revalidation

   'max-age=300, must-revalidate' caches for 5 minutes but forces browser to check freshness after expiry.

3. Final Answer:

   Set Cache-Control to 'max-age=300, must-revalidate' to allow revalidation after 5 minutes -> Option C

4. Quick Check:

   Cache with revalidation = C [OK]

Hint: Use must-revalidate to update cache after expiry [OK]

Common Mistakes:

• Using no-store disables caching completely
• Omitting must-revalidate causes stale data
• Not setting cache headers leads to no caching