fix: make prerender cache work, including in dev (#14860)

* fix: make prerender cache work

* populate cache on startup

* lint

Author: Rich-Harris

.changeset/tender-rings-hammer.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: make prerender cache work, including in development

packages/kit/src/core/sync/write_client_manifest.js

@@ -171,6 +171,7 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 			};
 
 			export const decoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.decode]));
+			export const encoders = Object.fromEntries(Object.entries(hooks.transport).map(([k, v]) => [k, v.encode]));
 
 			export const hash = ${s(kit.router.type === 'hash')};
 

packages/kit/src/runtime/client/remote-functions/prerender.svelte.js

@@ -1,4 +1,3 @@
-/** @import { RemoteFunctionResponse } from 'types' */
 import { app_dir, base } from '$app/paths/internal/client';
 import { version } from '__sveltekit/environment';
 import * as devalue from 'devalue';
@@ -7,12 +6,12 @@ import { app, remote_responses } from '../client.js';
 import { create_remote_function, remote_request } from './shared.svelte.js';
 
 // Initialize Cache API for prerender functions
-const CACHE_NAME = `sveltekit:${version}`;
+const CACHE_NAME = DEV ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
 /** @type {Cache | undefined} */
 let prerender_cache;
 
-void (async () => {
-	if (!DEV && typeof caches !== 'undefined') {
+const prerender_cache_ready = (async () => {
+	if (typeof caches !== 'undefined') {
 		try {
 			prerender_cache = await caches.open(CACHE_NAME);
 
@@ -111,53 +110,68 @@ class Prerender {
 	}
 }
 
+/**
+ * @param {string} url
+ * @param {string} encoded
+ */
+function put(url, encoded) {
+	return /** @type {Cache} */ (prerender_cache)
+		.put(
+			url,
+			// We need to create a new response because the original response is already consumed
+			new Response(encoded, {
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+		)
+		.catch(() => {
+			// Nothing we can do here
+		});
+}
+
 /**
  * @param {string} id
  */
 export function prerender(id) {
 	return create_remote_function(id, (cache_key, payload) => {
 		return new Prerender(async () => {
-			if (Object.hasOwn(remote_responses, cache_key)) {
-				return remote_responses[cache_key];
-			}
+			await prerender_cache_ready;
 
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
 
+			if (Object.hasOwn(remote_responses, cache_key)) {
+				const data = remote_responses[cache_key];
+
+				if (prerender_cache) {
+					void put(url, devalue.stringify(data, app.encoders));
+				}
+
+				return data;
+			}
+
 			// Check the Cache API first
 			if (prerender_cache) {
 				try {
 					const cached_response = await prerender_cache.match(url);
+
 					if (cached_response) {
-						const cached_result = /** @type { RemoteFunctionResponse & { type: 'result' } } */ (
-							await cached_response.json()
-						);
-						return devalue.parse(cached_result.result, app.decoders);
+						const cached_result = await cached_response.text();
+						return devalue.parse(cached_result, app.decoders);
 					}
 				} catch {
 					// Nothing we can do here
 				}
 			}
 
-			const result = await remote_request(url);
+			const encoded = await remote_request(url);
 
 			// For successful prerender requests, save to cache
 			if (prerender_cache) {
-				try {
-					await prerender_cache.put(
-						url,
-						// We need to create a new response because the original response is already consumed
-						new Response(JSON.stringify(result), {
-							headers: {
-								'Content-Type': 'application/json'
-							}
-						})
-					);
-				} catch {
-					// Nothing we can do here
-				}
+				void put(url, encoded);
 			}
 
-			return result;
+			return devalue.parse(encoded, app.decoders);
 		});
 	});
 }

packages/kit/src/runtime/client/remote-functions/query.svelte.js

@@ -31,7 +31,8 @@ export function query(id) {
 
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
 
-			return await remote_request(url);
+			const result = await remote_request(url);
+			return devalue.parse(result, app.decoders);
 		});
 	});
 }

packages/kit/src/runtime/client/remote-functions/shared.svelte.js

@@ -37,7 +37,7 @@ export async function remote_request(url) {
 		throw new HttpError(result.status ?? 500, result.error);
 	}
 
-	return devalue.parse(result.result, app.decoders);
+	return result.result;
 }
 
 /**

packages/kit/src/runtime/client/types.d.ts

@@ -50,6 +50,7 @@ export interface SvelteKitApp {
 	decode: (type: string, value: any) => any;
 
 	decoders: Record<string, (data: any) => any>;
+	encoders: Record<string, (data: any) => any>;
 
 	/**
 	 * Whether or not we're using hash-based routing