Async data loading on the client

[mquandalle]

I try to implement the following data loading pattern.

I have a page with a title, an image and a comments section :

When the page is accessed directly, it's server-side rendered and the load function provide all the required data. So far so good.

However on the client, let's say that I already have in memory the title and imgUrl and I want to display the page instantly without waiting for the server to provide the comments section. When the client navigate :

1. Render the page instantly with page.data = {title, imgUrl, comments: undefined}
2. fetch __data.json from the server as usual
3. Rerender the page with the full data including the comments list page.data = await fetch('__data.json')

I think it's possible to implement this pattern by hand with something like :

//+page.js

export async function load() {
  if (server) {
    return await fetch('/__custom_load.json')
  }
  const { title, imgUrl } = get(myLocalSvelteStore)
  fetch('/__custom_load.json').then(updatePageDataStore)
  return { title, imgUrl, comments: undefined }
}

But the undisciplined usage of stores, and the creation of an additional endpoint doesn't satisfy me.
There should be a better way, do you have any idea?

[mquandalle]

One Sveltekit API I can imagine is having two load functions, one in +page.js providing title and imgUrl, and one in +page.server.js provinding comments.

And then we need a way to run load on the client 2 times, one without the data argument from the server, and a second time with it.

[spaultify]

Will putting the fetch for the comments inside onMount help you in your situation?

[mquandalle]

No because it needs to work on SSR as well

[j4w8n]

Once you know the client fetch has happened, call invalidate().

I'm not sure if this can only be called via a .svelte file, or if you can also call it in +page.js wrapped in an if (browser).