fix: only call afterNavigate once on start when SSR is disabled (#13593)

* add fix and test

* changeset

* format

Author: eltigerchino

.changeset/angry-ravens-eat.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: only call `afterNavigate` once on app start when SSR is disabled

packages/kit/src/exports/public.d.ts

@@ -1025,7 +1025,7 @@ export interface NavigationTarget {
 }
 
 /**
- * - `enter`: The app has hydrated
+ * - `enter`: The app has hydrated/started
  * - `form`: The user submitted a `<form>` with a GET method
  * - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
  * - `link`: Navigation was triggered by a link click
@@ -1101,7 +1101,7 @@ export interface OnNavigate extends Navigation {
 export interface AfterNavigate extends Omit<Navigation, 'type'> {
 	/**
 	 * The type of navigation:
-	 * - `enter`: The app has hydrated
+	 * - `enter`: The app has hydrated/started
 	 * - `form`: The user submitted a `<form>`
 	 * - `link`: Navigation was triggered by a link click
 	 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect

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

@@ -320,8 +320,10 @@ export async function start(_app, _target, hydrate) {
 	if (hydrate) {
 		await _hydrate(target, hydrate);
 	} else {
-		await goto(app.hash ? decode_hash(new URL(location.href)) : location.href, {
-			replaceState: true
+		await navigate({
+			type: 'enter',
+			url: resolve_url(app.hash ? decode_hash(new URL(location.href)) : location.href),
+			replace_state: true
 		});
 	}
 
@@ -479,20 +481,22 @@ function initialize(result, target, hydrate) {
 
 	restore_snapshot(current_navigation_index);
 
-	/** @type {import('@sveltejs/kit').AfterNavigate} */
-	const navigation = {
-		from: null,
-		to: {
-			params: current.params,
-			route: { id: current.route?.id ?? null },
-			url: new URL(location.href)
-		},
-		willUnload: false,
-		type: 'enter',
-		complete: Promise.resolve()
-	};
+	if (hydrate) {
+		/** @type {import('@sveltejs/kit').AfterNavigate} */
+		const navigation = {
+			from: null,
+			to: {
+				params: current.params,
+				route: { id: current.route?.id ?? null },
+				url: new URL(location.href)
+			},
+			willUnload: false,
+			type: 'enter',
+			complete: Promise.resolve()
+		};
 
-	after_navigate_callbacks.forEach((fn) => fn(navigation));
+		after_navigate_callbacks.forEach((fn) => fn(navigation));
+	}
 
 	started = true;
 }
