How do I know if my index.html is being cached in my CRA app? And why is it not present in network tab?

user_10467064 0
Viewed 773

I want to set Cache-Control: no-cache for my index.html, as recommended in docs.

For my js chunks, I can locate them in my dev tools' network tab and see the headers there:
cache-control header visible in network tab

But my index.html is not present in the network tab:
no results given for "index" search in network tab

Why is that? And how can I make sure it has the Cache-Control: no-cache header on it?

I can see index in sources tab
enter image description here

The app is served by production server (not by CRA dev server), and CRA service worker is disabled.

create-react-app google-chrome-devtools cache-control browser-cache
2 Answers

If I got you right, you want to turn off the server's caching for index.html.

There are many ways to do this. Here are some configurations you can do on the server-side.

NGINX: (nginx.conf)

location / {
    gzip_static on;
    try_files $uri @index;
}

location @index {
    add_header Cache-Control no-cache;
    expires 0;
    try_files /index.html =404;
}

IIS: (web.config)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>    
  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>    
</configuration>

or you can use html meta tag configuration.

user_66701040

The reason I don't see a request labeled "index" in the network tab is because I am not requesting index.html directly, I get it as a response when requesting a specific in-app url. I can find the respective request in devtools network tab under current URL, and it has text/html in the type column.

user_104670640
Related