Merge pull request #7535 from QwikDev/assets-caching

chore: add caching headers for assets/

Author: wmertens

.changeset/fair-cars-fry.md

@@ -27,7 +27,9 @@ The builtin service workers components are deprecated but still exist for backwa
 
 Caching Headers:
 
-The bundles under build/ are named with their content hash and may therefore be cached indefinitely. Typically you should serve `build/**/*.js` with `Cache-Control: public, max-age=31536000, immutable`.
+The files under build/ and assets/ are named with their content hash and may therefore be cached indefinitely. Typically you should serve `build/*` and `assets/*` with `Cache-Control: public, max-age=31536000, immutable`.
+
+However, if you changed the rollup configuration for output filenames, you will have to adjust the caching configuration accordingly.
 
 ---
 
@@ -58,4 +60,3 @@ npm run qwik add service-worker
 ```
 
 This will add a basic service worker setup that you can customize for specific caching strategies, offline support, or other PWA features beyond just prefetching.
-

packages/docs/public/_headers

@@ -1,12 +1,9 @@
-/build/*
+/assets/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
 
-/fonts/*
+/build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
 
-/*.png
-  Cache-Control: public, max-age=86400, s-maxage=86400
-
 /*.svg
   Cache-Control: public, max-age=86400, s-maxage=86400
 

packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx

@@ -143,3 +143,7 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
     }, "CDN-Cache-Control");
 };
 ```
+
+### Caching bundles and assets
+
+See [Cache Headers](/docs/deployments/#cache-headers) for more information.

packages/insights/public/_headers

@@ -1,2 +1,4 @@
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
+/assets/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

starters/adapters/cloudflare-pages/public/_headers

@@ -7,3 +7,5 @@
 
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
+/assets/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

starters/adapters/express/src/entry.express.tsx

@@ -25,6 +25,7 @@ declare global {
 // Directories where the static assets are located
 const distDir = join(fileURLToPath(import.meta.url), "..", "..", "dist");
 const buildDir = join(distDir, "build");
+const assetsDir = join(distDir, "assets");
 
 // Allow for dynamic port
 const PORT = process.env.PORT ?? 3000;
@@ -53,6 +54,10 @@ const app = express();
 // Static asset handlers
 // https://expressjs.com/en/starter/static-files.html
 app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: "1y" }));
+app.use(
+  `/assets`,
+  express.static(assetsDir, { immutable: true, maxAge: "1y" }),
+);
 app.use(express.static(distDir, { redirect: false }));
 
 // Use Qwik City's page and endpoint request handler

starters/adapters/fastify/src/entry.fastify.tsx

@@ -21,6 +21,7 @@ declare global {
 // Directories where the static assets are located
 const distDir = join(fileURLToPath(import.meta.url), "..", "..", "dist");
 const buildDir = join(distDir, "build");
+const assetsDir = join(distDir, "assets");
 
 // Allow for dynamic port and host
 const PORT = parseInt(process.env.PORT ?? "3000");
@@ -39,7 +40,7 @@ const start = async () => {
   // await fastify.register(import('@fastify/compress'))
 
   // Handle Qwik City using a plugin
-  await fastify.register(FastifyQwik, { distDir, buildDir });
+  await fastify.register(FastifyQwik, { distDir, buildDir, assetsDir });
 
   // Start the fastify server
   await fastify.listen({ port: PORT, host: HOST });

starters/adapters/fastify/src/plugins/fastify-qwik.ts

@@ -9,6 +9,7 @@ import render from "../entry.ssr";
 export interface FastifyQwikOptions {
   distDir: string;
   buildDir: string;
+  assetsDir: string;
 }
 
 const { router, notFound } = createQwikCity({ render, qwikCityPlan });
@@ -17,7 +18,7 @@ const qwikPlugin: FastifyPluginAsync<FastifyQwikOptions> = async (
   fastify,
   options,
 ) => {
-  const { buildDir, distDir } = options;
+  const { buildDir, distDir, assetsDir } = options;
 
   fastify.register(fastifyStatic, {
     root: buildDir,
@@ -27,6 +28,13 @@ const qwikPlugin: FastifyPluginAsync<FastifyQwikOptions> = async (
     decorateReply: false,
   });
 
+  fastify.register(fastifyStatic, {
+    root: assetsDir,
+    prefix: "/assets",
+    immutable: true,
+    maxAge: "1y",
+  });
+
   fastify.register(fastifyStatic, {
     root: distDir,
     redirect: false,

starters/adapters/netlify-edge/public/_headers

@@ -1,2 +1,4 @@
+/assets/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

starters/adapters/vercel-edge/vercel.json

@@ -10,7 +10,7 @@
       ]
     },
     {
-      "source": "/build/(.*)",
+      "source": "/(assets|build)/.*",
       "headers": [
         {
           "key": "Cache-Control",