fix: dedupe remote data (#15991)

I thought that sveltejs/svelte#18406 would be
necessary to do this, but I was wrong — it actually seems easier and
simpler to bypass `hydratable` altogether. Instead, we serialize all the
remote data in one go, allowing devalue to do its thing and deduplicate
everything. (I still think it's worth merging that PR.)

That way, if you have (for example) a `getUser(): Promise<User | null>`
and a `requireUser(): Promise<User>` that calls `getUser` internally
(and redirects if it returns `null`), the `User` object is only
serialized once.

I can't remember exactly why we chose to use `hydratable` in the first
place. Perhaps it was a lifecycle thing — we wanted to be careful about
data being stale by the time it was read? In which case I think that has
changed now that query lifecycle is determined by the garbage collector.
Maybe @elliott-with-the-longest-name-on-github remembers.

---

### Please don't delete this checklist! Before submitting the PR, please
make sure you do the following:
- [ ] It's really useful if your PR references an issue where it is
discussed ahead of time. In many cases, features are absent for a
reason. For large changes, please create an RFC:
https://github.com/sveltejs/rfcs
- [x] This message body should clearly illustrate what problems it
solves.
- [x] Ideally, include a test that fails without this PR but passes with
it.

### Tests
- [ ] Run the tests with `pnpm test` and lint the project with `pnpm
lint` and `pnpm check`

### Changesets
- [x] If your PR makes a change that should be noted in one or more
packages' changelogs, generate a changeset by running `pnpm changeset`
and following the prompts. Changesets that add features should be
`minor` and those that fix bugs should be `patch`. Please prefix
changeset messages with `feat:`, `fix:`, or `chore:`.

### Edits

- [x] Please ensure that 'Allow edits from maintainers' is checked. PRs
without this option may be closed.

---------

Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: Elliott Johnson <hello@ell.iott.dev>

Author: 3 people

.changeset/sad-frogs-wink.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: dedupe remote data

packages/kit/src/core/postbuild/prerender.js

@@ -204,6 +204,8 @@ async function prerender({ hash, out, manifest_path, metadata, verbose, env }) {
 
 	const seen = new Set();
 	const written = new Set();
+
+	/** @type {Map<string, Promise<any>>} */
 	const remote_responses = new Map();
 
 	/** @type {Map<string, Set<string>>} */

packages/kit/src/runtime/app/server/remote/command.js

@@ -77,9 +77,6 @@ export function command(validate_or_fn, maybe_fn) {
 			);
 		}
 
-		state.remote.refreshes ??= new Map();
-		state.remote.reconnects ??= new Map();
-
 		const promise = Promise.resolve(
 			run_remote_function(event, state, true, () => validate(arg), fn)
 		);

packages/kit/src/runtime/app/server/remote/form.js

@@ -11,7 +11,7 @@ import {
 	normalize_issue,
 	flatten_issues
 } from '../../../form-utils.js';
-import { get_cache, run_remote_function } from './shared.js';
+import { get_cache, get_implicit_lookup, run_remote_function } from './shared.js';
 import { ValidationError } from '@sveltejs/kit/internal';
 
 /**
@@ -136,9 +136,6 @@ export function form(validate_or_fn, maybe_fn) {
 						data = validated.value;
 					}
 
-					state.remote.refreshes ??= new Map();
-					state.remote.reconnects ??= new Map();
-
 					const issue = create_issues();
 
 					try {
@@ -161,7 +158,12 @@ export function form(validate_or_fn, maybe_fn) {
 				// We don't need to care about args or deduplicating calls, because uneval results are only relevant in full page reloads
 				// where only one form submission is active at the same time
 				if (!event.isRemoteRequest) {
-					get_cache(__, state)[''] ??= { serialize: true, data: output };
+					const cache = get_cache(__, state);
+					cache[''] ??= output;
+
+					// register under the client-side action id so the output is serialized
+					// into the page, allowing the hydrated client to restore `result`/`issues`/`input`
+					get_implicit_lookup(__, state)[__.action_id ?? __.id] = () => cache[''];
 				}
 
 				return output;
@@ -177,28 +179,30 @@ export function form(validate_or_fn, maybe_fn) {
 
 		Object.defineProperty(instance, 'fields', {
 			get() {
+				// the form instance is created once per module and shared across requests,
+				// so the current request's state has to be resolved at access time
 				return create_field_proxy(
 					{},
-					() => get_cache(__)?.['']?.data?.input ?? {},
+					() => get_cache(__, get_request_store().state)?.['']?.input ?? {},
 					(path, value) => {
-						const cache = get_cache(__);
+						const cache = get_cache(__, get_request_store().state);
 						const entry = cache[''];
 
-						if (entry?.data?.submission) {
+						if (entry?.submission) {
 							// don't override a submission
 							return;
 						}
 
 						if (path.length === 0) {
-							(cache[''] ??= { serialize: true, data: {} }).data.input = value;
+							(cache[''] ??= {}).input = value;
 							return;
 						}
 
-						const input = entry?.data?.input ?? {};
+						const input = entry?.input ?? {};
 						deep_set(input, path.map(String), value);
-						(cache[''] ??= { serialize: true, data: {} }).data.input = input;
+						(cache[''] ??= {}).input = input;
 					},
-					() => flatten_issues(get_cache(__)?.['']?.data?.issues ?? [])
+					() => flatten_issues(get_cache(__, get_request_store().state)?.['']?.issues ?? [])
 				);
 			}
 		});
@@ -220,7 +224,7 @@ export function form(validate_or_fn, maybe_fn) {
 		Object.defineProperty(instance, 'result', {
 			get() {
 				try {
-					return get_cache(__)?.['']?.data?.result;
+					return get_cache(__, get_request_store().state)?.['']?.result;
 				} catch {
 					return undefined;
 				}
@@ -264,6 +268,7 @@ export function form(validate_or_fn, maybe_fn) {
 					if (!instance) {
 						instance = create_instance(key);
 						instance.__.id = `${__.id}/${encodeURIComponent(JSON.stringify(key))}`;
+						instance.__.action_id = `${__.id}/${JSON.stringify(key)}`;
 						instance.__.name = __.name;
 
 						state.remote.forms.set(cache_key, instance);

packages/kit/src/runtime/app/server/remote/prerender.js

@@ -1,15 +1,14 @@
 /** @import { RemoteResource, RemotePrerenderFunction } from '@sveltejs/kit' */
 /** @import { RemotePrerenderInputsGenerator, RemotePrerenderInternals, MaybePromise } from 'types' */
 /** @import { StandardSchemaV1 } from '@standard-schema/spec' */
-import { error, json } from '@sveltejs/kit';
+import { json, error } from '@sveltejs/kit';
 import { DEV } from 'esm-env';
 import { get_request_store } from '@sveltejs/kit/internal/server';
 import { stringify, stringify_remote_arg } from '../../../shared.js';
 import { noop } from '../../../../utils/functions.js';
 import { app_dir, base } from '$app/paths/internal/server';
 import {
 	create_validator,
-	get_cache,
 	get_response,
 	parse_remote_response,
 	run_remote_function
@@ -89,51 +88,46 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 
 	/** @type {RemotePrerenderFunction<Input, Output> & { __: RemotePrerenderInternals }} */
 	const wrapper = (arg) => {
+		const { event, state } = get_request_store();
+		const payload = stringify_remote_arg(arg, state.transport);
+
+		// `get_response` (as opposed to bare `get_cache`) also registers the call in the
+		// implicit lookup, so that the result is inlined into the page payload (`data.p`)
+		// and the client doesn't need to fetch it again upon hydration
 		/** @type {Promise<Output> & Partial<RemoteResource<Output>>} */
-		const promise = (async () => {
-			const { event, state } = get_request_store();
-			const payload = stringify_remote_arg(arg, state.transport);
+		const promise = get_response(__, payload, state, async () => {
 			const id = __.id;
 			const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
 
 			if (!state.prerendering && !DEV && !event.isRemoteRequest) {
 				try {
-					return await get_response(__, payload, state, async () => {
-						const cache = get_cache(__, state);
-
-						// TODO adapters can provide prerendered data more efficiently than
-						// fetching from the public internet
-						const promise = (cache[payload] ??= {
-							serialize: true,
-							data: fetch(new URL(url, event.url.origin).href).then(async (response) => {
-								if (!response.ok) {
-									throw new Error('Prerendered response not found');
-								}
-
-								const prerendered = await response.json();
-
-								if (prerendered.type === 'error') {
-									error(prerendered.status, prerendered.error);
-								}
-
-								return prerendered.result;
-							})
-						}).data;
-
-						return parse_remote_response(await promise, state.transport);
-					});
+					// TODO adapters can provide prerendered data more efficiently than
+					// fetching from the public internet
+					const response = await fetch(new URL(url, event.url.origin).href);
+
+					if (!response.ok) {
+						throw new Error('Prerendered response not found');
+					}
+
+					const prerendered = /** @type {RemoteFunctionResponse} */ await response.json();
+
+					if (prerendered.type === 'error') {
+						error(prerendered.status, prerendered.error);
+					}
+
+					return parse_remote_response(prerendered.data, state.transport)._;
 				} catch {
 					// not available prerendered, fallback to normal function
 				}
 			}
 
+			// during a prerender run, the same function might be invoked while rendering
+			// multiple pages — share the result across the entire run
 			if (state.prerendering?.remote_responses.has(url)) {
 				return /** @type {Promise<any>} */ (state.prerendering.remote_responses.get(url));
 			}
 
-			const promise = get_response(__, payload, state, () =>
-				run_remote_function(event, state, false, () => validate(arg), fn)
-			);
+			const promise = run_remote_function(event, state, false, () => validate(arg), fn);
 
 			if (state.prerendering) {
 				state.prerendering.remote_responses.set(url, promise);
@@ -142,7 +136,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 			const result = await promise;
 
 			if (state.prerendering) {
-				const body = { type: 'result', result: stringify(result, state.transport) };
+				const body = { type: 'result', data: stringify({ _: result }, state.transport) };
 				state.prerendering.dependencies.set(url, {
 					body: JSON.stringify(body),
 					response: json(body)
@@ -151,7 +145,7 @@ export function prerender(validate_or_fn, fn_or_options, maybe_options) {
 
 			// TODO this is missing error/loading/current/status
 			return result;
-		})();
+		});
 
 		promise.catch(noop);