SvelteKit + Supabase - get data onMount, keep pre-fetch working

Question

I am building the site which seems fairly simple show data on page from database.

I want it to be as fast as possible. It already works/partially works in 3 ways:

#Approach 1

+page.server.js -> gets data from Supabase

+page.svelte -> gets data and creates a website

Advantages:

- works

- pre-fetch (hovering over links) works

Disadvantages:

- wasting a lot of time (100-600ms) waiting for document. I don't know what is the reason for waiting. Just render site (logo, menu, header etc.) and when data is retrieved show it on page. Don't make user wait with blank site for document to get downloaded. As stated in here: https://kit.svelte.dev/docs/load "Once all load functions have returned, the page is rendered." As said, it seems to be a waste of time to wait

#Approach 2

As stated in here: https://languageimperfect.com/2021/02/17/data-fetching-in-svelte.html

I only use +page.svelte with onMount

Advantages:

- works

- there is no wasted time waiting for document to retrieve data

Disadvantages:

- pre-fetch does not work

So in general this approach is faster for 1-st time user, however is much slower for desktop users (as there is no pre-fetch on hover)

#Approach 3

Only use +page.svelte, in <script context="module"> import data from Supabase and show it as:

{#await getDataFromSupabase}
<p>Loading ...</p>
{:then data}

{:catch error}
<p style="color: red">{error.message}</p>
{/await}

Advantages:

- there is no wasted time waiting for document to retrieve data

- pre-fetch works

Disadvantages:

- does not work with any additional parameters. For example I am not able to user page path to retrieve only selected data based on my URL

So those are my 3 ways already tested.

How to improve it?

My goal seems fairly simple:

1)Load data as soon as possible, without waiting for document (Approach #1 does not do it)

2)Pre-fetch should work, so if user hoover over link on desktop it should already start building webpage (Approach #2 does not do it)

3)I should be able to use parameters from URL (Approach #3 does not do it)

Any idea how to achieve it?

I've tried 3 methods described above. All 3 have some disadvantages.

I am looking for creating blazing fast webpage

Answer 1

Have you tried leveraging a prop + reactivity? For example, In your page.ts (or page.server.ts in my case) return a user and a table

  return {
    user: session.user,
    tableData
  };

Then in your +page.svelte access it with

export let data;
$: ({ user, tableData } = data);

Answer 2

I'm still reading about it and found half-solution

Adding: export const prerender = true;

in all +page.svelte.js files

My page is on vercel and it seems as when anyone visits page (for example /product/123) it creates it's prerendered version, and when anybody visits the same url again it will be loaded much faster

Pre-render still works

I though I will be able to provide list of pages (as i have dynamic ones like /product/[slug]) in prerender:

prerender: {
  entries: [
    '/product/1',
    '/product/2',
    '/product/3'
  ],
},

However, I do not know why it does not work for me. Furthermore it would not be the full solution, as I have a lot of (really a lot of) links, so Vercel would need to visit each one during build to save html. It would kill my database...

So in summary: For now I implemented prerender. It is still worse than having js in +page.svelte inside as with this one page would have document load ~100 ms. Now (on second visit) it has ~400 ms, which is still much better than 800 ms without prerender

I do not use js in to load data from database, as with this approach prefetch does not work. So if I hover over link nothing happens. And page is loaded only after click

This is not the best solution. For 2000 url's (which Vercel gets automatically) build process lasts 50 minutes. Looking for another solution