Merge pull request #7537 from QwikDev/revert-q-data-no-cache

wmertens · web-flow · commit b54ecc15c403 · 2025-04-25T23:01:48.000+02:00
fix(qwik-city): stop q-data.json cache busting
diff --git a/.changeset/gentle-bats-thank.md b/.changeset/gentle-bats-thank.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': minor
+---
+
+FIX: qwik-city no longer forces `q-data.json` downloads, instead relying on the cache headers. This means that you have to make sure your `q-data.json` is served with `Cache-Control` headers that suit you. That file contains all the information about the route and is read for each qwik-city navigation. By default the data is cached for one hour.
diff --git a/packages/docs/public/_headers b/packages/docs/public/_headers
@@ -11,4 +11,4 @@
   Cache-Control: public, max-age=604800, s-maxage=604800
 
 /*
-  Cache-Control: public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400
+  Cache-Control: public, max-age=3600, s-maxage=3600
diff --git a/packages/docs/src/components/sidebar/sidebar.tsx b/packages/docs/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,24 @@
-import { component$, sync$, useContext, useOnDocument, useStyles$ } from '@builder.io/qwik';
-import { type ContentMenu, useContent, useLocation, routeLoader$ } from '@builder.io/qwik-city';
+import {
+  component$,
+  sync$,
+  useComputed$,
+  useContext,
+  useOnDocument,
+  useStyles$,
+} from '@builder.io/qwik';
+import { server$, useContent, useLocation, type ContentMenu } from '@builder.io/qwik-city';
 import { GlobalStore } from '../../context';
 import { CloseIcon } from '../svgs/close-icon';
 import styles from './sidebar.css?inline';
 
-export const useMarkdownItems = routeLoader$(async () => {
-  const rawData = await Promise.all(
+let markdownItems: MarkdownItems | undefined;
+let markdownItemsPromise: Promise<MarkdownItems> | undefined;
+export const getMarkdownItems = server$(() => {
+  if (markdownItems) {
+    return markdownItems;
+  }
+
+  markdownItemsPromise ||= Promise.all(
     Object.entries(import.meta.glob<{ frontmatter?: MDX }>('../../routes/**/*.{md,mdx}')).map(
       async ([k, v]) => {
         return [
@@ -20,20 +33,22 @@ export const useMarkdownItems = routeLoader$(async () => {
         ] as const;
       }
     )
-  );
-  const markdownItems: MarkdownItems = {};
-  rawData.map(([k, v]) => {
-    if (v.frontmatter?.updated_at) {
-      markdownItems[k] = {
-        title: v.frontmatter.title,
-        contributors: v.frontmatter.contributors,
-        created_at: v.frontmatter.created_at,
-        updated_at: v.frontmatter.updated_at,
-      };
-    }
-  });
+  ).then((rawData) => {
+    markdownItems = {};
+    rawData.map(([k, v]) => {
+      if (v.frontmatter?.updated_at) {
+        markdownItems![k] = {
+          title: v.frontmatter.title,
+          contributors: v.frontmatter.contributors,
+          created_at: v.frontmatter.created_at,
+          updated_at: v.frontmatter.updated_at,
+        };
+      }
+    });
 
-  return markdownItems;
+    return markdownItems;
+  });
+  return markdownItemsPromise;
 });
 
 type MarkdownItems = Record<string, MDX>;
@@ -64,7 +79,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
   const globalStore = useContext(GlobalStore);
   const { menu } = useContent();
   const { url } = useLocation();
-  const markdownItems = useMarkdownItems();
+  const markdownItems = useComputed$(() => getMarkdownItems());
   const allOpen = url.pathname.startsWith('/qwikcity/') || props.allOpen;
 
   useOnDocument(
@@ -78,7 +93,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
           el.scrollTop = savedScroll;
           el.style.visibility = 'visible';
         }
-      } catch (err) {
+      } catch {
         //
       }
     })
@@ -103,7 +118,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
             try {
               const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
               sessionStorage.setItem('qwik-sidebar', String(scrollTop));
-            } catch (err) {
+            } catch {
               //
             }
           })}
