React 16 SPA doesn't reflect changes I made when deployed to netlify until the end user refreshes the page

Support
, , ,
1

Symptoms:
Changes made to the website do not update for the end user until they manually refresh the page, if they have been to the website before

How to reproduce the issue:
Remove a period from a random sentence
Publish to Netlify
No build errors
Check live site
Period won’t be removed until manually refreshing the page

I have added this to the netlify.toml file:

[[headers]]
for = “/*”
[headers.values]
cache-control = ‘’’
max-age=0,
no-cache,
no-store,
must-revalidate’‘’

I have added this to the _headers file:

/*
cache-control: max-age=0
cache-control: no-cache
cache-control: no-store
cache-control: must-revalidate

and added this to my npm build script, so that the _headers file is added to the build:

cat >build/_headers

None of these things solves the issue.

Can anyone offer any insight here as to what I may be missing? This is a fairly simple React 16 SPA with no backend.

Thank you!

EDIT:
Solution was to change the netlify.toml file to the following:

[[headers]]
for = “/*”
[headers.values]
X-Frame-Options = “DENY”
X-XSS-Protection = “1; mode=block”

#  Multi-value headers are expressed with multi-line strings

cache-control = ‘’’
max-age=0,
no-cache,
no-store,
must-revalidate’‘’

2

You should not be needing (or setting) those headers. I wonder why you’re doing that.

3

Nothing I do seems to solve the issue. When I make changes and push them to Netlify, the end user has to refresh their page in order to see those changes, if they have been to the site before.

I’m to the point now where I have tried all kinds of hacky things.

Created a header file AND a netlify.toml file, per the docs. Added no-cache rules. Didn’t work.

I even renamed the classes of the div I changed. Didn’t work. End user still has to refresh to see changes.

This is a simple React site with no backend. I don’t get it.

4

Are you expecting something different? Refreshing the page sounds like expected behaviour to me?

5

When I make changes to text in a paragraph, or a link to a pdf, for example. The expectation is, those changes would appear to the end user without the need for them to refresh, after browsing to the site.

As another example, imagine a news site where the end-user has to refresh the page every day after browsing to it, just to see updated content. Definitely not expected behavior.

Expected behavior would be, when I make a change and push it, the end user sees the most updated version of the website when they go to visit it, even if they have been there before, without having to f5 after initially landing.

6

I think this may finally do the trick, still testing:

import { unregister as unregisterServiceWorker } from ‘./registerServiceWorker’

unregisterServiceWorker();
Instead of:

import registerServiceWorker from ‘./registerServiceWorker’

registerServiceWorker();

and then added to index.html:

<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />