Designing Cache and Fallback Strategies for S3 + CloudFront-Based SPA Deployment

When deploying a SPA(Single Page Application) with S3 and CloudFront, index.html and hashed asset files have different lifecycles. If this distinction is not made, users who maintained an existing session after a new deployment may experience ChunkLoadError, or a problem may occur where HTML is returned for a JavaScript request.

The key strategies for efficient deployment are as follows.

• Separating cache policies: Minimize caching for index.html so it always stays up to date, while hashed asset files with hashes in their filenames can safely have long browser cache durations.
• Caution with fallback configuration: If CloudFront's SPA fallback configuration redirects all requests to index.html, a MIME type mismatch error can occur when requesting a missing asset, so caution is needed.
• Runtime handling: Since infrastructure settings alone cannot completely prevent errors in an already-running outdated SPA, defensive logic such as reload-once should also be implemented on the frontend side.