Try to fix SPA initial behavior for 404s (#4116)

* init

* changeset

* add test

* update lockfile

* only prevent reload for fallback pages

* only render client-side 404 if pathname is unchanged

* Update .changeset/blue-parents-invite.md

Co-authored-by: Rich Harris <[email protected]>

Author: PH4NTOMiki

.changeset/blue-parents-invite.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Only fall back to full page reload if pathname has changed

packages/adapter-static/test/apps/spa/package.json

@@ -5,11 +5,12 @@
 	"scripts": {
 		"dev": "../../../../kit/svelte-kit.js dev",
 		"build": "../../../../kit/svelte-kit.js build",
-		"start": "../../../../kit/svelte-kit.js start"
+		"start": "sirv -s 200.html build"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "next",
 		"@sveltejs/kit": "next",
+		"sirv-cli": "^2.0.2",
 		"svelte": "^3.43.0"
 	},
 	"type": "module"

packages/adapter-static/test/apps/spa/src/app.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="@sveltejs/kit" />
+
+declare namespace App {
+	interface Session {
+		count: number;
+	}
+}

packages/adapter-static/test/apps/spa/src/hooks.js

@@ -0,0 +1,5 @@
+export function getSession() {
+	return {
+		count: 0
+	};
+}

packages/adapter-static/test/apps/spa/src/routes/__error.svelte

@@ -0,0 +1,25 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export function load({ session }) {
+		return {
+			props: session
+		};
+	}
+</script>
+
+<script>
+	import { browser } from '$app/env';
+	import { page, session } from '$app/stores';
+
+	/** @type {number} */
+	export let count;
+
+	if (browser) {
+		$session.count += 1;
+	}
+</script>
+
+<h1>{$page.status}</h1>
+<h2>count: {count}</h2>
+
+<button on:click={() => ($session.count += 1)}>+1</button>

packages/adapter-static/test/test.js

@@ -34,5 +34,8 @@ run('spa', (test) => {
 	test('renders error page for missing page', async ({ base, page }) => {
 		await page.goto(`${base}/nosuchpage`);
 		assert.equal(await page.textContent('h1'), '404');
+		assert.equal(await page.textContent('h2'), 'count: 1');
+
+		await page.waitForLoadState('networkidle', { timeout: 1000 });
 	});
 });

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

@@ -316,6 +316,14 @@ export class Renderer {
 		const token = (this.token = {});
 		let navigation_result = await this._get_navigation_result(info, no_cache);
 
+		if (!navigation_result && info.url.pathname === location.pathname) {
+			navigation_result = await this._load_error({
+				status: 404,
+				error: new Error(`Not found: ${info.url.pathname}`),
+				url: info.url
+			});
+		}
+
 		if (!navigation_result) {
 			location.href = info.url.href;
 			return;
@@ -523,14 +531,6 @@ export class Renderer {
 			);
 			if (result) return result;
 		}
-
-		if (info.initial) {
-			return await this._load_error({
-				status: 404,
-				error: new Error(`Not found: ${info.url.pathname}`),
-				url: info.url
-			});
-		}
 	}
 
 	/**

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

@@ -56,7 +56,7 @@ export class Router {
 	 *    base: string;
 	 *    routes: import('types').CSRRoute[];
 	 *    trailing_slash: import('types').TrailingSlash;
-	 *    renderer: import('./renderer').Renderer
+	 *    renderer: import('./renderer').Renderer;
 	 * }} opts
 	 */
 	constructor({ base, routes, trailing_slash, renderer }) {
@@ -290,8 +290,7 @@ export class Router {
 				id: url.pathname + url.search,
 				routes: this.routes.filter(([pattern]) => pattern.test(path)),
 				url,
-				path,
-				initial: !this.initialized
+				path
 			};
 		}
 	}

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

@@ -5,7 +5,6 @@ export type NavigationInfo = {
 	routes: CSRRoute[];
 	url: URL;
 	path: string;
-	initial: boolean;
 };
 
 export type NavigationCandidate = {