diff --git a/packages/docs/src/routes/community/layout.tsx b/packages/docs/src/routes/community/layout.tsx
@@ -6,8 +6,6 @@ import { OnThisPage } from '../../components/on-this-page/on-this-page';
 import { ContentNav } from '../../components/content-nav/content-nav';
 import styles from '../docs/docs.css?inline';
 
-export { useMarkdownItems } from '../../components/sidebar/sidebar';
-
 export default component$(() => {
   useStyles$(styles);
 
diff --git a/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx
@@ -19,7 +19,7 @@ created_at: '2023-05-24T03:52:24Z'
 
 Caching responses is critical for keeping your site as fast as possible, both for [pages](/docs/(qwikcity)/pages/index.mdx) as well as [middleware](/docs/(qwikcity)/middleware/index.mdx).
 
-A good default is to use [stale-while-revalidate](https://web.dev/stale-while-revalidate/) caching for all responses. 
+A option is to use [stale-while-revalidate](https://web.dev/stale-while-revalidate/) caching for all responses. Note that this means that users will see a cached response even if the server is updated, and only when the user refreshes will they see the updated content.
 
 For instance, we can add an `onGet` export to our root [layout](/docs/(qwikcity)/layout/index.mdx) (`src/routes/layout.tsx`) like so, to apply good caching defaults site-wide:
 
diff --git a/packages/docs/src/routes/docs/layout.tsx b/packages/docs/src/routes/docs/layout.tsx
@@ -9,8 +9,6 @@ import { createBreadcrumbs, SideBar } from '../../components/sidebar/sidebar';
 import { GlobalStore } from '../../context';
 import styles from './docs.css?inline';
 
-export { useMarkdownItems } from '../../components/sidebar/sidebar';
-
 export default component$(() => {
   useStyles$(styles);
   const loc = useLocation();
diff --git a/packages/docs/src/routes/examples/[...id]/index!.tsx b/packages/docs/src/routes/examples/[...id]/index!.tsx
@@ -178,8 +178,6 @@ export const onGet: RequestHandler = ({ cacheControl }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
-    sMaxAge: 3600,
-    staleWhileRevalidate: 86400,
   });
 };
 
diff --git a/packages/docs/src/routes/layout.tsx b/packages/docs/src/routes/layout.tsx
@@ -10,7 +10,5 @@ export const onGet: RequestHandler = ({ cacheControl }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
-    sMaxAge: 3600,
-    staleWhileRevalidate: 86400,
   });
 };
diff --git a/packages/docs/src/routes/playground/index!.tsx b/packages/docs/src/routes/playground/index!.tsx
@@ -135,7 +135,5 @@ export const onGet: RequestHandler = ({ cacheControl }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
-    sMaxAge: 3600,
-    staleWhileRevalidate: 86400,
   });
 };
diff --git a/packages/docs/src/routes/tutorial/layout.tsx b/packages/docs/src/routes/tutorial/layout.tsx
@@ -172,7 +172,5 @@ export const onGet: RequestHandler = ({ cacheControl }) => {
   cacheControl({
     public: true,
     maxAge: 3600,
-    sMaxAge: 3600,
-    staleWhileRevalidate: 86400,
   });
 };
