SvelteKit load functions are the primary mechanism for fetching data before rendering a page or layout. They run on the server (and optionally on the client for client-side navigation).

Load Function Types

Universal Load (+page.js / +layout.js)

Runs on both server and client. Can access browser APIs but cannot use server-only modules.

export const load = async ({ params, fetch, url }) => {
  const res = await fetch(`/api/posts/${params.slug}`)
  const post = await res.json()
  return { post }
}

Server Load (+page.server.js / +layout.server.js)

Runs only on the server. Can access cookies, headers, server-only modules, and databases directly.

export const load = async ({ cookies, locals, params }) => {
  const user = await db.findUser(locals.userId)
  return { user }
}

Page vs Layout Data

  • Page data is specific to one route. Defined in +page.js.
  • Layout data is shared across all child routes. Defined in +layout.js. Child pages and layouts can access parent layout data via await parent().

Key Concepts

The Page Object

The $page store (from $app/stores) provides reactive access to the current page’s data, params, url, and route info in components.

Fetch in Load Functions

SvelteKit provides a server-side fetch that works the same as the browser API. It respects cookies and can fetch from internal API routes. External fetch is also supported, including credential forwarding.

Cookies and Headers

Server load functions have access to cookies (with get, set, delete) and request.headers. Changes to cookies in load functions are reflected in the response.

URL Data

Load functions provide url with search params, allowing data loading to depend on query string values.

Using parent()

Call await parent() to access data from parent layouts, enabling composition of data dependencies.

Advanced Patterns

Parallel Loading

Multiple load functions at the same level run in parallel. Use the await parent() pattern carefully to avoid unnecessary serialization.

Re-running Load Functions

Load functions re-run when:

  • The URL changes (params, URL search params)
  • The page is accessed via a direct navigation
  • invalidate(url) or invalidateAll() is called
  • Server load functions re-run on every server request by default

Streaming

Return promises from load functions to enable streaming — the page renders immediately with fallback content while the promise resolves.

export const load = async () => {
  return {
    streamedData: new Promise(async (resolve) => {
      const data = await fetchSlowApi()
      resolve(data)
    })
  }
}

Avoiding Waterfalls

Be mindful of the data loading waterfall pattern. Load independent data in parallel, and only await parent data when truly needed.

See Also