[breaking] respect cache-control max-age on the client (#6461)

* [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

* calculate ttl on the server

* oops

* oops

* no

* invalidate cache on POST

* fix

* simplify

* deflake, hopefully

* try to make test less flaky

* disable when prerendering

Co-authored-by: Rich Harris <[email protected]>

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';
 
@@ -584,11 +584,13 @@ export function create_client({ target, base, trailing_slash }) {
 					}
 
 					// we must fixup relative urls so they are resolved from the target page
-					const normalized = new URL(requested, url).href;
-					depends(normalized);
+					const resolved = new URL(requested, url).href;
+					depends(resolved);
 
-					// 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);
+					// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be resolved
+					return started
+						? subsequent_fetch(resolved, init)
+						: initial_fetch(requested, resolved, 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;
@@ -33,15 +33,40 @@ if (import.meta.env.DEV) {
 			);
 		}
 
+		const method = input instanceof Request ? input.method : init?.method || 'GET';
+
+		if (method !== 'GET') {
+			const url = new URL(input instanceof Request ? input.url : input.toString(), document.baseURI)
+				.href;
+			cache.delete(url);
+		}
+
+		return native_fetch(input, init);
+	};
+} else {
+	window.fetch = (input, init) => {
+		const method = input instanceof Request ? input.method : init?.method || 'GET';
+
+		if (method !== 'GET') {
+			const url = new URL(input instanceof Request ? input.url : input.toString(), document.baseURI)
+				.href;
+			cache.delete(url);
+		}
+
 		return native_fetch(input, init);
 	};
 }
 
+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 {string} resolved
  * @param {RequestInit} [opts]
  */
-export function initial_fetch(resource, opts) {
+export function initial_fetch(resource, resolved, opts) {
 	const url = JSON.stringify(typeof resource === 'string' ? resource : resource.url);
 
 	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
@@ -51,10 +76,32 @@ export function initial_fetch(resource, opts) {
 	}
 
 	const script = document.querySelector(selector);
-	if (script && script.textContent) {
+	if (script?.textContent) {
 		const { body, ...init } = JSON.parse(script.textContent);
+
+		const ttl = script.getAttribute('data-ttl');
+		if (ttl) cache.set(resolved, { body, init, ttl: 1000 * Number(ttl) });
+
 		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 {string} resolved
+ * @param {RequestInit} [opts]
+ */
+export function subsequent_fetch(resolved, opts) {
+	const cached = cache.get(resolved);
+	if (cached) {
+		if (performance.now() < cached.ttl) {
+			return new Response(cached.body, cached.init);
+		}
+
+		cache.delete(resolved);
+	}
+
+	return native_fetch(resolved, opts);
+}

packages/kit/src/runtime/server/page/fetch.js

@@ -214,6 +214,7 @@ export function create_fetch({ event, options, state, route, prerender_default }
 
 						fetched.push({
 							url: requested,
+							method: opts.method || 'GET',
 							body: opts.body,
 							response: {
 								status: status_number,

packages/kit/src/runtime/server/page/render.js

@@ -284,7 +284,7 @@ export async function render_response({
 	}
 
 	if (page_config.ssr && page_config.csr) {
-		body += `\n\t${fetched.map(serialize_data).join('\n\t')}`;
+		body += `\n\t${fetched.map((item) => serialize_data(item, !!state.prerendering)).join('\n\t')}`;
 	}
 
 	if (options.service_worker) {

packages/kit/src/runtime/server/page/serialize_data.js

@@ -35,10 +35,11 @@ const pattern = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
  * and that the resulting string isn't further modified.
  *
  * @param {import('./types.js').Fetched} fetched
+ * @param {boolean} [prerendering]
  * @returns {string} The raw HTML of a script element carrying the JSON payload.
  * @example const html = serialize_data('/data.json', null, { foo: 'bar' });
  */
-export function serialize_data(fetched) {
+export function serialize_data(fetched, prerendering = false) {
 	const safe_payload = JSON.stringify(fetched.response).replace(
 		pattern,
 		(match) => replacements[match]
@@ -54,5 +55,18 @@ export function serialize_data(fetched) {
 		attrs.push(`data-hash=${escape_html_attr(hash(fetched.body))}`);
 	}
 
+	if (!prerendering && fetched.method === 'GET') {
+		const cache_control = /** @type {string} */ (fetched.response.headers['cache-control']);
+		if (cache_control) {
+			const match = /s-maxage=(\d+)/g.exec(cache_control) ?? /max-age=(\d+)/g.exec(cache_control);
+			if (match) {
+				const age = /** @type {string} */ (fetched.response.headers['age']) ?? '0';
+
+				const ttl = +match[1] - +age;
+				attrs.push(`data-ttl="${ttl}"`);
+			}
+		}
+	}
+
 	return `<script ${attrs.join(' ')}>${safe_payload}</script>`;
 }

packages/kit/src/runtime/server/page/serialize_data.spec.js

@@ -6,6 +6,7 @@ test('escapes slashes', () => {
 	assert.equal(
 		serialize_data({
 			url: 'foo',
+			method: 'GET',
 			body: null,
 			response: {
 				status: 200,
@@ -24,6 +25,7 @@ test('escapes exclamation marks', () => {
 	assert.equal(
 		serialize_data({
 			url: 'foo',
+			method: 'GET',
 			body: null,
 			response: {
 				status: 200,
@@ -44,6 +46,7 @@ test('escapes the attribute values', () => {
 	assert.equal(
 		serialize_data({
 			url: raw,
+			method: 'GET',
 			body: null,
 			response: {
 				status: 200,

packages/kit/src/runtime/server/page/types.d.ts

@@ -3,6 +3,7 @@ import { HttpError } from '../../control.js';
 
 export interface Fetched {
 	url: string;
+	method: string;
 	body?: string | null;
 	response: {
 		status: number;

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

@@ -0,0 +1,5 @@
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch }) {
+	const resp = await fetch('/load/cache-control/count');
+	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('/load/cache-control/increment');
+		invalidate('/load/cache-control/count');
+	}
+</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/count/+server.js

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

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

@@ -0,0 +1,7 @@
+import { json } from '@sveltejs/kit';
+import { increment } from '../state.js';
+
+export function GET() {
+	increment();
+	return json({});
+}

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

@@ -0,0 +1,7 @@
+import { json } from '@sveltejs/kit';
+import { reset } from '../state.js';
+
+export function GET() {
+	reset();
+	return json({});
+}

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

@@ -0,0 +1,9 @@
+export let count = 0;
+
+export function increment() {
+	return count++;
+}
+
+export function reset() {
+	count = 0;
+}

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

@@ -381,6 +381,26 @@ test.describe('Load', () => {
 		expect(await page.textContent('pre')).toBe(JSON.stringify({ foo: { bar: 'Custom layout' } }));
 	});
 
+	test('load does not call fetch if max-age allows it', async ({ page, request }) => {
+		await request.get('/load/cache-control/reset');
+
+		page.addInitScript(`
+			window.now = 0;
+			window.performance.now = () => now;
+		`);
+
+		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.evaluate(() => (window.now = 2500));
+		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;