diff --git a/.changeset/rude-tomatoes-thank.md b/.changeset/rude-tomatoes-thank.md
new file mode 100644
index 000000000000..3185b3851b65
--- /dev/null
+++ b/.changeset/rude-tomatoes-thank.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Allow non-root \$error.svelte components
diff --git a/documentation/docs/02-layouts.md b/documentation/docs/02-layouts.md
index 36a06a7bd0e3..84b653c62247 100644
--- a/documentation/docs/02-layouts.md
+++ b/documentation/docs/02-layouts.md
@@ -62,17 +62,32 @@ We can create a layout that only applies to pages below `/settings` (while inher
 <slot></slot>
 ```
 
-
 ### Error pages
 
-If your page fails to load (see [Loading](#loading)), SvelteKit will render an error page. You can customise this page by creating a file called `src/routes/$error.svelte`, which is a component that receives an `error` prop alongside a `status` code:
+If a page fails to load (see [Loading](#loading)), SvelteKit will render an error page. You can customise this page by creating `$error.svelte` components alongside your layout and page components.
+
+For example, if `src/routes/settings/notifications/index.svelte` failed to load, SvelteKit would render `src/routes/settings/notifications/$error.svelte` in the same layout, if it existed. If not, it would render `src/routes/settings/$error.svelte` in the parent layout, or `src/routes/$error.svelte` in the root layout.
+
+> SvelteKit provides a default error page in case you don't supply `src/routes/$error.svelte`, but it's recommend that you bring your own.
+
+If an error component has a [`load`](#loading) function, it will be called with `error` and `status` properties:
 
 ```html
+<script context="module">
+	export function load({ error, status }) {
+		return {
+			props: {
+				title: `${status}: ${error.message}`
+			}
+		};
+	}
+</script>
+
 <script>
-	export let status;
-	export let error;
+	export let title;
 </script>
 
-<h1>{status}</h1>
-<p>{error.message}</p>
-```
\ No newline at end of file
+<h1>{title}</h1>
+```
+
+> Server-side stack traces will be removed from `error` in production, to avoid exposing privileged information to users.
diff --git a/packages/kit/src/core/build/index.js b/packages/kit/src/core/build/index.js
index 23980c2da5a8..9a69c8cb8467 100644
--- a/packages/kit/src/core/build/index.js
+++ b/packages/kit/src/core/build/index.js
@@ -281,7 +281,8 @@ async function build_server(
 									type: 'page',
 									pattern: ${route.pattern},
 									params: ${params},
-									parts: [${route.parts.map(file => s(file)).join(', ')}]
+									a: [${route.a.map(file => file && s(file)).join(', ')}],
+									b: [${route.b.map(file => file && s(file)).join(', ')}]
 								}`;
 					} else {
 						const params = get_params(route.params);
diff --git a/packages/kit/src/core/create_app/index.js b/packages/kit/src/core/create_app/index.js
index acc9188b8893..cd361da5b339 100644
--- a/packages/kit/src/core/create_app/index.js
+++ b/packages/kit/src/core/create_app/index.js
@@ -65,6 +65,10 @@ function generate_client_manifest(manifest_data, base) {
 			.join(',\n\t\t\t\t')}
 	]`.replace(/^\t/gm, '');
 
+	/** @param {string[]} parts */
+	const get_indices = (parts) =>
+		`[${parts.map((part) => (part ? `c[${component_indexes[part]}]` : '')).join(', ')}]`;
+
 	const routes = `[
 		${manifest_data.routes
 			.map((route) => {
@@ -81,15 +85,10 @@ function generate_client_manifest(manifest_data, base) {
 								.join(', ') +
 							'})';
 
-					const tuple = [
-						route.pattern,
-						`[${route.parts.map((part) => `components[${component_indexes[part]}]`).join(', ')}]`,
-						params
-					]
-						.filter(Boolean)
-						.join(', ');
+					const tuple = [route.pattern, get_indices(route.a), get_indices(route.b)];
+					if (params) tuple.push(params);
 
-					return `// ${route.parts[route.parts.length - 1]}\n\t\t[${tuple}]`;
+					return `// ${route.a[route.a.length - 1]}\n\t\t[${tuple.join(', ')}]`;
 				} else {
 					return `// ${route.file}\n\t\t[${route.pattern}]`;
 				}
@@ -98,13 +97,13 @@ function generate_client_manifest(manifest_data, base) {
 	]`.replace(/^\t/gm, '');
 
 	return trim(`
-		const components = ${components};
+		const c = ${components};
 
 		const d = decodeURIComponent;
 
 		export const routes = ${routes};
 
-		export const fallback = [components[0](), components[1]()];
+		export const fallback = [c[0](), c[1]()];
 	`);
 }
 
@@ -117,7 +116,7 @@ function generate_app(manifest_data, base) {
 
 	const max_depth = Math.max(
 		...manifest_data.routes.map((route) =>
-			route.type === 'page' ? route.parts.filter(Boolean).length : 0
+			route.type === 'page' ? route.a.filter(Boolean).length : 0
 		)
 	);
 
@@ -132,9 +131,7 @@ function generate_app(manifest_data, base) {
 
 	while (l--) {
 		pyramid = `
