How can i save js, css in cache from Gatsby? - reactjs

Question

i have some files from node_modules they need to be saved in cache because i am getting this information
enter image description here
to get this information i audited with lighthouse this is the web https://www.webpagetest.org/
this is the final result, "cache static content" is the wrong
enter image description here
i am working with Gatsby, i found this information about my problem https://www.gatsbyjs.com/docs/caching/#javascript-and-css but i am not sure how can i use it or should i use another library? i dont have idea how can i cache
i think i should use these properties:
The cache-control header should be cache-control: public, max-age=31536000, immutable
this is my file gatsby-config
plugins: [
'gatsby-plugin-top-layout',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/src/assets`,
},
},
`gatsby-plugin-image`,
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-plugin-manifest',
options: {
},
},
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: ['/projects/'],
},
},
{
resolve: 'gatsby-plugin-material-ui',
my propuse to do this is solve this problem, there are a blank space when i reload the web application
blank space

Answer 1

Gatsby generates static content. It doesn't handle sending HTTP responses. That's going to be a web server (or in your case firebase).
Checkout the docs for sending headers on firebase
https://firebase.google.com/docs/hosting/full-config#headers
You'll need something like:
"hosting": {
"headers": [ {
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [ {
"key": "cache-control",
"value": "public, max-age=31536000, immutable"
} ]
} ]
}
This caches font files which is generally safe because fonts change very rarely.
You can add js and css to that list if you want as well. Keep in mind that you'll need to change the names of an js and css files or the browser will wait 1 year before reloading them.