Allow server-only load functions to return more than JSON

.changeset/tender-spiders-fail.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/adapter-netlify': patch
+'@sveltejs/adapter-vercel': patch
+'@sveltejs/kit': patch
+---
+
+Use devalue to serialize server-only `load` return values

documentation/docs/03-routing.md

@@ -106,7 +106,7 @@ export async function load({ params }) {
 }
 ```
 
-During client-side navigation, SvelteKit will load this data using `fetch`, which means that the returned value must be serializable as JSON.
+During client-side navigation, SvelteKit will load this data from the server, which means that the returned value must be serializable using [devalue](https://github.com/rich-harris/devalue).
 
 #### Actions
 

documentation/docs/05-load.md

@@ -4,7 +4,7 @@ title: Loading data
 
 A [`+page.svelte`](/docs/routing#page-page-svelte) or [`+layout.svelte`](/docs/routing#layout-layout-svelte) gets its `data` from a `load` function.
 
-If the `load` function is defined in `+page.js` or `+layout.js` it will run both on the server and in the browser. If it's instead defined in `+page.server.js` or `+layout.server.js` it will only run on the server, in which case it can (for example) make database calls and access private [environment variables](/docs/modules#$env-static-private), but can only return data that can be serialized as JSON. In both cases, the return value (if there is one) must be an object.
+If the `load` function is defined in `+page.js` or `+layout.js` it will run both on the server and in the browser. If it's instead defined in `+page.server.js` or `+layout.server.js` it will only run on the server, in which case it can (for example) make database calls and access private [environment variables](/docs/modules#$env-static-private), but can only return data that can be serialized with [devalue](https://github.com/rich-harris/devalue). In both cases, the return value (if there is one) must be an object.
 
 ```js
 /// file: src/routes/+page.js
