What is the difference between client-side navigation and page reloads in SvelteKit?

Answer

SvelteKit provides client-side navigation for a smooth SPA-like experience. When a user clicks a <a> link on the same origin, SvelteKit intercepts it, runs the target page's load functions, and renders the new page without a full page reload — preserving the scroll position, open connections, and JavaScript state. Under the hood, SvelteKit fetches only the JSON data (from load functions), not the full HTML. Control navigation with import { goto } from '$app/navigation';: goto('/dashboard'). Disabling client navigation: <a href="/external" data-sveltekit-reload> forces a full page reload. data-sveltekit-noscroll prevents scroll reset. data-sveltekit-preload-data="hover" preloads data when hovering for instant navigation. Full page reloads happen only for external links, links with data-sveltekit-reload, and explicit invalidateAll() calls that cause full rerender.