@@ -1373,7 +1377,7 @@ function _before_navigate({ url, type, intent, delta }) {
 
 /**
  * @param {{
- *   type: import('@sveltejs/kit').Navigation["type"];
+ *   type: import('@sveltejs/kit').NavigationType;
  *   url: URL;
  *   popped?: {
  *     state: Record<string, any>;
@@ -1407,7 +1411,10 @@ async function navigate({
 	token = nav_token;
 
 	const intent = await get_navigation_intent(url, false);
-	const nav = _before_navigate({ url, type, delta: popped?.delta, intent });
+	const nav =
+		type === 'enter'
+			? create_navigation(current, intent, url, type)
+			: _before_navigate({ url, type, delta: popped?.delta, intent });
 
 	if (!nav) {
 		block();
@@ -1423,7 +1430,7 @@ async function navigate({
 
 	is_navigating = true;
 
-	if (started) {
+	if (started && nav.navigation.type !== 'enter') {
 		stores.navigating.set((navigating.current = nav.navigation));
 	}
 
@@ -2847,10 +2854,11 @@ function reset_focus() {
 }
 
 /**
+ * @template {import('@sveltejs/kit').NavigationType} T
  * @param {import('./types.js').NavigationState} current
  * @param {import('./types.js').NavigationIntent | undefined} intent
  * @param {URL | null} url
- * @param {Exclude<import('@sveltejs/kit').NavigationType, 'enter'>} type
+ * @param {T} type
  */
 function create_navigation(current, intent, url, type) {
 	/** @type {(value: any) => void} */
@@ -2867,7 +2875,7 @@ function create_navigation(current, intent, url, type) {
 	// Handle any errors off-chain so that it doesn't show up as an unhandled rejection
 	complete.catch(() => {});
 
-	/** @type {import('@sveltejs/kit').Navigation} */
+	/** @type {Omit<import('@sveltejs/kit').Navigation, 'type'> & { type: T }} */
 	const navigation = {
 		from: {
 			params: current.params,

packages/kit/test/apps/basics/src/routes/no-ssr/after-navigate/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { afterNavigate } from '$app/navigation';
+
+	let count = 0;
+	let type = '';
+
+	afterNavigate((event) => {
+		count += 1;
+		type = event.type;
+	});
+</script>
+
+<p>{type.toString()} {count}</p>

packages/kit/test/apps/basics/test/client.test.js

@@ -335,8 +335,8 @@ test.describe('Load', () => {
 	}
 });
 
-test.describe('Page options', () => {
-	test('applies generated component styles with ssr=false (hides announcer)', async ({
+test.describe('SPA mode / no SSR', () => {
+	test('applies generated component styles (hides announcer)', async ({
 		page,
 		clicknav,
 		get_computed_style
@@ -346,9 +346,7 @@ test.describe('Page options', () => {
 
 		expect(await get_computed_style('#svelte-announcer', 'position')).toBe('absolute');
 	});
-});
 
-test.describe('SPA mode / no SSR', () => {
 	test('Can use browser-only global on client-only page through ssr config in handle', async ({
 		page,
 		read_errors
@@ -358,7 +356,7 @@ test.describe('SPA mode / no SSR', () => {
 		expect(read_errors('/no-ssr/browser-only-global')).toBe(undefined);
 	});
 
-	test('Can use browser-only global on client-only page through ssr config in +layout.js', async ({
+	test('can use browser-only global on client-only page through ssr config in +layout.js', async ({
 		page,
 		read_errors
 	}) => {
@@ -367,7 +365,7 @@ test.describe('SPA mode / no SSR', () => {
 		expect(read_errors('/no-ssr/ssr-page-config')).toBe(undefined);
 	});
 
-	test('Can use browser-only global on client-only page through ssr config in +page.js', async ({
+	test('can use browser-only global on client-only page through ssr config in +page.js', async ({
 		page,
 		read_errors
 	}) => {
@@ -376,14 +374,19 @@ test.describe('SPA mode / no SSR', () => {
 		expect(read_errors('/no-ssr/ssr-page-config/layout/inherit')).toBe(undefined);
 	});
 
-	test('Cannot use browser-only global on page because of ssr config in +page.js', async ({
+	test('cannot use browser-only global on page because of ssr config in +page.js', async ({
 		page
 	}) => {
 		await page.goto('/no-ssr/ssr-page-config/layout/overwrite');
 		await expect(page.locator('p')).toHaveText(
 			'This is your custom error page saying: "document is not defined (500 Internal Error)"'
 		);
 	});
+
+	test('afterNavigate is only called once during start', async ({ page }) => {
+		await page.goto('/no-ssr/after-navigate');
+		await expect(page.locator('p')).toHaveText('enter 1');
+	});
 });
 
 // TODO SvelteKit 3: remove these tests

packages/kit/test/apps/basics/test/cross-platform/client.test.js

@@ -257,7 +257,7 @@ test.describe('Navigation lifecycle functions', () => {
 		);
 	});
 
-	test('afterNavigate properly removed', async ({ page, clicknav }) => {
+	test('onNavigate returned function is only called once', async ({ page, clicknav }) => {
 		await page.goto('/navigation-lifecycle/after-navigate-properly-removed/b');
 		await clicknav('[href="/navigation-lifecycle/after-navigate-properly-removed/a"]');
 		await clicknav('[href="/navigation-lifecycle/after-navigate-properly-removed/b"]');

packages/kit/types/index.d.ts

@@ -1007,7 +1007,7 @@ declare module '@sveltejs/kit' {
 	}
 
 	/**
-	 * - `enter`: The app has hydrated
+	 * - `enter`: The app has hydrated/started
 	 * - `form`: The user submitted a `<form>` with a GET method
 	 * - `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
 	 * - `link`: Navigation was triggered by a link click
@@ -1083,7 +1083,7 @@ declare module '@sveltejs/kit' {
 	export interface AfterNavigate extends Omit<Navigation, 'type'> {
 		/**
 		 * The type of navigation:
-		 * - `enter`: The app has hydrated
+		 * - `enter`: The app has hydrated/started
 		 * - `form`: The user submitted a `<form>`
 		 * - `link`: Navigation was triggered by a link click
 		 * - `goto`: Navigation was triggered by a `goto(...)` call or a redirect