Home /Docs /SvelteKit Reference /Loading Data

Loading Data

SvelteKit Reference17 articles
Start here 1 essential article
Essential
18 min concept

Introduction to Load Functions

Learn how SvelteKit load functions work, why they exist, and how to use them to supply data to your pages before they render.

Read article →
All articles 16 in this topic
  1. 02
    Page Data vs Layout Data Learn how SvelteKit separates page and layout data loading, how data flows through layouts, and how to access it from any component.
    20 min reference
  2. 03
    The page Object from $app/state A guide to the SvelteKit page object: every property it exposes and how it stays reactive during navigation.
    18 min reference
  3. 04
    Universal vs Server Load Functions Learn the difference between +page.ts and +page.server.ts, when each runs, what each can access, and how to choose the right one.
    25 min reference
  4. 05
    Using URL Data in Load Functions Learn how to use params, url, and route inside SvelteKit load functions to build dynamic, filterable, and paginated pages with full type safety.
    20 min reference
  5. 06
    Fetch in Load Functions Why SvelteKit provides fetch in load functions, the five superpowers over native fetch, and how to avoid double-fetching during hydration.
    28 min reference
  6. 07
    Cookies and Headers in Server Load Read cookies and set headers in SvelteKit server load functions. Learn why Set-Cookie uses cookies.set() and how SSR caching works.
    30 min reference
  7. 08
    Locals and the Hooks Lifecycle How hooks.server.ts intercepts requests, populates event.locals with session data, and composes multiple hooks with sequence and handleError.
    28 min reference
  8. 09
    Using Parent Data in Load Functions Master parent() in SvelteKit: avoid waterfalls, fetch first, and merge layout data efficiently.
    15 min reference
  9. 10
    Errors and Redirects in Load Functions How to throw expected and unexpected errors, and redirect users from SvelteKit load functions — including the redirect trap that silently breaks route guards.
    28 min reference
  10. 11
    TypeScript and $types in Load Functions How SvelteKit generates $types for every route, which type to use in which file, how layout and page data merges at the type level, and how to fix common inference breakdowns.
    22 min reference
  11. 12
    Streaming Data with Promises in Load Functions Learn SvelteKit streaming - return unresolved promises in server load functions, render with {#await}, handle errors safely, and defer noncritical data.
    32 min reference
  12. 13
    Parallel Loading and Avoiding Waterfalls Learn how SvelteKit runs load functions in parallel, spots request waterfalls, avoids await parent() traps, and uses Promise.all patterns.
    33 min reference
  13. 14
    Rerunning Load Functions and Dependency Tracking Learn when SvelteKit reruns load functions, how dependency tracking works, and how invalidate(), invalidateAll(), depends(), and untrack() keep data fresh.
    32 min reference
  14. 15
    Prefetching with preloadData and preloadCode SvelteKit prefetching with data-sveltekit-preload-data, preload-code, preloadData and preloadCode — cache mechanics, saveData support, and when to use each.
    20 min reference
  15. 16
    Authentication Patterns in Load Functions SvelteKit auth in load functions: why layout guards fail on client navigation, how hooks and locals work, and building requireLogin() with getRequestEvent().
    35 min reference
  16. 17
    Capstone: Building a Pokémon Browser with PokéAPI Build a Pokémon browser with SvelteKit: URL params, parallel fetching, streaming, parent data, TypeScript, and invalidation with PokéAPI.
    46 min project

The Hackpile © 2026