-			<svelte:component this={components[${l}]} {...(props_${l} || {})}${
-			l === 1 ? ' {status} {error}' : '' // TODO this is awkward
-		}>
+			<svelte:component this={components[${l}]} {...(props_${l} || {})}>
 				{#if components[${l + 1}]}
 					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
 				{/if}
@@ -149,10 +146,6 @@ function generate_app(manifest_data, base) {
 		<script>
 			import { setContext, afterUpdate, onMount } from 'svelte';
 
-			// error handling
-			export let status = undefined;
-			export let error = undefined;
-
 			// stores
 			export let stores;
 			export let page;
diff --git a/packages/kit/src/core/create_manifest_data/index.js b/packages/kit/src/core/create_manifest_data/index.js
index 887576e4e5dc..16b953476fa4 100644
--- a/packages/kit/src/core/create_manifest_data/index.js
+++ b/packages/kit/src/core/create_manifest_data/index.js
@@ -50,9 +50,10 @@ export default function create_manifest_data({ config, output, cwd = process.cwd
 	 * @param {string} dir
 	 * @param {Part[][]} parent_segments
 	 * @param {string[]} parent_params
-	 * @param {string[]} stack
+	 * @param {string[]} layout_stack // accumulated $layout.svelte components
+	 * @param {string[]} error_stack // accumulated $error.svelte components
 	 */
-	function walk(dir, parent_segments, parent_params, stack) {
+	function walk(dir, parent_segments, parent_params, layout_stack, error_stack) {
 		/** @type {Item[]} */
 		const items = fs
 			.readdirSync(dir)
@@ -138,31 +139,48 @@ export default function create_manifest_data({ config, output, cwd = process.cwd
 			params.push(...item.parts.filter((p) => p.dynamic).map((p) => p.content));
 
 			if (item.is_dir) {
-				const component = find_layout('$layout', item.file);
+				const layout = find_layout('$layout', item.file);
+				const error = find_layout('$error', item.file);
 
-				if (component) components.push(component);
+				if (layout) components.push(layout);
+				if (error) components.push(error);
 
 				walk(
 					path.join(dir, item.basename),
 					segments,
 					params,
-					component ? stack.concat(component) : stack
+					layout_stack.concat(layout),
+					error_stack.concat(error)
 				);
 			} else if (item.is_page) {
 				components.push(item.file);
 
-				const parts =
-					item.is_index && stack[stack.length - 1] === null
-						? stack.slice(0, -1).concat(item.file)
-						: stack.concat(item.file);
+				const a = layout_stack.concat(item.file);
+				const b = error_stack;
 
 				const pattern = get_pattern(segments, true);
 
+				let i = a.length;
+				while (i--) {
+					if (!b[i] && !a[i]) {
+						b.splice(i, 1);
+						a.splice(i, 1);
+					}
+				}
+
+				i = b.length;
+				while (i--) {
+					if (b[i]) break;
+				}
+
+				b.splice(i + 1);
+
 				routes.push({
 					type: 'page',
 					pattern,
 					params,
-					parts
+					a,
+					b
 				});
 			} else {
 				const pattern = get_pattern(segments, !item.route_suffix);
@@ -184,7 +202,7 @@ export default function create_manifest_data({ config, output, cwd = process.cwd
 
 	components.push(layout, error);
 
-	walk(config.kit.files.routes, [], [], [layout]);
+	walk(config.kit.files.routes, [], [], [layout], [error]);
 
 	const assets_dir = config.kit.files.assets;
 
diff --git a/packages/kit/src/core/create_manifest_data/index.spec.js b/packages/kit/src/core/create_manifest_data/index.spec.js
index b3d2f0e09208..ec87e838d73f 100644
--- a/packages/kit/src/core/create_manifest_data/index.spec.js
+++ b/packages/kit/src/core/create_manifest_data/index.spec.js
@@ -47,14 +47,16 @@ test('creates routes', () => {
 			type: 'page',
 			pattern: /^\/$/,
 			params: [],
-			parts: [layout, index]
+			a: [layout, index],
+			b: [error]
 		},
 
 		{
 			type: 'page',
 			pattern: /^\/about\/?$/,
 			params: [],
-			parts: [layout, about]
+			a: [layout, about],
+			b: [error]
 		},
 
 		{
@@ -68,7 +70,8 @@ test('creates routes', () => {
 			type: 'page',
 			pattern: /^\/blog\/?$/,
 			params: [],
-			parts: [layout, blog]
+			a: [layout, blog],
+			b: [error]
 		},
 
 		{
@@ -82,7 +85,8 @@ test('creates routes', () => {
 			type: 'page',
 			pattern: /^\/blog\/([^/]+?)\/?$/,
 			params: ['slug'],
-			parts: [layout, blog_$slug]
+			a: [layout, blog_$slug],
+			b: [error]
 		}
 	]);
 });
@@ -103,14 +107,16 @@ test('creates routes with layout', () => {
 			type: 'page',
 			pattern: /^\/$/,
 			params: [],
-			parts: [layout, index]
+			a: [layout, index],
+			b: [error]
 		},
 
 		{
 			type: 'page',
 			pattern: /^\/foo\/?$/,
 			params: [],
-			parts: [layout, foo_$layout, foo]
+			a: [layout, foo_$layout, foo],
+			b: [error]
 		}
 	]);
 });
@@ -146,7 +152,7 @@ test('sorts routes correctly', () => {
 	const { routes } = create('samples/sorting');
 
 	assert.equal(
-		routes.map((p) => (p.type === 'page' ? p.parts : p.file)),
+		routes.map((p) => (p.type === 'page' ? p.a : p.file)),
 		[
 			[layout, 'samples/sorting/index.svelte'],
 			[layout, 'samples/sorting/about.svelte'],
@@ -254,14 +260,16 @@ test('works with custom extensions', () => {
 			type: 'page',
 			pattern: /^\/$/,
 			params: [],
-			parts: [layout, index]
+			a: [layout, index],
+			b: [error]
 		},
 
 		{
 			type: 'page',
 			pattern: /^\/about\/?$/,
 			params: [],
-			parts: [layout, about]
+			a: [layout, about],
+			b: [error]
 		},
 
 		{
@@ -275,7 +283,8 @@ test('works with custom extensions', () => {
 			type: 'page',
 			pattern: /^\/blog\/?$/,
 			params: [],
-			parts: [layout, blog]
+			a: [layout, blog],
+			b: [error]
 		},
 
 		{
@@ -289,7 +298,8 @@ test('works with custom extensions', () => {
 			type: 'page',
 			pattern: /^\/blog\/([^/]+?)\/?$/,
 			params: ['slug'],
-			parts: [layout, blog_$slug]
+			a: [layout, blog_$slug],
+			b: [error]
 		}
 	]);
 });
@@ -311,4 +321,29 @@ test('lists static assets', () => {
 	]);
 });
 
+test('includes nested error components', () => {
+	const { routes } = create('samples/nested-errors');
+
+	assert.equal(routes, [
+		{
+			type: 'page',
+			pattern: /^\/foo\/bar\/baz\/?$/,
+			params: [],
+			a: [
+				layout,
+				'samples/nested-errors/foo/$layout.svelte',
+				undefined,
+				'samples/nested-errors/foo/bar/baz/$layout.svelte',
+				'samples/nested-errors/foo/bar/baz/index.svelte'
+			],
+			b: [
+				error,
+				undefined,
+				'samples/nested-errors/foo/bar/$error.svelte',
+				'samples/nested-errors/foo/bar/baz/$error.svelte'
+			]
+		}
+	]);
+});
+
 test.run();
diff --git a/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/$layout.svelte b/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/$layout.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/$error.svelte b/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/$error.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/$error.svelte b/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/$error.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/$layout.svelte b/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/$layout.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/index.svelte b/packages/kit/src/core/create_manifest_data/test/samples/nested-errors/foo/bar/baz/index.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/packages/kit/src/core/dev/index.js b/packages/kit/src/core/dev/index.js
index c8e3469dc53a..e6b3a7fd61c8 100644
--- a/packages/kit/src/core/dev/index.js
+++ b/packages/kit/src/core/dev/index.js
@@ -263,14 +263,12 @@ class Watcher extends EventEmitter {
 								handle: hooks.handle || ((request, render) => render(request))
 							},
 							only_render_prerenderable_pages: false,
-							// get_component_path: (id) => `/${id}?import`,
 							get_stack: (error) => {
 								this.vite.ssrFixStacktrace(error);
 								return error.stack;
 							},
 							get_static_file: (file) =>
 								fs.readFileSync(path.join(this.config.kit.files.assets, file)),
-							// get_amp_css: (url) => '', // TODO: implement this
 							ssr: this.config.kit.ssr,
 							router: this.config.kit.router,
 							hydrate: this.config.kit.hydrate
@@ -316,7 +314,8 @@ class Watcher extends EventEmitter {
 						type: 'page',
 						pattern: route.pattern,
 						params: get_params(route.params),
-						parts: route.parts
+						a: route.a,
+						b: route.b
 					};
 				}
 
diff --git a/packages/kit/src/runtime/client/renderer.js b/packages/kit/src/runtime/client/renderer.js
index 0fa81d3de85c..1bb6c8767eef 100644
--- a/packages/kit/src/runtime/client/renderer.js
+++ b/packages/kit/src/runtime/client/renderer.js
@@ -68,16 +68,17 @@ export class Renderer {
 
 		this.started = false;
 
+		this.session_id = 1;
+
 		/** @type {import('./types').NavigationState} */
 		this.current = {
 			page: null,
-			query: null,
-			session_changed: false,
-			nodes: [],
-			contexts: []
+			session_id: null,
+			branch: []
 		};
 
-		this.caches = new Map();
+		/** @type {Map<string, import('./types').NavigationResult>} */
+		this.cache = new Map();
 
 		this.loading = {
 			id: null,
@@ -99,7 +100,7 @@ export class Renderer {
 			this.$session = value;
 
 			if (!ready) return;
-			this.current.session_changed = true;
+			this.session_id += 1;
 
 			const info = this.router.parse(new URL(location.href));
 			this.update(info, []);
@@ -108,10 +109,73 @@ export class Renderer {
 	}
 
 	/**
-	 * @param {import('./types').NavigationCandidate} selected
+	 * @param {{
+	 *   status: number;
+	 *   error: Error;
+	 *   nodes: Array<Promise<CSRComponent>>;
+	 *   page: import('types').Page;
+	 * }} selected
 	 */
-	async start(selected) {
-		const result = await this._load(selected);
+	async start({ status, error, nodes, page }) {
+		/** @type {import('./types').BranchNode[]} */
+		const branch = [];
+
+		/** @type {Record<string, any>} */
+		let context = {};
+
+		/** @type {import('./types').NavigationResult} */
+		let result;
+
+		/** @type {number} */
+		let new_status;
+
+		/** @type {Error} new_error */
+		let new_error;
+
+		try {
+			for (let i = 0; i < nodes.length; i += 1) {
+				const is_leaf = i === nodes.length - 1;
+
+				const node = await this._load_node({
+					module: await nodes[i],
+					page,
+					context,
+					status: is_leaf && status,
+					error: is_leaf && error
+				});
+
+				branch.push(node);
+
+				if (node && node.loaded) {
+					if (node.loaded.error) {
+						if (error) throw node.loaded.error;
+						new_status = node.loaded.status;
+						new_error = node.loaded.error;
+					} else if (node.loaded.context) {
+						context = {
+							...context,
+							...node.loaded.context
+						};
+					}
+				}
+			}
+
+			result = await this._get_navigation_result_from_branch({ page, branch });
+		} catch (e) {
+			if (error) throw e;
+
+			new_status = 500;
+			new_error = e;
+		}
+
+		if (new_error) {
+			result = await this._load_error({
+				status: new_status,
+				error: new_error,
+				path: page.path,
+				query: page.query
+			});
+		}
 
 		if (result.redirect) {
 			// this is a real edge case — `load` would need to return
@@ -152,36 +216,14 @@ export class Renderer {
 		// abort if user navigated during update
 		if (token !== this.token) return;
 
-		if (navigation_result.reload) {
-			location.reload();
-		} else if (navigation_result.redirect) {
+		if (navigation_result.redirect) {
 			if (chain.length > 10 || chain.includes(info.path)) {
-				// TODO this is a lil hacky. investigate why we can't
-				// just use this._load_error(...)
-				const layout = await this.fallback[0];
-				const error = await this.fallback[1];
-
-				const props = {
+				navigation_result = await this._load_error({
 					status: 500,
 					error: new Error('Redirect loop'),
-					components: [layout.default, error.default]
-				};
-
-				this.root.$set(props);
-
-				navigation_result = {
-					state: {
-						page: null,
-						query: null,
-						session_changed: false,
-						nodes: [
-							{ module: layout, uses: null },
-							{ module: error, uses: null }
-						],
-						contexts: []
-					},
-					props
-				};
+					path: info.path,
+					query: info.query
+				});
 			} else {
 				if (this.router) {
 					this.router.goto(navigation_result.redirect, { replaceState: true }, [
@@ -194,6 +236,10 @@ export class Renderer {
 
 				return;
 			}
+		}
+
+		if (navigation_result.reload) {
+			location.reload();
 		} else if (this.started) {
 			this.current = navigation_result.state;
 
@@ -209,8 +255,8 @@ export class Renderer {
 		this.loading.promise = null;
 		this.loading.id = null;
 
-		const leaf_node = navigation_result.state.nodes[navigation_result.state.nodes.length - 1];
-		if (leaf_node.module.router === false) {
+		const leaf_node = navigation_result.state.branch[navigation_result.state.branch.length - 1];
+		if (leaf_node && leaf_node.module.router === false) {
 			this.router.disable();
 		} else {
 			this.router.enable();
@@ -228,6 +274,25 @@ export class Renderer {
 		return this.loading.promise;
 	}
 
+	/** @param {import('./types').NavigationResult} result */
+	_init(result) {
+		this.current = result.state;
+
+		const style = document.querySelector('style[data-svelte]');
+		if (style) style.remove();
+
+		this.root = new this.Root({
+			target: this.target,
+			props: {
+				stores: this.stores,
+				...result.props
+			},
+			hydrate: true
+		});
+
+		this.started = true;
+	}
+
 	/**
 	 * @param {import('./types').NavigationInfo} info
 	 * @returns {Promise<import('./types').NavigationResult>}
@@ -239,7 +304,6 @@ export class Renderer {
 
 		for (let i = 0; i < info.routes.length; i += 1) {
 			const route = info.routes[i];
-			const [pattern, parts, params] = route;
 
 			if (route.length === 1) {
 				return { reload: true };
@@ -250,7 +314,7 @@ export class Renderer {
 			let j = i + 1;
 			while (j < info.routes.length) {
 				const next = info.routes[j];
-				if (next[0].toString() === pattern.toString()) {
+				if (next[0].toString() === route[0].toString()) {
 					if (next.length !== 1) next[1].forEach((loader) => loader());
 					j += 1;
 				} else {
@@ -258,15 +322,7 @@ export class Renderer {
 				}
 			}
 
-			const nodes = parts.map((loader) => loader());
-			const page = {
-				host: this.host,
-				path: info.path,
-				params: params ? params(route[0].exec(info.path)) : {},
-				query: info.query
-			};
-
-			const result = await this._load({ status: 200, error: null, nodes, page });
+			const result = await this._load({ route, path: info.path, query: info.query });
 			if (result) return result;
 		}
 
@@ -278,260 +334,301 @@ export class Renderer {
 		});
 	}
 
-	/** @param {import('./types').NavigationResult} result */
-	_init(result) {
-		this.current = result.state;
-
-		const style = document.querySelector('style[data-svelte]');
-		if (style) style.remove();
-
-		this.root = new this.Root({
-			target: this.target,
-			props: {
-				stores: this.stores,
-				...result.props
-			},
-			hydrate: true
-		});
-
-		this.started = true;
-	}
-
 	/**
-	 * @param {import('./types').NavigationCandidate} selected
-	 * @returns {Promise<import('./types').NavigationResult>}
+	 *
+	 * @param {{
+	 *   page: import('types').Page;
+	 *   branch: import('./types').BranchNode[]
+	 * }} opts
 	 */
-	async _load({ status, error, nodes, page }) {
-		const query = page.query.toString();
+	async _get_navigation_result_from_branch({ page, branch }) {
+		const filtered = branch.filter(Boolean);
 
 		/** @type {import('./types').NavigationResult} */
 		const result = {
 			state: {
 				page,
-				query,
-				session_changed: false,
-				nodes: [],
-				contexts: []
+				branch,
+				session_id: this.session_id
 			},
 			props: {
-				status,
-				error,
-
-				/** @type {CSRComponent[]} */
-				components: []
+				components: filtered.map((node) => node.module.default)
 			}
 		};
 
-		const changed = {
-			path: !this.current.page || page.path !== this.current.page.path,
-			params: Object.keys(page.params).filter((key) => {
-				return !this.current.page || this.current.page.params[key] !== page.params[key];
-			}),
-			query: query !== this.current.query,
-			session: this.current.session_changed,
-			context: false
-		};
-
-		try {
-			const component_promises = nodes; // TODO redundant
-			const props_promises = [];
+		for (let i = 0; i < filtered.length; i += 1) {
+			if (filtered[i].loaded) result.props[`props_${i}`] = await filtered[i].loaded.props;
+		}
 
-			/** @type {Record<string, any>} */
-			let context;
+		if (
+			!this.current.page ||
+			page.path !== this.current.page.path ||
+			page.query.toString() !== this.current.page.query.toString()
+		) {
+			result.props.page = page;
+		}
 
-			for (let i = 0; i < component_promises.length; i += 1) {
-				const previous = this.current.nodes[i];
-				const previous_context = this.current.contexts[i];
+		const leaf = filtered[filtered.length - 1];
+		const maxage = leaf.loaded && leaf.loaded.maxage;
 
-				const module = await component_promises[i];
-				result.props.components[i] = module.default;
+		if (maxage) {
+			const hash = `${page.path}?${page.query}`;
+			let ready = false;
 
-				if (module.preload) {
-					throw new Error(
-						'preload has been deprecated in favour of load. Please consult the documentation: https://kit.svelte.dev/docs#loading'
-					);
+			const clear = () => {
+				if (this.cache.get(hash) === result) {
+					this.cache.delete(hash);
 				}
 
-				const changed_since_last_render =
-					!previous ||
-					module !== previous.module ||
-					(changed.path && previous.uses.path) ||
-					changed.params.some((param) => previous.uses.params.has(param)) ||
-					(changed.query && previous.uses.query) ||
-					(changed.session && previous.uses.session) ||
-					(changed.context && previous.uses.context);
+				unsubscribe();
+				clearTimeout(timeout);
+			};
 
-				if (changed_since_last_render) {
-					const hash = page.path + query;
-
-					// see if we have some cached data
-					const cache = this.caches.get(module);
-					const cached = cache && cache.get(hash);
-
-					/** @type {import('./types').PageNode} */
-					let node;
-
-					/** @type {import('types.internal').LoadOutput} */
-					let loaded;
-
-					if (cached && (!changed.context || !cached.node.uses.context)) {
-						({ node, loaded } = cached);
-					} else {
-						node = {
-							module,
-							uses: {
-								params: new Set(),
-								path: false,
-								query: false,
-								session: false,
-								context: false
-							}
-						};
+			const timeout = setTimeout(clear, maxage * 1000);
 
-						const params = {};
-						for (const key in page.params) {
-							Object.defineProperty(params, key, {
-								get() {
-									node.uses.params.add(key);
-									return page.params[key];
-								},
-								enumerable: true
-							});
-						}
+			const unsubscribe = this.stores.session.subscribe(() => {
+				if (ready) clear();
+			});
 
-						const session = this.$session;
-
-						if (module.load) {
-							loaded = await module.load.call(null, {
-								page: {
-									host: page.host,
-									params,
-									get path() {
-										node.uses.path = true;
-										return page.path;
-									},
-									get query() {
-										node.uses.query = true;
-										return page.query;
-									}
-								},
-								get session() {
-									node.uses.session = true;
-									return session;
-								},
-								get context() {
-									node.uses.context = true;
-									return { ...context };
-								},
-								fetch: this.started ? fetch : initial_fetch
-							});
+			ready = true;
 
-							// if the page component returns nothing from load, fall through
-							const is_leaf = i === component_promises.length - 1 && !error;
-							if (!loaded && is_leaf) return;
-						}
+			this.cache.set(hash, result);
+		}
+
+		return result;
+	}
+
+	/**
+	 *
+	 * @param {{
+	 *   status?: number;
+	 *   error?: Error;
+	 *   module: CSRComponent;
+	 *   page: import('types').Page;
+	 *   context: Record<string, any>;
+	 * }} options
+	 * @returns
+	 */
+	async _load_node({ status, error, module, page, context }) {
+		/** @type {import('./types').BranchNode} */
+		const node = {
+			module,
+			uses: {
+				params: new Set(),
+				path: false,
+				query: false,
+				session: false,
+				context: false
+			},
+			loaded: null,
+			context
+		};
+
+		/** @type {Record<string, string>} */
+		const params = {};
+		for (const key in page.params) {
+			Object.defineProperty(params, key, {
+				get() {
+					node.uses.params.add(key);
+					return page.params[key];
+				},
+				enumerable: true
+			});
+		}
+
+		const session = this.$session;
+
+		if (module.load) {
+			/** @type {import('types.internal').LoadInput | import('types.internal').ErrorLoadInput} */
+			const load_input = {
+				page: {
+					host: page.host,
+					params,
+					get path() {
+						node.uses.path = true;
+						return page.path;
+					},
+					get query() {
+						node.uses.query = true;
+						return page.query;
 					}
+				},
+				get session() {
+					node.uses.session = true;
+					return session;
+				},
+				get context() {
+					node.uses.context = true;
+					return { ...context };
+				},
+				fetch: this.started ? fetch : initial_fetch
+			};
 
-					if (loaded) {
-						loaded = normalize(loaded);
+			if (error) {
+				/** @type {import('types.internal').ErrorLoadInput} */ (load_input).status = status;
+				/** @type {import('types.internal').ErrorLoadInput} */ (load_input).error = error;
+			}
 
-						if (loaded.error) {
-							if (error) {
-								// error while rendering error page, oops
-								throw error;
-							}
+			const loaded = await module.load.call(null, load_input);
 
-							return await this._load_error({
-								status: loaded.status || 500,
-								error: loaded.error,
-								path: page.path,
-								query: page.query
-							});
-						}
+			// if the page component returns nothing from load, fall through
+			if (!loaded) return;
 
-						if (loaded.redirect) {
-							return {
-								redirect: loaded.redirect
-							};
-						}
+			node.loaded = normalize(loaded);
+			if (node.loaded.context) node.context = node.loaded.context;
+		}
 
-						if (loaded.context) {
-							changed.context = true;
+		return node;
+	}
 
-							context = {
-								...context,
-								...loaded.context
-							};
-						}
+	/**
+	 * @param {import('./types').NavigationCandidate} selected
+	 * @returns {Promise<import('./types').NavigationResult>}
+	 */
+	async _load({ route, path, query }) {
+		const hash = `${path}?${query}`;
 
-						if (loaded.maxage) {
-							if (!this.caches.has(module)) {
-								this.caches.set(module, new Map());
-							}
+		if (this.cache.has(hash)) {
+			return this.cache.get(hash);
+		}
 
-							const cache = this.caches.get(module);
-							const cached = { node, loaded };
+		const [pattern, a, b, get_params] = route;
+		const params = get_params ? get_params(pattern.exec(path)) : {};
 
-							cache.set(hash, cached);
+		const changed = this.current.page && {
+			path: path !== this.current.page.path,
+			params: Object.keys(params).filter((key) => this.current.page.params[key] !== params[key]),
+			query: query.toString() !== this.current.page.query.toString(),
+			session: this.session_id !== this.current.session_id
+		};
 
-							let ready = false;
+		/** @type {import('types').Page} */
+		const page = { host: this.host, path, query, params };
 
-							const timeout = setTimeout(() => {
-								clear();
-							}, loaded.maxage * 1000);
+		/** @type {import('./types').BranchNode[]} */
+		const branch = [];
 
-							const clear = () => {
-								if (cache.get(hash) === cached) {
-									cache.delete(hash);
-								}
+		/** @type {Record<string, any>} */
+		let context = {};
+		let context_changed = false;
 
-								unsubscribe();
-								clearTimeout(timeout);
-							};
+		/** @type {number} */
+		let status = 200;
 
-							const unsubscribe = this.stores.session.subscribe(() => {
-								if (ready) clear();
-							});
+		/** @type {Error} */
+		let error = null;
+
+		// preload modules
+		a.forEach((loader) => loader());
+
+		load: for (let i = 0; i < a.length; i += 1) {
+			/** @type {import('./types').BranchNode} */
+			let node;
 
-							ready = true;
+			try {
+				if (!a[i]) continue;
+
+				const module = await a[i]();
+				const previous = this.current.branch[i];
+
+				const changed_since_last_render =
+					!previous ||
+					module !== previous.module ||
+					(changed.path && previous.uses.path) ||
+					changed.params.some((param) => previous.uses.params.has(param)) ||
+					(changed.query && previous.uses.query) ||
+					(changed.session && previous.uses.session) ||
+					(context_changed && previous.uses.context);
+
+				if (changed_since_last_render) {
+					node = await this._load_node({
+						module,
+						page,
+						context
+					});
+
+					const is_leaf = i === a.length - 1;
+
+					if (node && node.loaded) {
+						if (node.loaded.error) {
+							status = node.loaded.status;
+							error = node.loaded.error;
 						}
 
-						props_promises[i] = loaded.props;
-					}
+						if (node.loaded.redirect) {
+							return {
+								redirect: node.loaded.redirect
+							};
+						}
 
-					result.state.nodes[i] = node;
-					result.state.contexts[i] = context;
+						if (node.loaded.context) {
+							context_changed = true;
+						}
+					} else if (is_leaf && module.load) {
+						// if the leaf node has a `load` function
+						// that returns nothing, fall through
+						return;
+					}
 				} else {
-					result.state.nodes[i] = previous;
-					result.state.contexts[i] = context = previous_context;
+					node = previous;
 				}
+			} catch (e) {
+				status = 500;
+				error = e;
 			}
 
-			// we allow returned `props` to be a Promise so that
-			// layout/page loads can happen in parallel
-			(await Promise.all(props_promises)).forEach((p, i) => {
-				if (p) {
-					result.props[`props_${i}`] = p;
+			if (error) {
+				while (i--) {
+					if (b[i]) {
+						let error_loaded;
+
+						/** @type {import('./types').BranchNode} */
+						let node_loaded;
+						let j = i;
+						while (!(node_loaded = branch[j])) {
+							j -= 1;
+						}
+
+						try {
+							error_loaded = await this._load_node({
+								status,
+								error,
+								module: await b[i](),
+								page,
+								context: node_loaded.context
+							});
+
+							if (error_loaded.loaded.error) {
+								continue;
+							}
+
+							branch.push(error_loaded);
+							break load;
+						} catch (e) {
+							continue;
+						}
+					}
 				}
-			});
 
-			if (!this.current.page || page.path !== this.current.page.path || changed.query) {
-				result.props.page = page;
-			}
+				return await this._load_error({
+					status,
+					error,
+					path,
+					query
+				});
+			} else {
+				if (node && node.loaded && node.loaded.context) {
+					context = {
+						...context,
+						...node.loaded.context
+					};
+				}
 
-			return result;
-		} catch (e) {
-			if (error) {
-				throw error;
+				branch.push(node);
 			}
-
-			return await this._load_error({
-				status: 500,
-				error: e,
-				path: page.path,
-				query: page.query
-			});
 		}
+
+		return await this._get_navigation_result_from_branch({ page, branch });
 	}
 
 	/**
@@ -543,16 +640,30 @@ export class Renderer {
 	 * }} opts
 	 */
 	async _load_error({ status, error, path, query }) {
-		return await this._load({
-			status,
-			error,
-			nodes: this.fallback,
-			page: {
-				host: this.host,
-				path,
-				query,
-				params: {}
-			}
+		const page = {
+			host: this.host,
+			path,
+			query,
+			params: {}
+		};
+
+		const node = await this._load_node({
+			module: await this.fallback[0],
+			page,
+			context: {}
 		});
+
+		const branch = [
+			node,
+			await this._load_node({
+				status,
+				error,
+				module: await this.fallback[1],
+				page,
+				context: node && node.loaded && node.loaded.context
+			})
+		];
+
+		return await this._get_navigation_result_from_branch({ page, branch });
 	}
 }
diff --git a/packages/kit/src/runtime/client/start.js b/packages/kit/src/runtime/client/start.js
index 694f603b41f1..2bb19a52d8ef 100644
--- a/packages/kit/src/runtime/client/start.js
+++ b/packages/kit/src/runtime/client/start.js
@@ -14,12 +14,15 @@ import { set_paths } from '../paths.js';
  *   },
  *   target: Node;
  *   session: any;
- *   error: Error;
- *   status: number;
  *   host: string;
  *   route: boolean;
  *   spa: boolean;
- *   hydrate: import('./types').NavigationCandidate;
+ *   hydrate: {
+ *     status: number;
+ *     error: Error;
+ *     nodes: Array<Promise<import('types.internal').CSRComponent>>;
+ *     page: import('types').Page;
+ *   };
  * }} opts */
 export async function start({ paths, target, session, host, route, spa, hydrate }) {
 	const router =
diff --git a/packages/kit/src/runtime/client/types.d.ts b/packages/kit/src/runtime/client/types.d.ts
index e45ad7437751..a2f3f2c9b7b8 100644
--- a/packages/kit/src/runtime/client/types.d.ts
+++ b/packages/kit/src/runtime/client/types.d.ts
@@ -1,5 +1,5 @@
+import { CSRComponent, CSRRoute, LoadOutput } from '../../../types.internal';
 import { Page } from '../../../types';
-import { CSRComponent, CSRRoute } from '../../../types.internal';
 
 export type NavigationInfo = {
 	id: string;
@@ -9,10 +9,9 @@ export type NavigationInfo = {
 };
 
 export type NavigationCandidate = {
-	status: number;
-	error: Error;
-	nodes: Array<Promise<CSRComponent>>;
-	page: Page;
+	route: CSRRoute;
+	path: string;
+	query: URLSearchParams;
 };
 
 export type NavigationResult = {
@@ -22,16 +21,9 @@ export type NavigationResult = {
 	props?: Record<string, any>;
 };
 
-export type NavigationState = {
-	page: Page;
-	query: string;
-	session_changed: boolean;
-	nodes: PageNode[];
-	contexts: Array<Record<string, any[]>>;
-};
-
-type PageNode = {
+export type BranchNode = {
 	module: CSRComponent;
+	loaded: LoadOutput;
 	uses: {
 		params: Set<string>;
 		path: boolean;
@@ -39,4 +31,11 @@ type PageNode = {
 		session: boolean;
 		context: boolean;
 	};
+	context: Record<string, any>;
+};
+
+export type NavigationState = {
+	page: Page;
+	branch: BranchNode[];
+	session_id: number;
 };
diff --git a/packages/kit/src/runtime/server/page/load_node.js b/packages/kit/src/runtime/server/page/load_node.js
index 2fa5500ab38b..6b2fcb54b2e8 100644
--- a/packages/kit/src/runtime/server/page/load_node.js
+++ b/packages/kit/src/runtime/server/page/load_node.js
@@ -16,6 +16,9 @@ const s = JSON.stringify;
  *   $session: any;
  *   context: Record<string, any>;
  *   is_leaf: boolean;
+ *   is_error: boolean;
+ *   status?: number;
+ *   error?: Error;
  * }} opts
  * @returns {Promise<import('./types').Loaded>}
  */
@@ -27,7 +30,10 @@ export async function load_node({
 	node,
 	$session,
 	context,
-	is_leaf
+	is_leaf,
+	is_error,
+	status,
+	error
 }) {
 	const { module } = node;
 
@@ -39,188 +45,202 @@ export async function load_node({
 	 * }>} */
 	const fetched = [];
 
-	const loaded = module.load
-		? await module.load.call(null, {
-				page,
-				get session() {
-					uses_credentials = true;
-					return $session;
-				},
-				/**
-				 * @param {RequestInfo} resource
-				 * @param {RequestInit} opts
-				 */
-				fetch: async (resource, opts = {}) => {
-					/** @type {string} */
-					let url;
-
-					if (typeof resource === 'string') {
-						url = resource;
-					} else {
-						url = resource.url;
-
-						opts = {
-							method: resource.method,
-							headers: resource.headers,
-							body: resource.body,
-							mode: resource.mode,
-							credentials: resource.credentials,
-							cache: resource.cache,
-							redirect: resource.redirect,
-							referrer: resource.referrer,
-							integrity: resource.integrity,
-							...opts
-						};
-					}
+	let loaded;
+
+	if (module.load) {
+		/** @type {import('types.internal').LoadInput | import('types.internal').ErrorLoadInput} */
+		const load_input = {
+			page,
+			get session() {
+				uses_credentials = true;
+				return $session;
+			},
+			/**
+			 * @param {RequestInfo} resource
+			 * @param {RequestInit} opts
+			 */
+			// @ts-ignore mismatch between client fetch and node-fetch
+			fetch: async (resource, opts = {}) => {
+				/** @type {string} */
+				let url;
+
+				if (typeof resource === 'string') {
+					url = resource;
+				} else {
+					url = resource.url;
+
+					opts = {
+						method: resource.method,
+						headers: resource.headers,
+						body: resource.body,
+						mode: resource.mode,
+						credentials: resource.credentials,
+						cache: resource.cache,
+						redirect: resource.redirect,
+						referrer: resource.referrer,
+						integrity: resource.integrity,
+						...opts
+					};
+				}
+
+				if (options.local && url.startsWith(options.paths.assets)) {
+					// when running `start`, or prerendering, `assets` should be
+					// config.kit.paths.assets, but we should still be able to fetch
+					// assets directly from `static`
+					url = url.replace(options.paths.assets, '');
+				}
+
+				const parsed = parse(url);
+
+				let response;
+
+				if (parsed.protocol) {
+					// external fetch
+					response = await fetch(
+						parsed.href,
+						/** @type {import('node-fetch').RequestInit} */ (opts)
+					);
+				} else {
+					// otherwise we're dealing with an internal fetch
+					const resolved = resolve(request.path, parsed.pathname);
+
+					// handle fetch requests for static assets. e.g. prebaked data, etc.
+					// we need to support everything the browser's fetch supports
+					const filename = resolved.slice(1);
+					const filename_html = `${filename}/index.html`; // path may also match path/index.html
+					const asset = options.manifest.assets.find(
+						(d) => d.file === filename || d.file === filename_html
+					);
 
-					if (options.local && url.startsWith(options.paths.assets)) {
-						// when running `start`, or prerendering, `assets` should be
-						// config.kit.paths.assets, but we should still be able to fetch
-						// assets directly from `static`
-						url = url.replace(options.paths.assets, '');
+					if (asset) {
+						// we don't have a running server while prerendering because jumping between
+						// processes would be inefficient so we have get_static_file instead
+						if (options.get_static_file) {
+							response = new Response(options.get_static_file(asset.file), {
+								headers: {
+									'content-type': asset.type
+								}
+							});
+						} else {
+							// TODO we need to know what protocol to use
+							response = await fetch(
+								`http://${page.host}/${asset.file}`,
+								/** @type {import('node-fetch').RequestInit} */ (opts)
+							);
+						}
 					}
 
-					const parsed = parse(url);
+					if (!response) {
+						const headers = /** @type {import('types.internal').Headers} */ ({ ...opts.headers });
 
-					let response;
+						// TODO: fix type https://github.com/node-fetch/node-fetch/issues/1113
+						if (opts.credentials !== 'omit') {
+							uses_credentials = true;
 
-					if (parsed.protocol) {
-						// external fetch
-						response = await fetch(
-							parsed.href,
-							/** @type {import('node-fetch').RequestInit} */ (opts)
-						);
-					} else {
-						// otherwise we're dealing with an internal fetch
-						const resolved = resolve(request.path, parsed.pathname);
-
-						// handle fetch requests for static assets. e.g. prebaked data, etc.
-						// we need to support everything the browser's fetch supports
-						const filename = resolved.slice(1);
-						const filename_html = `${filename}/index.html`; // path may also match path/index.html
-						const asset = options.manifest.assets.find(
-							(d) => d.file === filename || d.file === filename_html
-						);
+							headers.cookie = request.headers.cookie;
 
-						if (asset) {
-							// we don't have a running server while prerendering because jumping between
-							// processes would be inefficient so we have get_static_file instead
-							if (options.get_static_file) {
-								response = new Response(options.get_static_file(asset.file), {
-									headers: {
-										'content-type': asset.type
-									}
-								});
-							} else {
-								// TODO we need to know what protocol to use
-								response = await fetch(
-									`http://${page.host}/${asset.file}`,
-									/** @type {import('node-fetch').RequestInit} */ (opts)
-								);
+							if (!headers.authorization) {
+								headers.authorization = request.headers.authorization;
 							}
 						}
 
-						if (!response) {
-							const headers = /** @type {import('types.internal').Headers} */ ({ ...opts.headers });
-
-							// TODO: fix type https://github.com/node-fetch/node-fetch/issues/1113
-							if (opts.credentials !== 'omit') {
-								uses_credentials = true;
-
-								headers.cookie = request.headers.cookie;
-
-								if (!headers.authorization) {
-									headers.authorization = request.headers.authorization;
-								}
+						const rendered = await ssr(
+							{
+								host: request.host,
+								method: opts.method || 'GET',
+								headers,
+								path: resolved,
+								body: /** @type {any} */ (opts.body),
+								query: new URLSearchParams(parsed.query || '')
+							},
+							{
+								...options,
+								fetched: url,
+								initiator: route
 							}
+						);
 
-							const rendered = await ssr(
-								{
-									host: request.host,
-									method: opts.method || 'GET',
-									headers,
-									path: resolved,
-									body: /** @type {any} */ (opts.body),
-									query: new URLSearchParams(parsed.query || '')
-								},
-								{
-									...options,
-									fetched: url,
-									initiator: route
-								}
-							);
-
-							if (rendered) {
-								if (options.dependencies) {
-									options.dependencies.set(resolved, rendered);
-								}
-
-								response = new Response(rendered.body, {
-									status: rendered.status,
-									headers: rendered.headers
-								});
+						if (rendered) {
+							if (options.dependencies) {
+								options.dependencies.set(resolved, rendered);
 							}
+
+							response = new Response(rendered.body, {
+								status: rendered.status,
+								headers: rendered.headers
+							});
 						}
 					}
+				}
+
+				if (response) {
+					const proxy = new Proxy(response, {
+						get(response, key, receiver) {
+							async function text() {
+								const body = await response.text();
+
+								/** @type {import('types.internal').Headers} */
+								const headers = {};
+								response.headers.forEach((value, key) => {
+									if (key !== 'etag' && key !== 'set-cookie') headers[key] = value;
+								});
 
-					if (response) {
-						const proxy = new Proxy(response, {
-							get(response, key, receiver) {
-								async function text() {
-									const body = await response.text();
-
-									/** @type {import('types.internal').Headers} */
-									const headers = {};
-									response.headers.forEach((value, key) => {
-										if (key !== 'etag' && key !== 'set-cookie') headers[key] = value;
-									});
-
-									// prettier-ignore
-									fetched.push({
-										url,
-										json: `{"status":${response.status},"statusText":${s(response.statusText)},"headers":${s(headers)},"body":${escape(body)}}`
-									});
-
-									return body;
-								}
-
-								if (key === 'text') {
-									return text;
-								}
+								// prettier-ignore
+								fetched.push({
+									url,
+									json: `{"status":${response.status},"statusText":${s(response.statusText)},"headers":${s(headers)},"body":${escape(body)}}`
+								});
 
-								if (key === 'json') {
-									return async () => {
-										return JSON.parse(await text());
-									};
-								}
+								return body;
+							}
 
-								// TODO arrayBuffer?
+							if (key === 'text') {
+								return text;
+							}
 
-								return Reflect.get(response, key, receiver);
+							if (key === 'json') {
+								return async () => {
+									return JSON.parse(await text());
+								};
 							}
-						});
 
-						return proxy;
-					}
+							// TODO arrayBuffer?
 
-					return (
-						response ||
-						new Response('Not found', {
-							status: 404
-						})
-					);
-				},
-				context: { ...context }
-		  })
-		: {};
+							return Reflect.get(response, key, receiver);
+						}
+					});
+
+					return proxy;
+				}
+
+				return (
+					response ||
+					new Response('Not found', {
+						status: 404
+					})
+				);
+			},
+			context: { ...context }
+		};
+
+		if (is_error) {
+			/** @type {import('types.internal').ErrorLoadInput} */ (load_input).status = status;
+			/** @type {import('types.internal').ErrorLoadInput} */ (load_input).error = error;
+		}
+
+		loaded = await module.load.call(null, load_input);
+	} else {
+		loaded = {};
+	}
 
 	// if leaf node (i.e. page component) has a load function
 	// that returns nothing, we fall through to the next one
-	if (!loaded && is_leaf) return;
+	if (!loaded && is_leaf && !is_error) return;
 
 	return {
 		node,
 		loaded: normalize(loaded),
+		context: loaded.context || context,
 		fetched,
 		uses_credentials
 	};
diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
index edd2d00a1c76..15ae275290a2 100644
--- a/packages/kit/src/runtime/server/page/render.js
+++ b/packages/kit/src/runtime/server/page/render.js
@@ -65,8 +65,6 @@ export async function render_response({
 
 		/** @type {Record<string, any>} */
 		const props = {
-			status,
-			error,
 			stores: {
 				page: writable(null),
 				navigating: writable(null),
diff --git a/packages/kit/src/runtime/server/page/respond.js b/packages/kit/src/runtime/server/page/respond.js
index 6ec602351246..f80be93bfd09 100644
--- a/packages/kit/src/runtime/server/page/respond.js
+++ b/packages/kit/src/runtime/server/page/respond.js
@@ -2,6 +2,8 @@ import { render_response } from './render.js';
 import { load_node } from './load_node.js';
 import { respond_with_error } from './respond_with_error.js';
 
+/** @typedef {import('./types.js').Loaded} Loaded */
+
 /**
  * @param {{
  *   request: import('types').Request;
@@ -25,7 +27,7 @@ export async function respond({ request, options, $session, route }) {
 	let nodes;
 
 	try {
-		nodes = await Promise.all(route.parts.map((id) => options.load_component(id)));
+		nodes = await Promise.all(route.a.map((id) => id && options.load_component(id)));
 	} catch (error) {
 		return await respond_with_error({
 			request,
@@ -54,70 +56,114 @@ export async function respond({ request, options, $session, route }) {
 		};
 	}
 
-	/** @type {import('./types.js').Loaded[]} */
+	/** @type {Loaded[]} */
 	let branch;
 
-	if (page_config.ssr) {
+	/** @type {number} */
+	let status = 200;
+
+	/** @type {Error} */
+	let error;
+
+	ssr: if (page_config.ssr) {
 		let context = {};
 		branch = [];
 
 		for (let i = 0; i < nodes.length; i += 1) {
 			const node = nodes[i];
 
-			/** @type {import('./types.js').Loaded} */
+			/** @type {Loaded} */
 			let loaded;
 
-			try {
-				loaded = await load_node({
-					request,
-					options,
-					route,
-					page,
-					node,
-					$session,
-					context,
-					is_leaf: i === nodes.length - 1
-				});
-
-				if (!loaded) return;
-
-				if (loaded.loaded.redirect) {
-					return {
-						status: loaded.loaded.status,
-						headers: {
-							location: loaded.loaded.redirect
-						}
-					};
+			if (node) {
+				try {
+					loaded = await load_node({
+						request,
+						options,
+						route,
+						page,
+						node,
+						$session,
+						context,
+						is_leaf: i === nodes.length - 1,
+						is_error: false
+					});
+
+					if (!loaded) return;
+
+					if (loaded.loaded.redirect) {
+						return {
+							status: loaded.loaded.status,
+							headers: {
+								location: loaded.loaded.redirect
+							}
+						};
+					}
+
+					if (loaded.loaded.error) {
+						({ status, error } = loaded.loaded);
+					}
+				} catch (e) {
+					status = 500;
+					error = e;
 				}
-			} catch (e) {
-				// TODO
-				loaded = {
-					node: null,
-					loaded: {
-						status: 500,
-						error: e
-					},
-					fetched: null,
-					uses_credentials: null
-				};
-			}
 
-			if (loaded.loaded.error) {
-				// TODO backtrack until we find an $error.svelte component
-				// that we can use as the leaf node
-				// for now just return regular error page
-				return await respond_with_error({
-					request,
-					options,
-					$session,
-					status: loaded.loaded.status,
-					error: loaded.loaded.error
-				});
+				if (error) {
+					while (i--) {
+						if (route.b[i]) {
+							const error_node = await options.load_component(route.b[i]);
+							let error_loaded;
+
+							/** @type {Loaded} */
+							let node_loaded;
+							let j = i;
+							while (!(node_loaded = branch[j])) {
+								j -= 1;
+							}
+
+							try {
+								error_loaded = await load_node({
+									request,
+									options,
+									route,
+									page,
+									node: error_node,
+									$session,
+									context: node_loaded.context,
+									is_leaf: false,
+									is_error: true,
+									status,
+									error
+								});
+
+								if (error_loaded.loaded.error) {
+									continue;
+								}
+
+								branch = branch.slice(0, j + 1).concat(error_loaded);
+								break ssr;
+							} catch (e) {
+								continue;
+							}
+						}
+					}
+
+					// TODO backtrack until we find an $error.svelte component
+					// that we can use as the leaf node
+					// for now just return regular error page
+					return await respond_with_error({
+						request,
+						options,
+						$session,
+						status,
+						error
+					});
+				}
 			}
 
 			branch.push(loaded);
 
-			if (loaded.loaded.context) {
+			if (loaded && loaded.loaded.context) {
 				// TODO come up with better names for stuff
 				context = {
 					...context,
@@ -133,9 +179,9 @@ export async function respond({ request, options, $session, route }) {
 			options,
 			$session,
 			page_config,
-			status: 200,
-			error: null,
-			branch,
+			status,
+			error,
+			branch: branch && branch.filter(Boolean),
 			page
 		});
 	} catch (error) {
diff --git a/packages/kit/src/runtime/server/page/respond_with_error.js b/packages/kit/src/runtime/server/page/respond_with_error.js
index ee6a2fddd75a..4bbe97ceb505 100644
--- a/packages/kit/src/runtime/server/page/respond_with_error.js
+++ b/packages/kit/src/runtime/server/page/respond_with_error.js
@@ -21,25 +21,33 @@ export async function respond_with_error({ request, options, $session, status, e
 		params: {}
 	};
 
+	const loaded = await load_node({
+		request,
+		options,
+		route: null,
+		page,
+		node: default_layout,
+		$session,
+		context: {},
+		is_leaf: false,
+		is_error: false
+	});
+
 	const branch = [
+		loaded,
 		await load_node({
 			request,
 			options,
 			route: null,
 			page,
-			node: default_layout,
-			$session,
-			context: {},
-			is_leaf: false
-		}),
-		{
 			node: default_error,
-			loaded: {
-				maxage: 0
-			},
-			fetched: null,
-			uses_credentials: null
-		}
+			$session,
+			context: loaded.context,
+			is_leaf: false,
+			is_error: true,
+			status,
+			error
+		})
 	];
 
 	try {
diff --git a/packages/kit/src/runtime/server/page/types.d.ts b/packages/kit/src/runtime/server/page/types.d.ts
index f43ffa315402..92d755499fd4 100644
--- a/packages/kit/src/runtime/server/page/types.d.ts
+++ b/packages/kit/src/runtime/server/page/types.d.ts
@@ -3,6 +3,7 @@ import { LoadOutput, SSRNode } from '../../../../types.internal';
 export type Loaded = {
 	node: SSRNode;
 	loaded: LoadOutput;
+	context: Record<string, any>;
 	fetched: Array<{ url: string; json: string }>;
 	uses_credentials: boolean;
 };
diff --git a/packages/kit/test/apps/basics/src/routes/$error.svelte b/packages/kit/test/apps/basics/src/routes/$error.svelte
index 8276072576fe..0198372b1eeb 100644
--- a/packages/kit/test/apps/basics/src/routes/$error.svelte
+++ b/packages/kit/test/apps/basics/src/routes/$error.svelte
@@ -1,5 +1,16 @@
+<script context="module">
+	/** @type {import('../../../../../types').ErrorLoad} */
+	export function load({ status, error }) {
+		return {
+			props: { status, error }
+		};
+	}
+</script>
+
 <script>
+	/** @type {number} */
 	export let status;
+	/** @type {Error} */
 	export let error;
 </script>
 
diff --git a/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/$error.svelte b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/$error.svelte
new file mode 100644
index 000000000000..7614107e4c89
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/$error.svelte
@@ -0,0 +1,33 @@
+<script context="module">
+	export async function load({ status, error }) {
+		return {
+			props: {
+				answer: 42,
+				status,
+				error
+			}
+		};
+	}
+</script>
+
+<script>
+	/** @type {number} */
+	export let status;
+
+	/** @type {Error} */
+	export let error;
+
+	/** @type {number} */
+	export let answer;
+</script>
+
+<h1>Nested error page</h1>
+<p id="nested-error-status">status: {status}</p>
+<p id="nested-error-message">error.message: {error && error.message}</p>
+<p id="nested-error-loaded">answer: {answer}</p>
+
+<style>
+	h1 {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/__tests__.js b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/__tests__.js
new file mode 100644
index 000000000000..ea6f08fe5755
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/__tests__.js
@@ -0,0 +1,16 @@
+import * as assert from 'uvu/assert';
+
+/** @type {import('../../../../../../types').TestMaker} */
+export default function (test, is_dev) {
+	test(
+		'renders the closest error page',
+		'/errors/nested-error-page',
+		async ({ page, clicknav }) => {
+			await clicknav('[href="/errors/nested-error-page/nope"]');
+
+			assert.equal(await page.textContent('h1'), 'Nested error page');
+			assert.equal(await page.textContent('#nested-error-status'), 'status: 500');
+			assert.equal(await page.textContent('#nested-error-message'), 'error.message: nope');
+		}
+	);
+}
diff --git a/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/index.svelte b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/index.svelte
new file mode 100644
index 000000000000..cab115c70cae
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/index.svelte
@@ -0,0 +1 @@
+<a href="/errors/nested-error-page/nope">nope</a>
\ No newline at end of file
diff --git a/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/nope.svelte b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/nope.svelte
new file mode 100644
index 000000000000..5b579b81f460
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/errors/nested-error-page/nope.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	export async function load() {
+		throw new Error('nope');
+	}
+</script>
+
+<h1>should not see this</h1>
\ No newline at end of file
diff --git a/packages/kit/test/apps/basics/src/routes/redirect/__tests__.js b/packages/kit/test/apps/basics/src/routes/redirect/__tests__.js
index e3965b4e2a2e..0c081b595812 100644
--- a/packages/kit/test/apps/basics/src/routes/redirect/__tests__.js
+++ b/packages/kit/test/apps/basics/src/routes/redirect/__tests__.js
@@ -9,7 +9,7 @@ export default function (test, is_dev) {
 		assert.equal(await page.textContent('h1'), 'c');
 	});
 
-	test('prevents redirect loops', '/redirect', async ({ base, page, clicknav, js }) => {
+	test('prevents redirect loops', '/redirect', async ({ base, page, js }) => {
 		await page.click('[href="/redirect/loopy/a"]');
 
 		if (js) {
diff --git a/packages/kit/test/test.js b/packages/kit/test/test.js
index f1513bc0e495..cf489df2c92b 100644
--- a/packages/kit/test/test.js
+++ b/packages/kit/test/test.js
@@ -118,6 +118,8 @@ function duplicate(test_fn, config) {
 			start = null;
 		}
 
+		if (process.env.FILTER && !name.includes(process.env.FILTER)) return;
+
 		test_fn(`${name} [no js]`, async (context) => {
 			let response;
 
diff --git a/packages/kit/types.d.ts b/packages/kit/types.d.ts
index 2fa43cbbf724..3005db791638 100644
--- a/packages/kit/types.d.ts
+++ b/packages/kit/types.d.ts
@@ -1,5 +1,5 @@
 import './types.ambient';
-import { Headers, LoadInput, LoadOutput, Logger } from './types.internal';
+import { Headers, ErrorLoadInput, LoadInput, LoadOutput, Logger } from './types.internal';
 import { UserConfig as ViteConfig } from 'vite';
 
 export type Config = {
@@ -96,6 +96,8 @@ export type RequestHandler<Context = any, Body = unknown> = (
 
 export type Load = (input: LoadInput) => LoadOutput | Promise<LoadOutput>;
 
+export type ErrorLoad = (input: ErrorLoadInput) => LoadOutput | Promise<LoadOutput>;
+
 export type GetContext<Context = any> = (incoming: Incoming) => Context;
 
 export type GetSession<Context = any, Session = any> = {
diff --git a/packages/kit/types.internal.d.ts b/packages/kit/types.internal.d.ts
index 6a2b05b40f79..49115bf3fa23 100644
--- a/packages/kit/types.internal.d.ts
+++ b/packages/kit/types.internal.d.ts
@@ -7,7 +7,7 @@ import {
 	Load,
 	Page,
 	RequestHandler,
-	Response
+	Response as SSRResponse
 } from './types';
 import { UserConfig as ViteConfig } from 'vite';
 import { Response as NodeFetchResponse } from 'node-fetch';
@@ -77,7 +77,7 @@ export type App = {
 		};
 		prerendering: boolean;
 	}) => void;
-	render: (incoming: Incoming, options: SSRRenderOptions) => Response;
+	render: (incoming: Incoming, options: SSRRenderOptions) => SSRResponse;
 };
 
 // TODO we want to differentiate between request headers, which
@@ -88,16 +88,21 @@ export type Headers = Record<string, string>;
 
 export type LoadInput = {
 	page: Page;
-	fetch: (info: RequestInfo, init?: RequestInit) => Promise<NodeFetchResponse>;
+	fetch: (info: RequestInfo, init?: RequestInit) => Promise<Response>;
 	session: any;
 	context: Record<string, any>;
 };
 
+export type ErrorLoadInput = LoadInput & {
+	status: number;
+	error: Error;
+};
+
 export type LoadOutput = {
 	status?: number;
 	error?: Error;
 	redirect?: string;
-	props?: Record<string, any>;
+	props?: Record<string, any> | Promise<Record<string, any>>;
 	context?: Record<string, any>;
 	maxage?: number;
 };
@@ -137,7 +142,12 @@ export type SSRPage = {
 	type: 'page';
 	pattern: RegExp;
 	params: GetParams;
-	parts: PageId[];
+	// plan a is to render 1 or more layout components followed
+	// by a leaf component. if one of them fails in `load`, we
+	// backtrack until we find the nearest error component —
+	// plan b — and render that instead
+	a: PageId[];
+	b: PageId[];
 };
 
 export type SSREndpoint = {
@@ -151,7 +161,7 @@ export type SSREndpoint = {
 
 export type SSRRoute = SSREndpoint | SSRPage;
 
-export type CSRPage = [RegExp, CSRComponentLoader[], GetParams?];
+export type CSRPage = [RegExp, CSRComponentLoader[], CSRComponentLoader[], GetParams?];
 
 export type CSREndpoint = [RegExp];
 
@@ -194,7 +204,7 @@ export type SSRRenderOptions = {
 	hooks?: Hooks;
 	dev?: boolean;
 	amp?: boolean;
-	dependencies?: Map<string, Response>;
+	dependencies?: Map<string, SSRResponse>;
 	only_render_prerenderable_pages?: boolean;
 	get_stack?: (error: Error) => string;
 	get_static_file?: (file: string) => Buffer;
@@ -215,7 +225,8 @@ export type PageData = {
 	type: 'page';
 	pattern: RegExp;
 	params: string[];
-	parts: any[]; // TODO
+	a: string[];
+	b: string[];
 };
 
 export type EndpointData = {