How to avoid waiting for +page.js to load the data (on the client side)

[hubert-ix]

Let's say I've got a page displaying a list of products:

+page.js

<script>
export async function load() {
  let products = [];
  /* [call the database and load the products] */
  return { products };
}
</script>

+page.svelte

<script>
  export let data;
  let { products } = data;
</script>

{#if products.length}
<ul>
  {#each products as product}
  <li>
    {product.name}
  </li>
  {/each}
</ul>
{/if}

Ok, so that works well. If I first load this page, +page.js will run on the server, pass the data to +page.svelte, and sveltekit will render the page nicely. Then if I navigate to another page and come back to this page, +page.js will run on the client.

All good.

However, once +page.js is running on the client, when I click on the link going to that page, the site will pause while +page.js is loading the data. I can use $navigating to show some indication that it's loading, but the page will only render after the data has been passed to +page.svelte. So there is a distinct lag between clicking on a link and the page being displayed.

What I want instead is to render the page immediately after clicking on the link, and then load the data.

So of course I can do this in +page.svelte:

<script>
  import { onMount } from 'svelte';
  
  let products = [];
  isLoading = true;
  
  onMount(async () => {
    products = /* call the database and load the products */
    isLoading = false;
  });
</script>

{#if isLoading}
  [some nice loading animation]
{:else}
  {#if products.length}
  <ul>
    {#each products as product}
    <li>
      {product.name}
    </li>
    {/each}
  </ul>
  {/if}
{/if}

Here I don't use +page.js at all. So when clicking on a link to that page, it will display the page instantly with the nice loading animation. When the data is loaded it will be displayed. But of course we don't get SSR.

So I thought of mixing the two:

+page.js

<script>
import { browser } from '$app/environment';

export async function load() {
  let products = [];
  if (!browser) {
    /* [call the database and load the products] */
  }
  return { products };
}
</script>

+page.svelte

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';
  
  export let data;
  let { products } = data;
  isLoading = browser;
  
  onMount(async () => {
    if (browser) {
      products = /* call the database and load the products */
      isLoading = false;
    }
  });
</script>

{#if isLoading}
  [some nice loading animation]
{:else}
  {#if products.length}
  <ul>
    {#each products as product}
    <li>
      {product.name}
    </li>
    {/each}
  </ul>
  {/if}
{/if}

The idea is:

• If we're on the server, the data is loaded in +page.js
• It's passed to +page.svelte where we skip the code in onMount
• If we're on the client, the data won't be loaded in +page.js
• Instead it will be loaded in +page.svelte in onMount

The result is that we get SSR on the first load of the page, and when we click on a link leading to this page from within the site we don't get any lag - it loads instantly and displays the nice loading animation until the data is loaded and then displayed.

There are however two issues with this:

1. When we first load this page from the server, it will also be run from the client. So we will load the data twice. It's not a big deal, but not very elegant.
2. We have to write the code that loads the data twice: in +page.js and in +page.svelte. This could be avoided by creating a custom endpoint, but it's something additional to write.
3. It seems a bit boilerplatery

So my question is: am I missing something and is there a better way to do it? (probably)

[geoffrich]

This sounds like the feature request #7213

[kyjus25]

Also of my #8573

Seems like this topic is becoming very asked about

[fehnomenal]

You could try to return a promise from load nested inside a prop to avoid automatically awaiting it (https://kit.svelte.dev/docs/load#promise-unwrapping). Only on the server you await the promise inside of load. You can than use {#await} blocks to display a loading indicator/skeleton if the promise was not already awaited. If you use the event.fetch there should be no second request on the client.

[NormandoHall]

A useful tip aside your question. onMount only runs in client side. There is no need to check for browser inside it. The only one that runs in client and server side is onDestroy.

https://svelte.dev/docs#run-time-svelte-ondestroy

[hubert-ix]

Thanks for all the replies. I'm going to try returning a promise from +page.js

In the meanwhile there is still something I'm not quite getting:

When I first load the page (for example by refreshing it), +page.js runs on the server and the html markup in +page.svelte is rendered with SSR. So I would have expected data.products to be populated in +page.svelte.

However if I do console.log(data.products), it is always an empty array - yet the page renders correctly with all the products being displayed on the page.

So, is the page rendered with SSR and then is all the javascript in +page.svelte run again in the client?

[hubert-ix]

Ok, so after playing with promises I came up with something that works. It's not super elegant as I have to nest the promise into one the props (to avoid it being automatically resolved in +page.js), but it works:

• the page is generated using SSR, and the data is only loaded once
• on subsequent browsing, once the client side, the page will appear instantly - no lag

If anyone can think of a better way to achieve it, I'm all ears.

+page.js

<script>
import { browser } from '$app/environment';

export async function load() {
  let promiseFromServer = {};
  let responseFromServer = false;
  // we nest the promise so that it's not resolved automatically 
  // (we only want it resolved if we're on the server)
  promiseFromServer.promise = [get the data]; 
  if (!browser) {
    // if we're on the server, we resolve the promise
    responseFromServer = await promiseFromServer.promise;
  }
  return { promiseFromServer, responseFromServer }
}

+page.svelte

<script>
  export let data;
  let { promiseFromServer, responseFromServer } = data;
  let products = [];
  let isLoading = true;
  
  loadData();
  
  async function loadData() {
    let response;
    if (!responseFromServer) {
      // if we're here it means we're on the client side (because the promise was not resolved)
      response = await promiseFromServer.promise;
    }
    else {
      // if we're here it means we're on the server side
      // the promise has already been resolved and we've got the data
      // that's how we can get SSR
      response = responseFromServer;
    }
    products = response.products;
    isLoading = false;
  }
</script>

{#if isLoading}
  [some nice loading animation]
{:else}
  {#if products.length}
  <ul>
    {#each products as product}
    <li>
      {product.name}
    </li>
    {/each}
  </ul>
  {/if}
{/if}

[fehnomenal]

This seems overly boilerplaty. Does the following not work?

// +page.js
import { browser } from '$app/environment';

export const load = async ({ fetch }) => {
  const products = loadAllTheProducts(fetch);
  if (!browser) {
    await products;
  }
  return {
    products: { promise: products },
  };
};

<!-- +page.svelte -->
<script>
  export let data;
</script>

{#await data.products.promise}
  [some nice loading animation]
{:then products}
  {#if products.length}
    <ul>
      {#each products as product}
        <li>
          {product.name}
        </li>
      {/each}
    </ul>
  {/if}
{/await}

You can even add a {:catch error} block.

[hubert-ix]

Yes, I agree it's very boilerplate, but I can't find any other solution that works. Your code is more elegant but for some reason it doesn't work with SSR. I've tried it and if you look at the page source the markup is not generated.

[GitYing]

Is this still the best way you know? I also want to make sure the first load everything or at least my content is ssr then after that I would like the page to act like the fetch script is inside the onMount to give it that instant response feel

[fehnomenal]

Sorry for not following up. My proposal cannot work as nested promised returned from universal load functions are restarted on the client. So even when changing the return to products: { promise: browser ? products : await products } the data will be SSR'd and present in the html but the promise will be started again immediately after page load.

In my project I use server load functions and there it works as expected because the promise is not restarted but streamed to the client. I decide to await the promises based on event.isDataRequest: products: { promise: event.isDataRequest ? products : await products }.

Can you use a +page.server file?

[david-plugge]

Have a look at my example repo: david-plugge/sveltekit-lazy-data