Don't wait for server load to run client load and remove its data input

[mquandalle]

The documentation describes the data parameter of the load function as being very rarely needed, but it doesn't show an actual use case where it could come in handy. This gives me 2 ideas:

1. Why don't we automatically merge data from the two load functions instead of passing a parameter?

Sveltekit merges the data provided by different load functions from the layout hierarchy, so my intuition would be that load functions from +page.server.js and +page.js would also get merged:

// +page.server.js
export function load() {
  return { fromServer: 1 }
}

// +page.js
export function load() {
  return { fromClient: 1 }
}

// +page.svelte
export let data;
console.assert(data.fromServer === 1)
console.assert(data.fromClient === 1)

stackblitz

But instead we need to manually merge the data on the client using the data parameter:

// +page.js
export function load({ data }) {
  return { ...data, fromClient: 1 }
}

Which seems out of pace with the rest of the load API. I'm not convinced that the client overwriting data from the server is ever needed, but if that was the case I would expect to see something like await parent() or await serverLoad() instead of the ambiguous data parameter.

Related: #6459

2. The load function on the client could be run instantly without waiting on the server

This would be useful in the rare cases where the load function is expensive to run.

I'm also thinking that this pattern could allow “optimistic loading” by first rendering the page with +page.js data, and then re-render it with the data from the server as described in #6298. This is a separate idea which probably need better design consideration, but I think there should be an intuitive way to do partial loading with the data already present on the client.

[teemingc]

What about this use case?

// +page.server.js
export async function load() {
  // database is only accessible on server
  return { fromServer: await db.get() }
}

// +page.js
export async function load({ data, fetch }) {
  const url = `http://externalapi.com/something/${data.fromServer}`
  // trip between browser <-> external api instead of browser <-> server <-> external api
  const res = await fetch(url);
  return { fromClient: res.ok && await res.json() }
}

[toymil]

Yes, I am also using something similar in my app. So I would say the ability for client to r/w server data is definitely needed.