Menu
every time I make changes to my website and try to update those changes to the running website, I've to hard refresh browser. is there any way to do it by code
i already try to search it but most of saying it can not be done. referance post : How to programmatically empty browser cache?
**Response headers :
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Fri, 06 Jul 2018 10:01:23 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip
**Request headers :
GET / HTTP/1.1
Host: --example--.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hi;q=0.7
Cookie: fingerPrint=e4a9037b8f674722f414b0b59d8d663c
741
To clear browser cache in React, we can add meta tags inside the head tag to make sure that the content of the page isn't cached. in the head tag to set the cache-control response reader to no-cache . And the expires response header is set to 0 to make sure nothing is cached.
Caching is a technique that helps us to stores a copy of a given resource into our browser and serves it back when requested. Approach: Follow these simple steps in order to store single data into cache in ReactJS. We have created our addDataIntoCache function which takes the user data and store into the browser cache.
For this specific case what you can do is to tell the browser not to cache your page, by using below meta tags inside <head> tag: This is temporary solution and for permanent solution, you should handle this using appropriate headers sent by your API/backend.
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
To handle this using API/backend, you should send the appropriate headers with your resource from your back end. And again if you are trying to disable cache temporally you can do it by disabling browser cache. To do so, Follow below steps.
In your developer tools. Find network tab and disable cache. Like here in the image.
Hope this resolves.
Headers for caching: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
101
Make a style.css file in your public folder then link this CSS file in your index.html file.
Ex:
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/style.css?v=0.0.1" />
Always update the version of this CSS fils before doing build your code.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
