Switch language한국어
Back to the list

Designing Cache and Fallback Strategies for SPA Deployment with S3 + CloudFront

TL;DR AI

Key summary

2 min read
  1. After deploying a Vite-based React SPA on S3 and CloudFront, older webviews requested lazy chunks from a stale runtime, causing ChunkLoadError and MIME type mismatch.

  2. The root cause was mixing cache policies for index.html and hashed static assets, plus CloudFront custom error responses turning missing assets into 200 responses with index.html.

  3. CloudFront invalidation could not update already open browsers or webviews that were still running the old runtime, so broken route transitions kept happening after release.

  4. For SPA hosting, the entry document, hashed assets, and route fallback must be handled separately; mapping every 404/403 to index.html is a bad fit.

Read the original