Next.js: Override Cache-Control header

[ismailbaskin]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Is there any way to override Cache-Control header of /_next/webpack/chunks/:name' requests https://github.com/zeit/next.js/blob/canary/server/index.js#L153 . I want to add s-max-age to be more aggressively.

[kachkaev]

@ismailbaskin have you found a solution? I'm using next-optimized-images, which gives me unique immutable paths. So I'd like my images to be cached forever and avoid surplus 304 HTTP requests.

[kachkaev]

I guess I got this. Here's what I added to server.ts to make caching for images and custom fonts work.

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

        if (env.NODE_ENV === "production") {
          server.get(
            /^\/_next\/static\/(images|fonts)\//,
            (_, res, nextHandler) => {
              res.setHeader(
                "Cache-Control",
                "public, max-age=31536000, immutable",
              );
              nextHandler();
            },
          );
        }

        // ...

        handle(req, res);
     }

There's a built-in caching mechanism for static files in canary (https://github.com/zeit/next.js/pull/4322), but that only concerns next.js stuff, not custom images etc.

[timneutkens]

@kachkaev that's the correct way. We can't decide whether static files generated by external factors can be cached or not.

@ismailbaskin I'm not sure what you'd like to change with a cache-control of 365 days and immutable.

[JannikZed]

Could you maybe add a quick example somewhere, how to easily add these settings? We don't have a server.ts file as @kachkaev, so I'm a little lost on where to add this configuration, as we use a varnish cache in front of our next.js app, that should cache all our static content .. any hint appreciated

[Vadorequest]

Any recommendation when exporting a next.js app? There is no server part at all. Cache control seems to be configured for 1h but I don't know how to control it, if that's even possible.

[maraisr]

Further this discussion, is there an ability to handle(req, res) and then apply cache headers after the fact?

Ie, if a 50x, 40x, id like to "not cache", and 200, id like to cache. Obviously based on route. Or is this something that should be handled in a getInitialProps?

cc @timneutkens

[fabiosantoscode]

You might be able to set the cache header before the call to handle(). res.setHeader('cache-control', ...).

I vaguely recall doing this but can't tell for sure.

[dijs]

This is not working. NextJS just seems to override the header. (I am using a custom server and calling the nextjs handler within an express route)

[raindecastro]

Trying to solve this one too, I can't seem to cache my images. I'm using next-images for my loader. @dijs were you able to find something out?