Conditionally Stream PageData : Universal vs Server

[enda]

Describe the bug

Hi,

I'm facing a challenge with handling data streaming only conditionally for client-side rendering.

To stream some data only for CSR, I use in my +page.server.ts file :

export const load: PageServerLoad = async ({ fetch, isDataRequest }) => {
  // fetching some data ...
  return {
    someData: isDataRequest ? someData : await someData,
  };
};

This setup works perfectly for server-side rendering (SSR), but since the data is fetched from a public API, I want the client to make the request itself and not the server when we are not in a server-side context.

To accommodate this, in my +page.ts file, I have the following implementation:

import { browser } from '$app/environment'; // replace isDataRequest
export const load: PageLoad = async ({ fetch }) => {
  // fetching some data ...
  return {
    someData: browser ? someData : await someData,
  }
};

While this approach works, it leads to an undesired effect. Since the page.ts file is executed both by the server and the client, the page initially renders with someData having a value from the server. Subsequently, it redraws with someData being a Promise, causing the {#await} block to enter a pending status. Finally, when the promise resolves, it triggers another redraw.

I understand that this behavior is expected due to the nature of SvelteKit's universal rendering, where PageLoad is called by both the server and the client. However, I'm seeking guidance on the correct approach to handle this scenario.

I'm looking for suggestions on how to effectively handle data streaming for client-side rendering in SvelteKit without causing the unwanted redraw effect. Any insights or best practices would be greatly appreciated.

Reproduction

Use +page.server.ts OR +page.ts with +page.svelte.
Both +page.server.ts and +page.ts do the same exact work

// +page.server.ts
export const load: PageServerLoad = async ({ fetch, isDataRequest }) => {
  const someData = async () => {
    // fetching some data
    await new Promise(r => setTimeout(r, 5000));

    return {};
  })();

  return {
    someData: isDataRequest ? someData : await someData,
  };
};

// +page.ts
import { browser } from '$app/environment'; // replace isDataRequest
export const load: PageLoad = async ({ fetch }) => {
  const someData = async () => {
    // fetching some data
    await new Promise(r => setTimeout(r, 5000));

    return {};
  })();

  return {
    someData: browser ? someData : await someData,
  }
};

// +page.svelte
<script lang="ts">
  export let data: PageData;
</script>

{#await data.someData}
  loading some data ...
{:then mydata}
  {JSON.stringify(mydata)}
{/await}

Logs

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
    Memory: 271.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.0 - ~/.nvm/versions/node/v18.20.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.0/bin/npm
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.2.1
  npmPackages:
    svelte: ^4.0.5 => 4.2.12

Severity

annoyance

[david-plugge]

Firstly it feels odd to use both server and shared load in this case. The shared load function should be enough here. But i dont think you can stream data coming from +page.ts loads?
You could also take a look at svelte-query to cache the data client side and provide your loading strategy of choice.

Edit: since you dont stream data in ssr, the shared load only approach should work fine here