[Solved] Given this Remix loader code:export async function loader() { return new Response('Hello', { headers:... }What happens when a user requests this loader after 15 seconds from the first request? | Remix

Remix - Performance

Given this Remix loader code:

export async function loader() {
  return new Response('Hello', {
    headers: { 'Cache-Control': 'max-age=10, stale-while-revalidate=30' }
  });
}

What happens when a user requests this loader after 15 seconds from the first request?

AThe cached response is served immediately, and a background update fetches a fresh response

BThe browser fetches a new response immediately, ignoring the cache

CThe cached response is served and no update happens until 40 seconds

DThe response is not cached at all

Step-by-Step Solution

Solution:

Step 1: Understand max-age and stale-while-revalidate
max-age=10 means cache is fresh for 10 seconds; stale-while-revalidate=30 allows serving stale cache up to 30 seconds while updating in background.
Step 2: Apply timing to 15 seconds
At 15 seconds, cache is stale (past 10s) but within stale-while-revalidate window (10+30=40s), so cached response is served immediately and a background fetch updates the cache.
Final Answer:
The cached response is served immediately, and a background update fetches a fresh response -> Option A
Quick Check:
max-age + stale-while-revalidate = serve stale + update [OK]

Quick Trick: After max-age, stale-while-revalidate serves stale while updating [OK]

Common Mistakes:

MISTAKES

Master "Performance" in Remix

9 interactive learning modes - each teaches the same concept differently

More Remix Quizzes

Given this Remix loader code: