Next.js: Set proper Cache-Control max-age for static assets

[dbo]

I am missing a proper max-age resp. Cache-Control header set for /static assets (serve defaults to set max-age to 0). I plan to invalidate/bust the browser cache using query parameters on these. Shouldn't static assets always be served with long max-age?

[sergiodxa]

That idea is that you set a CDN, I think the Next static folder it's only for development usage.

[arunoda]

@dbo since we don't hash static files, we are not possible to do that.
It's a pretty good idea to move your static content into a CDN or something similar and avoid /static as possible as you can.

We should improve this behavior in the future. But it's not happening anytime sooner.

[dbo]

@arunoda So if it's generally discouraged to be used on zeit/now (other than during dev-time), I think it's worth to be stressed out in the README.

[myylow]

I ran into this problem when using CloudFlare as a CDN. It takes the cache settings from the origin server (max-age=0), so all assets in /static/ are not cached despite being on the CDN. A next.js config setting would be nice as an improvement at some point, but a workaround if using Express as a server is pretty easy:

    server.use("/static", express.static(__dirname + "/static", {
        maxAge: "365d"
    }));

It needs to come before the next catch-all '*' route in your server.js to take effect.

[aseem2625]

@mike-low
You don't sent immutable ?

Mine is like

app.use(Express.static(path.join(appDir, '/dist/'), {
    setHeaders(res) {
        res.setHeader("Cache-Control", "public,max-age=31536000,immutable");
    }
}));

[sheerun]

@sergiodxa Probably at least files from _next should get non-zero max age by default as they are in hashed folders.

[martpie]

since we don't hash static files, we are not possible to do that.

Any plan to change that one day? Having expire headers is quite common and a recommended practice

[bovas85]

you can use the render api to set this now
https://nuxtjs.org/api/configuration-render/

[timneutkens]

@bovas85 I've hidden your comment as it's related to Nuxt.js, not Next.js.

[bovas85]

Sorry! I read nuxt and commented 👎 my bad :)

[timneutkens]

@bovas85 no worries at all 😄

[fabb]

i tried providing max-age like @mike-low and @aseem2625 suggested, but it did not change the cache header on my static resources. any suggestions? i also tried etag: false without any effect.

[geochanto]

server.use("/static", express.static(__dirname + "/static", {
maxAge: "365d"
}));

This works for /static folder, but not for /_next/static... I tried changing /static to /_next or /_next/static, but that did not work either.

I put this line right above this one, as suggested:

    server.get( '*', ( req, res ) => {
        return handle( req, res );
    } );

Response header cache-control max-age is still 0 for CSS files coming from /_next/static/css. Any tips?

[DaleOC]

Same here.

I have the following, which is not working

 app.prepare().then(() => {
const server = express();


server.use('/images', express.static(path.join(__dirname, 'images'), {
    maxAge: dev ? '0' : '365d'
}));
server.use(compression());
server.use(bodyParser.json());

 server.get('*', (req, res) => {
        res.setHeader(
          "Cache-Control",
          "public, max-age=31536000, immutable",
        );

    return handle(req, res)
});

[ElGoorf]

@DaleOC @geochanto @fabb I had the same issue. Eventually got it:

(async () => {
  await app.prepare();
  const server = express();

  server.get("*.woff2?", (req, res) => {
    res.setHeader("Cache-Control", "public,max-age=31536000,immutable");
    return handle(req, res);
  });

  server.get("*", (req, res) => handle(req, res));

  await server.listen(port);
  console.log(`> Ready on http://localhost:${port}`); // eslint-disable-line no-console
})();