SSR data on page load (for SEO) and skeleton loader on client side navigation

[bhaskarGyan]

Is it possible to load the page with data on SSR and show a skeleton loader for client-side navigation (for better perceived performance)?

I checked the new Streaming with promises in the load function (https://kit.svelte.dev/docs/load#streaming-with-promises) but with this, the SEO will be impacted
and without this, for users on a slow network, the app will look unresponsive on CSR

is this something that can be achieved with the current sveltekit?

I know in Nuxt 3.0 there is an option to use Lazy in useFetch which works on Both SSR and CSR

[geoffrich]

I've been experimenting with using isDataRequest to conditionally await the slow data. If it's a data request, then we're doing client-side routing (post-initial page load) and stream the promise. If it's not a data request, then it's the initial page load and we want the data to be fully resolved for SSR.

import type { PageServerLoad } from './$types';
import { delay } from '$lib/util';

export const load: PageServerLoad = async ({ isDataRequest }) => {
    const slowData = delay(1000).then(() => '🥱');
    return {
        now: new Date().toLocaleTimeString(),
        lazy: {
            thing: isDataRequest ? slowData : await slowData
        }
    };
};

[BhagatAO]

@geoffrich , I tried your approach, I have a +server.ts file which handles both SSR and CSR with the help of isDataRequest during SSR it works properly whereas during CSR it throws the serialisable error .
The sample code would be something like this:

export const load = (async ({ locals, isDataRequest }) => {
    const getOrders = async () => {
        const url = orders;
        const { orders, total } = await get(url, locals);
        return {
            orders, 
            total
        };
    };

    return {
        streamed: {
            fetchOrders: isDataRequest ? getOrders() : await getOrders()
        }
    };
}) satisfies PageServerLoad;

The problem is it works in dev mode but not when we build and I am using node adapter