Skip Navigation

Scott Spence

Passing SvelteKit +page.server.ts data to +page.ts

2 min read
Hey! Thanks for stopping by! Just a word of warning, this post is over 1 year old, . If there's technical information in here it's more than likely out of date.

I came across this issue when adding real-time analytics to my site, essentially what I wanted to do was get some analytics data from a server endpoint and pass that to the page.

In SvelteKit you can have different ways to get data onto a page, which I’ve detailed it in the past, what I didn’t cover then was what do you do when you have both a +page.server.ts and a +page.ts file returning data.

The +page.server.ts will run first then then pass anything down to the +page.ts (child) file, let’s look at a super simple example. I’ll have a +page.server.ts and a +page.ts files that both return the some data.

First the +page.server.ts file:

import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
  return {
    page_server_data: { message: 'hello world' },

Then the +page.ts file:

import type { PageLoad } from './$types'

export const load: PageLoad = async ({ parent, data }) => {
  await parent()
  let { page_server_data } = data
  return {
    page_data: { message: 'hello world' },

In the +page.ts file we can access the data and the parent the (+page.server.ts file) then await the parent to get the data from the +page.server.ts file.

On the +page.svelte file we can access the data from both files:

<script lang="ts">
  import type { PageData } from './$types'

  export let data: PageData

<pre>{JSON.stringify(data, null, 2)}</pre>


  "page_server_data": {
    "message": "hello world"
  "page_data": {
    "message": "hello world"

This is the same approach if you’re doing this with a +layout.server.ts and +layout.ts files.

Hope this helps anyone who comes across this.

There's a reactions leaderboard you can check out too.

Copyright © 2017 - 2024 - All rights reserved Scott Spence