Feat: Fix error when user navigates after a deployment #194
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
LGTM, let me know when the CI is fixed so I can approve. |
patricklafrance
approved these changes
Apr 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
If a user is on the site when a deployment happens, they will get an error if they try to load a chunk (navigate to a route) that hadn't previously been fetched. This is because index.html hasn't been refreshed, and will attempt to fetch a chunk that no longer exists. This change will allow the user to fetch the new chunk immediately, or continue using the old chunk (if it has been cached in the browser) until they refresh. Refreshing will fetch all chunks again as needed.
The behavior is due to the hash inserted into the file name, causing the file name to change on every deployment. My tests show that this cache-busting hash isn't necessary. I tested the solution with basic default cache control headers (max age=60 minutes) as well as directly on Netlify (max age=0 minutes, force revalidate). If the file changes, the CDN will respond with the updated copy, even if the file name is the same and even if you are below the max-age. If it hasn't changed, the CDN sends a 304 and the browser uses its cached version.