Universal rendering skeleton Loading in sveltekit

Question

I'm working on a SvelteKit project where I aim to achieve universal rendering. My goal is to have the first request be server-side rendered (SSR), and then switch to client-side rendering (CSR) for subsequent navigation. However, I'm encountering a problem that I can't seem to resolve.

The Problem:

When navigating from one page to another (e.g., from Home to Products), the navigation doesn't occur until the data for the target page is fully fetched. Ideally, I want the target page to load immediately and display a loader for individual components while the data is being fetched. This way, the user isn't stuck waiting for the entire page to load before the navigation occurs.

I've tried implementing this using Svelte's {#await ...} blocks in my component, but I'm facing a dilemma:

Using await inside the load function: SSR works fine, but the page navigation is delayed until the data is fetched.

Skipping await in the load function: Navigation occurs immediately, but SSR breaks.

My Setup:

Here's a simplified version of what I'm working with:

// +page.svelte

<script lang="ts">
  let { data } = $props();
</script>

<h1>TODOS</h1>
{#await data.todos}
  Loading ...
{:then todos}
  {#each todos as todo}
    <div>{todo.todo}</div>
  {/each}
{/await}

// +page.ts

type Todo = {
  id: number;
  todo: string;
  completed: boolean;
  userId: number;
};

export async function load({ fetch }) {
  const getTodos = () =>
    fetch('https://dummyjson.com/todos')
      .then(r => r.json())
      .then((r): { todos: Todo[] } => r.todos);
  return {
    todos: getTodos(), // await getTodos()
  };
}

// /products/+page.svelte

<script lang="ts">
  let { data } = $props();
</script>

<h1>Products</h1>
{#await data.products}
  Loading ...
{:then products}
  {#each products as product}
    <div>{product.title}</div>
  {/each}
{/await}

// /products/+page.ts

type Product = {
  id: number;
  title: string;
};

export async function load({ fetch }) {
  const getProducts = () =>
    fetch('https://dummyjson.com/products')
      .then(r => r.json())
      .then(r => r.products as Product[]);
  return {
    products: getProducts(), // await getProducts(),
  };
}

What I'm Looking For:

Has anyone managed to solve this problem, or is there a better approach that I'm missing? I'd love to get some advice or examples on how to properly implement universal rendering with SSR on the first request and smooth client-side navigation with individual component loaders afterward.

P.S i tried browser ? getTodos() : await getTodos() but I'm getting hydration mismatch error

You can use the navigating store to conditionally show a client-side loading indicator wherever you want in your SvelteKit app. Does that work for you? — Peppe L-G
– Peppe L-G, Commented Sep 2, 2024 at 7:06
Thank you, but it doesn't really suits my situation cause i need to show skeleton loader and when data is fetched it should be displayed with other skeletons loading. global loading component will not work for me — frezzzen
– frezzzen, Commented Sep 2, 2024 at 11:42
I can't help you more than saying it seems to not be supported ^^' I don't know about your specific use-case, but is lazily loading data like that really something you must have? The best apps loads all data immediately. The only use-case I can think of is when the "optional" data is huge, and it would delay loading the entire page, but then I imagine pagination/filtering of the optional data is a better solution in many cases. — Peppe L-G
– Peppe L-G, Commented Sep 2, 2024 at 14:00

Letrix · Accepted Answer · 2024-10-21 02:39:02Z

You can try using isDataRequest from the PageServerLoad arguments.

export const load: PageServerLoad = async ({ isDataRequest, params }) => {
    const data = get(params.id);

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

Link do docs about streaming promises:
https://kit.svelte.dev/docs/load#streaming-with-promises

Then you use the async block to display the skeleton.

This only helps if your promise takes a long time to resolve. It will not help against slow transfer speeds between server and client.

Note: it might not work in dev mode, so build the site first.

You can see more info about this method in this article:
https://geoffrich.net/posts/conditionally-stream-data/\ (Keep in mind that you don't need to nest the promise object, SvelteKit 1.x behavior)

There is a weird behavior that if you have your site behind Cloudflare, the CSR navigation will not finish until the promises behind it do. If you use direct public IP access it works fine.

Collectives™ on Stack Overflow

Universal rendering skeleton Loading in sveltekit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related