docs: cache control headers

packages/docs/public/_headers

@@ -1,2 +1,17 @@
 /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
+
+/app.webmanifest
+  Cache-Control: public, max-age=86400, s-maxage=86400
+
+/favicon.ico
+  Cache-Control: public, max-age=604800, s-maxage=604800
+
+/*
+  Cache-Control: public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400

packages/docs/src/routes/docs/layout!.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
@@ -24,3 +25,11 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const onGet: RequestHandler = ({ response }) => {
+  // cache for pages using this layout
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/docs/src/routes/examples/[...id]/index!.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, useStyles$, useWatch$, useStore } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { Repl } from '../../../repl/repl';
 import styles from './examples.css?inline';
 import { Header } from '../../../components/header/header';
@@ -141,3 +142,10 @@ interface ExamplesStore extends ReplAppInput {
 }
 
 type ActivePanel = 'Examples' | 'Input' | 'Output' | 'Console';
+
+export const onGet: RequestHandler = ({ response }) => {
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/docs/src/routes/layout.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, Slot } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { Header } from '../components/header/header';
 import { Footer } from '../components/footer/footer';
 
@@ -13,3 +14,11 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const onGet: RequestHandler = ({ response }) => {
+  // cache for pages using this layout
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/docs/src/routes/playground/index!.tsx

@@ -1,4 +1,5 @@
 import { $, component$, Host, useStyles$, useStore, useClientEffect$ } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { Repl } from '../../repl/repl';
 import { Header } from '../../components/header/header';
 import styles from './playground.css?inline';
@@ -112,3 +113,10 @@ export interface PlaygroundStore extends ReplAppInput {
   colLeft: number;
   shareUrlTmr: any;
 }
+
+export const onGet: RequestHandler = ({ response }) => {
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/docs/src/routes/qwikcity/layout!.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import { Footer } from '../../components/footer/footer';
 import { Header } from '../../components/header/header';
@@ -24,3 +25,11 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const onGet: RequestHandler = ({ response }) => {
+  // cache for pages using this layout
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/docs/src/routes/tutorial/layout!.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, Slot, useStore, useStyles$, useWatch$ } from '@builder.io/qwik';
+import type { RequestHandler } from '@builder.io/qwik-city';
 import { useLocation } from '@builder.io/qwik-city';
 import { Repl } from '../../repl/repl';
 import styles from './tutorial.css?inline';
@@ -153,3 +154,10 @@ export interface TutorialStore extends ReplAppInput {
   prev: TutorialApp | undefined;
   next: TutorialApp | undefined;
 }
+
+export const onGet: RequestHandler = ({ response }) => {
+  response.headers.set(
+    'Cache-Control',
+    'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400'
+  );
+};

packages/qwik-city/middleware/request-handler/redirect-handler.ts

@@ -12,6 +12,7 @@ export class RedirectResponse {
     this.status = isRedirectStatus(status) ? status : HttpStatus.TemporaryRedirect;
     this.headers = headers || createHeaders();
     this.headers.set('Location', this.location);
+    this.headers.delete('Cache-Control');
   }
 }
 

packages/qwik-city/runtime/src/app/routes/layout.tsx

@@ -1,4 +1,5 @@
 import { component$, Host, Slot } from '@builder.io/qwik';
+import type { RequestHandler } from '~qwik-city-runtime';
 import Footer from '../components/footer/footer';
 import Header from '../components/header/header';
 
@@ -13,3 +14,8 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const onGet: RequestHandler = ({ response }) => {
+  // cache for a super long time of 10 seconds for pages using this layout
+  response.headers.set('Cache-Control', 'max-age=10');
+};

packages/qwik-city/runtime/src/app/routes/products/[id]/index.tsx

@@ -98,10 +98,13 @@ export const onGet: RequestHandler<EndpointData> = async ({ params, response })
     // instead the renderer will still run with the returned `null` data
     // and the component will decide how to render it
     response.status = 404;
+    // never cache
+    response.headers.set('Cache-Control', 'no-cache, no-store, no-fun');
     return null;
   }
 
-  response.headers.set('Cache-Control', 'no-cache, no-store, no-fun');
+  // cache for a super long time of 15 seconds
+  response.headers.set('Cache-Control', 'max-age=15');
 
   return async () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 200));