[fix] use searchParams for x-sveltekit-invalidated (#7912)

..instead of Vary, because that header is not supported on all CDNs/platforms, leading to wrong cache behavior
sveltejs · Dec 2, 2022 · 1dfa20e · 1dfa20e
1 parent 78a2322
commit 1dfa20e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/.changeset/heavy-forks-search.md b/.changeset/heavy-forks-search.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] use searchParams for x-sveltekit-invalidated
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -1700,12 +1700,15 @@ export function create_client({ target, base }) {
 async function load_data(url, invalid) {
 	const data_url = new URL(url);
 	data_url.pathname = add_data_suffix(url.pathname);
+	if (__SVELTEKIT_DEV__ && url.searchParams.has('x-sveltekit-invalidated')) {
+		throw new Error('Cannot used reserved query parameter "x-sveltekit-invalidated"');
+	}
+	data_url.searchParams.append(
+		'x-sveltekit-invalidated',
+		invalid.map((x) => (x ? '1' : '')).join('_')
+	);
 
-	const res = await native_fetch(data_url.href, {
-		headers: {
-			'x-sveltekit-invalidated': invalid.map((x) => (x ? '1' : '')).join(',')
-		}
-	});
+	const res = await native_fetch(data_url.href);
 	const data = await res.json();
 
 	if (!res.ok) {

diff --git a/packages/kit/src/runtime/server/data/index.js b/packages/kit/src/runtime/server/data/index.js
@@ -27,8 +27,9 @@ export async function render_data(event, route, options, state, trailing_slash)
 		const node_ids = [...route.page.layouts, route.page.leaf];
 
 		const invalidated =
-			event.request.headers.get(INVALIDATED_HEADER)?.split(',').map(Boolean) ??
+			event.url.searchParams.get(INVALIDATED_HEADER)?.split('_').map(Boolean) ??
 			node_ids.map(() => true);
+		event.url.searchParams.delete(INVALIDATED_HEADER);
 
 		let aborted = false;
 

diff --git a/packages/kit/src/runtime/server/index.js b/packages/kit/src/runtime/server/index.js
@@ -13,7 +13,7 @@ import {
 	strip_data_suffix
 } from '../../utils/url.js';
 import { exec } from '../../utils/routing.js';
-import { INVALIDATED_HEADER, redirect_json_response, render_data } from './data/index.js';
+import { redirect_json_response, render_data } from './data/index.js';
 import { add_cookies_to_headers, get_cookies } from './cookie.js';
 import { create_fetch } from './fetch.js';
 import { Redirect } from '../control.js';
@@ -230,16 +230,6 @@ export async function respond(request, options, state) {
 						response.headers.set(key, /** @type {string} */ (value));
 					}
 
-					if (is_data_request) {
-						// set the Vary header on __data.json requests to ensure we don't cache
-						// incomplete responses with skipped data loads
-						// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
-						const vary = response.headers.get('Vary');
-						if (vary !== '*') {
-							response.headers.append('Vary', INVALIDATED_HEADER);
-						}
-					}
-
 					add_cookies_to_headers(response.headers, Object.values(new_cookies));
 
 					if (state.prerendering && event.route.id !== null) {

diff --git a/packages/kit/test/apps/basics/test/client.test.js b/packages/kit/test/apps/basics/test/client.test.js
@@ -101,14 +101,15 @@ test.describe('a11y', () => {
 });
 
 test.describe('Caching', () => {
-	test('caches __data.json requests with Vary header', async ({ page, app }) => {
+	test('caches __data.json requests with invalidated search param', async ({ page, app }) => {
 		await page.goto('/');
 		const [, response] = await Promise.all([
 			app.goto('/caching/server-data'),
-			page.waitForResponse((request) => request.url().endsWith('server-data/__data.json'))
+			page.waitForResponse((request) =>
+				request.url().endsWith('server-data/__data.json?x-sveltekit-invalidated=_1')
+			)
 		]);
 		expect(response.headers()['cache-control']).toBe('public, max-age=30');
-		expect(response.headers()['vary']).toBe('x-sveltekit-invalidated');
 	});
 });