Page html is cached by client for too long? gatsby-plugin-netlify

[Ortimis]

Description

When updating page data and deploying the changes on netlify, the client only registers the changes when the page is reloaded a second time - even multiple days after the update.

Steps to reproduce

• Publish your Gatsby Project on Netlify,
• Update Content such that page html is changed
• Check with multiple clients whether you see the changes

Expected result

Changed Content should be immediately visible

Actual result

Changes are only visible after explicit page reload

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 12.18.4 - c:\Program Files\nodejs\node.EXE
    npm: 6.14.6 - c:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^2.24.77 => 2.24.80 
    gatsby-image: ^2.4.19 => 2.4.19 
    gatsby-plugin-eslint: 2.0.8 => 2.0.8 
    gatsby-plugin-gdpr-cookies: ^1.0.10 => 1.0.10 
    gatsby-plugin-manifest: 2.4.18 => 2.4.18 
    gatsby-plugin-netlify-cms: ^4.3.15 => 4.3.15 
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0 
    gatsby-plugin-offline: 3.2.17 => 3.2.17 
    gatsby-plugin-postcss: 2.3.11 => 2.3.11 
    gatsby-plugin-react-helmet: 3.3.10 => 3.3.10 
    gatsby-plugin-scroll-reveal: 0.0.7 => 0.0.7 
    gatsby-plugin-sharp: ^2.6.19 => 2.6.19 
    gatsby-source-airtable: ^2.1.1 => 2.1.1 
    gatsby-source-filesystem: ^2.3.19 => 2.3.29 
    gatsby-transformer-remark: ^2.8.25 => 2.8.34 
    gatsby-transformer-sharp: ^2.5.15 => 2.5.15 
  npmGlobalPackages:
    gatsby: 2.24.90

[herecydev]

Page data should never be cached. Can you show the _headers file that gets generated to make sure that's correct?

[KyleAMathews]

You can try validating your cache-control headers with https://www.npmjs.com/package/check-gatsby-caching

[Ortimis]

@herecydev thank you for pointing this out, my mistake was to not install gatsby-plugin-netlify.

_headers file now looks like this, should work, I hope

## Created with gatsby-plugin-netlify

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Referrer-Policy: same-origin
/styles.e6c97708c70b19476349.css
  Cache-Control: public, max-age=31536000, immutable
/styles-407fe62976dc5310c43e.js
  Cache-Control: public, max-age=31536000, immutable
/commons-7f55018da8e8b96acb2d.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-templates-page-template-js-814ebccd420a7c6d26e3.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-templates-blog-post-js-fb6cbdf732da91e0c989.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-404-js-0e26c8e5954029a1ffb2.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-about-js-1a90071d8653589633e9.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-contact-js-ee89bea219dff2548f39.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-index-js-52679f908400a952aebb.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-klimastadtplan-js-5fff0100054b53a69729.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-offener-brief-an-stadtraedte-js-d653c1361a63937fc46e.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-ueber-uns-js-15286e4c28ec79c63f3f.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-unterschreiben-js-f8b07e40fc835d40efec.js
  Cache-Control: public, max-age=31536000, immutable
/component---src-pages-aktuelles-index-js-81e394a6e408cc0b491d.js
  Cache-Control: public, max-age=31536000, immutable
/webpack-runtime-9d8f96de2c9e0c31b654.js
  Cache-Control: public, max-age=31536000, immutable
/framework-4ae830732e225b42b55a.js
  Cache-Control: public, max-age=31536000, immutable
/532a2f07-98241c9de7d7b4ffe645.js
  Cache-Control: public, max-age=31536000, immutable
/app-db9ffadb4a15903da37b.js
  Cache-Control: public, max-age=31536000, immutable
/static/*
  Cache-Control: public, max-age=31536000, immutable
/sw.js
  Cache-Control: no-cache
/impressum/
  Link: </webpack-runtime-9d8f96de2c9e0c31b654.js>; rel=preload; as=script
  Link: </styles-407fe62976dc5310c43e.js>; rel=preload; as=script
  Link: </framework-4ae830732e225b42b55a.js>; rel=preload; as=script
  Link: </532a2f07-98241c9de7d7b4ffe645.js>; rel=preload; as=script
  Link: </app-db9ffadb4a15903da37b.js>; rel=preload; as=script
  Link: </styles-407fe62976dc5310c43e.js>; rel=preload; as=script
  Link: </commons-7f55018da8e8b96acb2d.js>; rel=preload; as=script
  Link: </component---src-templates-page-template-js-814ebccd420a7c6d26e3.js>; rel=preload; as=script
  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
  Link: </page-data/impressum/page-data.json>; rel=preload; as=fetch; crossorigin
/datenschutz/
  Link: </webpack-runtime-9d8f96de2c9e0c31b654.js>; rel=preload; as=script
  Link: </styles-407fe62976dc5310c43e.js>; rel=preload; as=script
  Link: </framework-4ae830732e225b42b55a.js>; rel=preload; as=script
  Link: </532a2f07-98241c9de7d7b4ffe645.js>; rel=preload; as=script
  Link: </app-db9ffadb4a15903da37b.js>; rel=preload; as=script
  Link: </styles-407fe62976dc5310c43e.js>; rel=preload; as=script
  Link: </commons-7f55018da8e8b96acb2d.js>; rel=preload; as=script
  Link: </component---src-templates-page-template-js-814ebccd420a7c6d26e3.js>; rel=preload; as=script
  Link: </page-data/app-data.json>; rel=preload; as=fetch; crossorigin
  Link: </page-data/datenschutz/page-data.json>; rel=preload; as=fetch; crossorigin

etc...

[herecydev]

Looks good to me 👍