[breaking] respect cache-control max-age on the client

...for initially fetched responses
Closes #4625
The proposed etag logic is not implemented because it sounds too complex and would add needless code for 99% of users

This is a breaking change insofar that people could have relied on the old behavior somehow

Author: dummdidumm

.changeset/serious-bottles-knock.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] respect cache-control max-age on the client for initially fetched responses

packages/kit/src/runtime/client/client.js

@@ -2,7 +2,7 @@ import { onMount, tick } from 'svelte';
 import { normalize_error } from '../../utils/error.js';
 import { make_trackable, decode_params, normalize_path } from '../../utils/url.js';
 import { find_anchor, get_base_uri, scroll_state } from './utils.js';
-import { lock_fetch, unlock_fetch, initial_fetch, native_fetch } from './fetcher.js';
+import { lock_fetch, unlock_fetch, initial_fetch, subsequent_fetch } from './fetcher.js';
 import { parse } from './parse.js';
 import { error } from '../../exports/index.js';
 
@@ -574,7 +574,9 @@ export function create_client({ target, base, trailing_slash }) {
 					depends(normalized);
 
 					// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be normalized
-					return started ? native_fetch(normalized, init) : initial_fetch(requested, init);
+					return started
+						? subsequent_fetch(requested, normalized, init)
+						: initial_fetch(requested, init);
 				},
 				setHeaders: () => {}, // noop
 				depends,

packages/kit/src/runtime/client/fetcher.js

@@ -2,7 +2,7 @@ import { hash } from '../hash.js';
 
 let loading = 0;
 
-export const native_fetch = window.fetch;
+const native_fetch = window.fetch;
 
 export function lock_fetch() {
 	loading += 1;
@@ -37,7 +37,12 @@ if (import.meta.env.DEV) {
 	};
 }
 
+const start = new Date().getTime();
+const cache = new Map();
+
 /**
+ * Should be called on the initial run of load functions that hydrate the page.
+ * Saves any requests with cache-control max-age to the cache.
  * @param {RequestInfo} resource
  * @param {RequestInit} [opts]
  */
@@ -53,8 +58,39 @@ export function initial_fetch(resource, opts) {
 	const script = document.querySelector(selector);
 	if (script && script.textContent) {
 		const { body, ...init } = JSON.parse(script.textContent);
+		const match = /** @type {string | undefined } */ (init?.headers?.['cache-control'])?.match(
+			/max-age=(\d+)/
+		);
+		if (match) {
+			const age = Number(init?.headers?.age ?? '0');
+			const cache_time = Number(match[1]) - age;
+			cache.set(url, { body, init, cache_time });
+		}
 		return Promise.resolve(new Response(body, init));
 	}
 
 	return native_fetch(resource, opts);
 }
+
+/**
+ * Tries to get the response from the cache, if max-age allows it, else does a fetch.
+ * @param {RequestInfo} original
+ * @param {RequestInfo} resource
+ * @param {RequestInit} [opts]
+ */
+export function subsequent_fetch(original, resource, opts) {
+	if (cache.size) {
+		const url = JSON.stringify(typeof original === 'string' ? original : original.url);
+		const cached = cache.get(url);
+		if (cached) {
+			const { body, init, cache_time } = cached;
+			const now = new Date().getTime();
+			if ((now - start) / 1000 < cache_time) {
+				return Promise.resolve(new Response(body, init));
+			}
+			cache.delete(url);
+		}
+	}
+
+	return native_fetch(resource, opts);
+}

packages/kit/test/apps/basics/src/routes/load/cache-control/+page.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('./$types').PageLoad}
+ */
+export async function load({ fetch, depends }) {
+	depends('cache:control');
+	const resp = await fetch('./cache-control/called');
+	return resp.json();
+}

packages/kit/test/apps/basics/src/routes/load/cache-control/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { invalidate } from '$app/navigation';
+	/**
+	 * @type {import('./$types').PageData}
+ 	 */
+	export let data;
+	async function fetch_again() {
+		await fetch('./cache-control/called', {method: 'POST'})
+		invalidate('cache:control');
+	}
+</script>
+
+<p>Count is {data.count}</p>
+<button on:click={fetch_again}>Fetch again</button>

packages/kit/test/apps/basics/src/routes/load/cache-control/called/+server.js

@@ -0,0 +1,12 @@
+import { json } from '@sveltejs/kit';
+
+let count = 0;
+
+export function GET({ setHeaders }) {
+	setHeaders({ 'cache-control': 'public, max-age=4', age: '2' });
+	return json({ count });
+}
+
+export function POST() {
+	count++;
+}

packages/kit/test/apps/basics/test/client.test.js

@@ -381,6 +381,18 @@ test.describe('Load', () => {
 		expect(await page.textContent('pre')).toBe(JSON.stringify({ foo: { bar: 'Custom layout' } }));
 	});
 
+	test('load does not call fetch is max-age allows it', async ({ page }) => {
+		await page.goto('/load/cache-control');
+		expect(await page.textContent('p')).toBe('Count is 0');
+		await page.waitForTimeout(500);
+		await page.click('button');
+		await page.waitForTimeout(500);
+		expect(await page.textContent('p')).toBe('Count is 0');
+		await page.waitForTimeout(2000);
+		await page.click('button');
+		await expect(page.locator('p')).toHaveText('Count is 2');
+	});
+
 	if (process.env.DEV) {
 		test('using window.fetch causes a warning', async ({ page }) => {
 			const port = 5173;