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.
More Svelte / SvelteKit Questions
View all →- Intermediate What are Svelte custom stores and the store contract?
- Intermediate How does SSR (Server-Side Rendering) work in SvelteKit?
- Intermediate What are SvelteKit adapters?
- Intermediate What is the difference between prerendering, SSR, and CSR in SvelteKit?
- Intermediate How do you manage environment variables in SvelteKit?