diff --git a/packages/qwik-city/src/middleware/request-handler/cache-control.ts b/packages/qwik-city/src/middleware/request-handler/cache-control.ts
@@ -20,7 +20,6 @@ export function createCacheControl(cacheControl: CacheControl) {
       public: true,
       immutable: true,
       maxAge: 60 * 60 * 24 * 365,
-      staleWhileRevalidate: 60 * 60 * 24 * 365,
     };
   } else if (cacheControl === 'no-cache') {
     cacheControl = {
@@ -32,7 +31,6 @@ export function createCacheControl(cacheControl: CacheControl) {
     cacheControl = {
       maxAge: cacheControl,
       sMaxAge: cacheControl,
-      staleWhileRevalidate: cacheControl,
     };
   }
 
diff --git a/packages/qwik-city/src/runtime/src/client-navigate.ts b/packages/qwik-city/src/runtime/src/client-navigate.ts
@@ -45,6 +45,6 @@ export const prefetchSymbols = (path: string) => {
   if (isBrowser) {
     path = path.endsWith('/') ? path : path + '/';
     path = path.length > 1 && path.startsWith('/') ? path.slice(1) : path;
-    preload(path);
+    preload(path, 0.8);
   }
 };
diff --git a/packages/qwik-city/src/runtime/src/use-endpoint.ts b/packages/qwik-city/src/runtime/src/use-endpoint.ts
@@ -28,7 +28,7 @@ export const loadClientData = async (
   let resolveFn: () => void | undefined;
 
   if (!qData) {
-    const fetchOptions = getFetchOptions(opts?.action);
+    const fetchOptions = getFetchOptions(opts?.action, opts?.clearCache);
     if (opts?.action) {
       opts.action.data = undefined;
     }
@@ -88,16 +88,22 @@ export const loadClientData = async (
   });
 };
 
-const getFetchOptions = (action: RouteActionValue | undefined): RequestInit => {
+const getFetchOptions = (
+  action: RouteActionValue | undefined,
+  noCache: boolean | undefined
+): RequestInit | undefined => {
   const actionData = action?.data;
   if (!actionData) {
-    return {
-      cache: 'no-cache',
-      headers: {
-        'Cache-Control': 'no-cache',
-        Pragma: 'no-cache',
-      },
-    };
+    if (noCache) {
+      return {
+        cache: 'no-cache',
+        headers: {
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+        },
+      };
+    }
+    return undefined;
   }
   if (actionData instanceof FormData) {
     return {
diff --git a/packages/qwik-city/src/runtime/vite.config.mts b/packages/qwik-city/src/runtime/vite.config.mts
@@ -13,7 +13,12 @@ export default defineConfig(() => {
       },
       minify: false,
       rollupOptions: {
-        external: ['zod', '@qwik-city-sw-register', '@qwik-city-plan'],
+        external: [
+          'zod',
+          '@qwik-city-sw-register',
+          '@qwik-city-plan',
+          '@builder.io/qwik/preloader',
+        ],
       },
     },
     plugins: [qwikVite()],
diff --git a/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts b/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts
@@ -56,8 +56,9 @@ export function convertManifestToBundleGraph(
   }
   // Routes etc
   if (bundleGraphAdders) {
+    const combined = { ...manifest, bundles: graph };
     for (const adder of bundleGraphAdders) {
-      const result = adder(manifest);
+      const result = adder(combined);
       if (result) {
         Object.assign(graph, result);
       }
@@ -68,7 +69,17 @@ export function convertManifestToBundleGraph(
   for (const bundleName of Object.keys(graph)) {
     const bundle = graph[bundleName];
     const imports = bundle.imports?.filter((dep) => graph[dep]) || [];
-    const dynamicImports = bundle.dynamicImports?.filter((dep) => graph[dep]?.symbols) || [];
+    const dynamicImports =
+      bundle.dynamicImports?.filter(
+        // we only want to include dynamic imports that belong to the app
+        // e.g. not all languages supported by shiki
+        (dep) =>
+          graph[dep] &&
+          // either there are qrls
+          (graph[dep].symbols ||
+            // or it's a dynamic import from the app source
+            graph[dep].origins?.some((o) => !o.includes('node_modules')))
+      ) || [];
 
     /**
      * Overwrite so we don't mutate the given objects. Be sure to copy all properties we use during
diff --git a/packages/qwik/src/optimizer/src/plugins/bundle-graph.unit.ts b/packages/qwik/src/optimizer/src/plugins/bundle-graph.unit.ts
diff --git a/starters/apps/empty/src/routes/layout.tsx b/starters/apps/empty/src/routes/layout.tsx
diff --git a/starters/apps/playground/src/routes/layout.tsx b/starters/apps/playground/src/routes/layout.tsx
diff --git a/starters/features/bootstrap/src/routes/bootstrap/layout.tsx b/starters/features/bootstrap/src/routes/bootstrap/layout.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@builder.io/qwik-city': minor
 +---
++
 +FIX: qwik-city no longer forces `q-data.json` downloads, instead relying on the cache headers. This means that you have to make sure your `q-data.json` is served with `Cache-Control` headers that suit you. That file contains all the information about the route and is read for each qwik-city navigation. By default the data is cached for one hour.