Work-arounds to have both +page.ts and +page.server.ts running (former gets data from latter)

[205g0]

I assume that running both aforementioned isn't possible, so the two options I'd have are (use case: running some post-processing on the client):

• Paring +page.js with +server.ts
  • no type safety from latter to former
• Paring stuff running in <script /> in +page.svelte paired with +page.server.ts
  • can get a bit crowded in <script /> or the need of a second .ts file called from +page.svelte

Is this correct, did I forget anything or other alternatives?

[geoffrich]

You can have both +page.ts and +page.server.ts. The return value of the load function in +page.server.ts will be passed as the data property passed to the +page.ts load. See the docs:

Universal load functions are called with a LoadEvent, which has a data property. If you have load functions in both +page.js and +page.server.js (or +layout.js and +layout.server.js), the return value of the server load function is the data property of the universal load function's argument.

So if you have this server load:

// +page.server.ts
const load = () => {
  return { numbers: [1, 2, 3] }
}

the universal load in +page.ts will get the server load return in data

// +page.ts
const load = ({ data }) => {
  // data is { numbers: [1, 2, 3] }
  return { serverData: data.numbers, vowels: ['a', 'e', 'i'] }
}

[205g0]

Thanks and good to know! Can I run the +page.ts as blocking, so +page.svelte renders once former is completed?

[geoffrich]

Do you mean have +page.svelte render as the +page.ts load is still fetching data? Sounds related to #7213.

[205g0]

I've actually meant the opposite (it blocks rendering till fetched) which seems to be the default behavior. Still thanks for your help 🙂

[flawnn]

@geoffrich What I didn't really understand in the documentation although is this snippet:

+page.js and +layout.js files export universal load functions that run both on the server and in the browser

I thought the universal load functions run only in the browser? How can I influence whether it's server-side or browser executed?

[geoffrich]

Universal load functions will run on the server during the initial request if you have SSR enabled, since it provides data that the page needs to render. After hydration, it will only run in the browser.

The only way to prevent a universal load function from running on the server is to disable SSR, which is not recommended in most situations.