CODEWITHSUNDEEP
svelteserver-side-renderingsveltekit
kooru_hi
kooru_hi

Reputation: 65

How does the universal load function load non-serializable data on server-side

In the svelte-kit tutorial for universal load functions, the following example +page.server.js file is given, which causes an internal server error, because server-side loading only works with serializable data, and a component is not serializable:

import component from './blue.svelte';

export function load() {
    return {
        color: 'blue',
        component
    };
}

When the filename is changed to +page.js, it works. What I don't understand is: as svelte-kit has server-side rendering by default for the first page visited, shouldn't this load function cause an error anyway if this is the first page visited? I tested it myself, and it seems to work fine. I don't understand why.

Upvotes: 1

Views: 437

Answers (1)

brunnerh
brunnerh

Reputation: 184216

There is SSR if it has not been disabled when using universal load, but the difference to the server load is, that the data never crosses the client/server boundary and thus does not need to be serialized.

The component along with its load function is built for the client and server. On the server, an SSR version is built which is also fully evaluated on the server; the data is not sent to the client.

When the page is then evaluated on the client, the universal load is called again during hydration, this time it executes the client-side code which imports a non-SSR version of the component. (When navigating to this page from somewhere else, this code is also loaded and executed.)

I was a bit surprised to find that this is working now, as that was not the case just a handful of minor versions ago. I could not find any reference to this in the change log, so maybe one should not rely on this functionality - as pointed out in a comment, this is documented behavior. One could also return a key that corresponds to a particular component and import it in +page.svelte instead.

Upvotes: 3

Related Questions