Cache problem with client-side navigation: the response is now __data.js instead of __data.json

[kristjanmar]

Describe the bug

I believe the recent change where client-side navigation responds with __data.js instead of __data.json can be problematic.

I have Cloudflare on my site and I just realized that the __data.js files that are returned when navigating between pages are being cached on the edge and possibly also in the browser cache. I don't have any custom page rules for .js files in Cloudflare, this is the default behavior.

In some cases, the "age" in the response headers is showing very high numbers, much higher than what I have in my s-max-age cache-control headers in hooks.js (which used to cache on Vercel edge only, not Cloudflare).

This means that many users are potentially seeing very old and outdated info for pages that are supposed to be highly dynamic.

Reproduction

I don't think I can set up a reproduction since it would require a custom domain and adding it to Cloudflare.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 50.08 GB / 63.91 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.69 => 1.0.0-next.70
    @sveltejs/kit: 1.0.0-next.454 => 1.0.0-next.456
    svelte: ^3.49.0 => 3.49.0
    vite: 3.1.0-beta.1 => 3.1.0-beta.1

Severity

Blocking an upgrade

Additional Information

Update: I rolled back to 446 for now since the 447 update seems to also have introduced a bunch of weird issues with both Sentry and Plausible Analytics.

[kristjanmar]

I checked my Cloudflare cache logs since I updated SvelteKit and it looks like Cloudflare has served 3.6% of all my __data.js files from Cache. I assume this number could be much higher for others using Cloudflare that don't have as many unique URLs as my site (over 100K).

[lkj4]

fwiw, I get from ...__data.js no JSON but something starting with window.__sveltekit_data = {function{a,b.... What is this?

[PatrickG]

fwiw, I get from ...__data.js no JSON but something starting with window.__sveltekit_data = {function{a,b.... What is this?

It's devalue. That's the reason the file-extension has been changed to .js.

[Tal500]

I knew that this caching problem will occur not only in the context of legacy support in #6265!!

I had solved this issue by appending the local JS date value to the query, to force the caching to not happen, via:

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

Lines 1494 to 1503 in 2fad78d

	const time_arg = `__svelte_kit_legacy_time=${new Date().getTime()}`;
	const mark_idx = url.indexOf('?');
	if (mark_idx < 0) {
	url += '?' + time_arg;
	} else if (mark_idx === url.length - 1) {
	url += time_arg;
	} else {
	url += '&' + time_arg;
	}

I think that one possibility for disable caching, is by send some "no-cache" header on the HTTP respond by the kit server, and then Cloudflare or any other CDN will avoid caching this result.