@@ -256,7 +256,7 @@ export async function load({ setHeaders }) {
 
 ### Output
 
-The returned `data`, if any, must be an object of values. For a server-only `load` function, these values must be JSON-serializable. Top-level promises will be awaited, which makes it easy to return multiple promises without creating a waterfall:
+The returned `data`, if any, must be an object of values. For a server-only `load` function, these values must be serializable with [devalue](https://github.com/rich-harris/devalue). Top-level promises will be awaited, which makes it easy to return multiple promises without creating a waterfall:
 
 ```js
 // @filename: $types.d.ts

packages/adapter-netlify/index.js

@@ -211,7 +211,7 @@ async function generate_lambda_functions({ builder, publish, split, esm }) {
 					writeFileSync(`.netlify/functions-internal/${name}.js`, fn);
 
 					redirects.push(`${pattern} /.netlify/functions/${name} 200`);
-					redirects.push(`${pattern}/__data.json /.netlify/functions/${name} 200`);
+					redirects.push(`${pattern}/__data.js /.netlify/functions/${name} 200`);
 				}
 			};
 		});

packages/adapter-vercel/index.js

@@ -224,7 +224,7 @@ export default function ({ external = [], edge, split } = {}) {
 								sliced_pattern = '^/?';
 							}
 
-							const src = `${sliced_pattern}(?:/__data.json)?$`; // TODO adding /__data.json is a temporary workaround — those endpoints should be treated as distinct routes
+							const src = `${sliced_pattern}(?:/__data.js)?$`; // TODO adding /__data.js is a temporary workaround — those endpoints should be treated as distinct routes
 
 							await generate_function(route.id || 'index', src, entry.generateManifest);
 						}

packages/kit/package.json

@@ -12,7 +12,7 @@
 	"dependencies": {
 		"@sveltejs/vite-plugin-svelte": "^1.0.1",
 		"cookie": "^0.5.0",
-		"devalue": "^2.0.1",
+		"devalue": "^3.1.2",
 		"kleur": "^4.1.4",
 		"magic-string": "^0.26.2",
 		"mime": "^3.0.0",

packages/kit/src/core/constants.js → packages/kit/src/constants.js

@@ -3,3 +3,5 @@
 export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
 
 export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';
+
+export const DATA_SUFFIX = '/__data.js';

packages/kit/src/core/env.js

@@ -1,4 +1,4 @@
-import { GENERATED_COMMENT } from './constants.js';
+import { GENERATED_COMMENT } from '../constants.js';
 import { runtime_base } from './utils.js';
 
 /**

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

@@ -1,6 +1,6 @@
 import path from 'path';
 import { get_env } from '../../exports/vite/utils.js';
-import { GENERATED_COMMENT } from '../constants.js';
+import { GENERATED_COMMENT } from '../../constants.js';
 import { create_types } from '../env.js';
 import { write_if_changed } from './utils.js';
 

packages/kit/src/exports/vite/dev/index.js

@@ -8,7 +8,7 @@ import { installPolyfills } from '../../../exports/node/polyfills.js';
 import { coalesce_to_error } from '../../../utils/error.js';
 import { posixify } from '../../../utils/filesystem.js';
 import { load_template } from '../../../core/config/index.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import * as sync from '../../../core/sync/sync.js';
 import { get_mime_lookup, runtime_base, runtime_prefix } from '../../../core/utils.js';
 import { get_env, prevent_illegal_vite_imports, resolve_entry } from '../utils.js';

packages/kit/src/exports/vite/preview/index.js

@@ -4,7 +4,7 @@ import sirv from 'sirv';
 import { pathToFileURL } from 'url';
 import { getRequest, setResponse } from '../../../exports/node/index.js';
 import { installPolyfills } from '../../../exports/node/polyfills.js';
-import { SVELTE_KIT_ASSETS } from '../../../core/constants.js';
+import { SVELTE_KIT_ASSETS } from '../../../constants.js';
 import { loadEnv } from 'vite';
 
 /** @typedef {import('http').IncomingMessage} Req */

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

@@ -10,6 +10,7 @@ import Root from '__GENERATED__/root.svelte';
 import { nodes, dictionary, matchers } from '__GENERATED__/client-manifest.js';
 import { HttpError, Redirect } from '../control.js';
 import { stores } from './singletons.js';
+import { DATA_SUFFIX } from '../../constants.js';
 
 const SCROLL_KEY = 'sveltekit:scroll';
 const INDEX_KEY = 'sveltekit:index';
@@ -393,7 +394,7 @@ export function create_client({ target, base, trailing_slash }) {
 	 *   status: number;
 	 *   error: HttpError | Error | null;
 	 *   routeId: string | null;
-	 *   validation_errors?: string | undefined;
+	 *   validation_errors?: Record<string, any> | null;
 	 * }} opts
 	 */
 	async function get_navigation_result_from_branch({
@@ -700,24 +701,14 @@ export function create_client({ target, base, trailing_slash }) {
 
 		if (route.uses_server_data && invalid_server_nodes.some(Boolean)) {
 			try {
-				const res = await native_fetch(
-					`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
-					{
-						headers: {
-							'x-sveltekit-invalidated': invalid_server_nodes.map((x) => (x ? '1' : '')).join(',')
-						}
-					}
-				);
-
-				server_data = /** @type {import('types').ServerData} */ (await res.json());
-
-				if (!res.ok) {
-					throw server_data;
-				}
-			} catch (e) {
-				// something went catastrophically wrong — bail and defer to the server
-				native_navigation(url);
-				return;
+				server_data = await load_data(url, invalid_server_nodes);
+			} catch (error) {
+				return load_root_error_page({
+					status: 500,
+					error: /** @type {Error} */ (error),
+					url,
+					routeId: route.id
+				});
 			}
 
 			if (server_data.type === 'redirect') {
@@ -868,19 +859,18 @@ export function create_client({ target, base, trailing_slash }) {
 		if (node.server) {
 			// TODO post-https://github.com/sveltejs/kit/discussions/6124 we can use
 			// existing root layout data
-			const res = await native_fetch(
-				`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
-				{
-					headers: {
-						'x-sveltekit-invalidated': '1'
-					}
-				}
-			);
+			try {
+				const server_data = await load_data(url, [true]);
 
-			const server_data_nodes = await res.json();
-			server_data_node = server_data_nodes?.[0] ?? null;
+				if (
+					server_data.type !== 'data' ||
+					(server_data.nodes[0] && server_data.nodes[0].type !== 'data')
+				) {
+					throw 0;
+				}
 
-			if (!res.ok || server_data_nodes?.type !== 'data') {
+				server_data_node = server_data.nodes[0] ?? null;
+			} catch {
 				// at this point we have no choice but to fall back to the server
 				native_navigation(url);
 
@@ -1284,32 +1274,24 @@ export function create_client({ target, base, trailing_slash }) {
 			});
 		},
 
-		_hydrate: async ({ status, error, node_ids, params, routeId }) => {
+		_hydrate: async ({
+			status,
+			error: original_error, // TODO get rid of this
+			node_ids,
+			params,
+			routeId,
+			data: server_data_nodes,
+			errors: validation_errors
+		}) => {
 			const url = new URL(location.href);
 
 			/** @type {import('./types').NavigationFinished | undefined} */
 			let result;
 
 			try {
-				/**
-				 * @param {string} type
-				 * @param {any} fallback
-				 */
-				const parse = (type, fallback) => {
-					const script = document.querySelector(`script[sveltekit\\:data-type="${type}"]`);
-					return script?.textContent ? JSON.parse(script.textContent) : fallback;
-				};
-				/**
-				 * @type {Array<import('types').ServerDataNode | null>}
-				 * On initial navigation, this will only consist of data nodes or `null`.
-				 * A possible error is passed through the `error` property, in which case
-				 * the last entry of `node_ids` is an error page and the last entry of
-				 * `server_data_nodes` is `null`.
-				 */
-				const server_data_nodes = parse('server_data', []);
-				const validation_errors = parse('validation_errors', undefined);
-
 				const branch_promises = node_ids.map(async (n, i) => {
+					const server_data_node = server_data_nodes[i];
+
 					return load_node({
 						loader: nodes[n],
 						url,
@@ -1322,7 +1304,7 @@ export function create_client({ target, base, trailing_slash }) {
 							}
 							return data;
 						},
-						server_data_node: create_data_node(server_data_nodes[i])
+						server_data_node: create_data_node(server_data_node)
 					});
 				});
 
@@ -1331,13 +1313,15 @@ export function create_client({ target, base, trailing_slash }) {
 					params,
 					branch: await Promise.all(branch_promises),
 					status,
-					error: /** @type {import('../server/page/types').SerializedHttpError} */ (error)
+					error: /** @type {import('../server/page/types').SerializedHttpError} */ (original_error)
 						?.__is_http_error
 						? new HttpError(
-								/** @type {import('../server/page/types').SerializedHttpError} */ (error).status,
-								error.message
+								/** @type {import('../server/page/types').SerializedHttpError} */ (
+									original_error
+								).status,
+								original_error.message
 						  )
-						: error,
+						: original_error,
 					validation_errors,
 					routeId
 				});
@@ -1363,3 +1347,34 @@ export function create_client({ target, base, trailing_slash }) {
 		}
 	};
 }
+
+let data_id = 1;
+
+/**
+ * @param {URL} url
+ * @param {boolean[]} invalid
+ * @returns {Promise<import('types').ServerData>}
+ */
+async function load_data(url, invalid) {
+	const data_url = new URL(url);
+	data_url.pathname = url.pathname.replace(/\/$/, '') + DATA_SUFFIX;
+	data_url.searchParams.set('__invalid', invalid.map((x) => (x ? 'y' : 'n')).join(''));
+	data_url.searchParams.set('__id', String(data_id++));
+
+	// The __data.js file is generated by the server and looks like
+	// `window.__sveltekit_data = ${devalue(data)}`. We do this instead
+	// of `export const data` because modules are cached indefinitely,
+	// and that would cause memory leaks.
+	//
+	// The data is read and deleted in the same tick as the promise
+	// resolves, so it's not vulnerable to race conditions
+	await import(/* @vite-ignore */ data_url.href);
+
+	// @ts-expect-error
+	const server_data = window.__sveltekit_data;
+
+	// @ts-expect-error
+	delete window.__sveltekit_data;
+
+	return server_data;
+}

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

@@ -20,6 +20,8 @@ export { set_public_env } from '../env-public.js';
  *     node_ids: number[];
  *     params: Record<string, string>;
  *     routeId: string | null;
+ *     data: Array<import('types').ServerDataNode | null>;
+ *     errors: Record<string, any> | null;
  *   };
  * }} opts
  */

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

@@ -27,6 +27,8 @@ export interface Client {
 		node_ids: number[];
 		params: Record<string, string>;
 		routeId: string | null;
+		data: Array<import('types').ServerDataNode | null>;
+		errors: Record<string, any> | null;
 	}) => Promise<void>;
 	_start_router: () => void;
 }