Immutable cache, hashed names

Cache hashed assets for a year; never mark a mutable URL immutable.

From nextjs-pagespeed.

Deploy, then come back

Deploy, then Revisit; try a gap past 365 days.

Changed

Server v1 · day 0

/logo.pngBad

Browser cache

    Last visit

      /logo.[hash].pngGood

      Browser cache

        Last visit

          import logo from "./logo.png"; // → /_next/static/media/logo.3f9a1c.png

Cache-Control: public, max-age=31536000, immutable

          What a repeat visit costs

          Press Repeat visit, then raise the round trip.

          no-cacheBad
          immutable + hashesGood

          Can this URL be immutable?

          Type a path or pick one.

          const HASHED = /[.\-_]((?=[a-f]*\d)[a-f0-9]{6,}|(?=(?:[a-z]*\d){2})(?=\d*[a-z])[a-z0-9]{8,})\.\w+$/i;
const immutable = path.startsWith("/_next/static/") || HASHED.test(path);

          Why it matters, pros and cons

          Why it matters

          An immutable file costs a returning visitor nothing, not even a 304.

          Pros

          • Zero requests for unchanged assets.
          • Deploys invalidate only changed files.
          • Free for /_next/static and imports.

          Cons

          • A mutable URL marked immutable cannot be recalled.
          • Linked names like favicon.ico cannot be renamed.
          • Old hashed files must stay reachable a while.