SvelteKit Rendering a Random Prop is different between server and client

Question

I would like to make a component in SvelteKit which has a randomized parameter. The problem is that the value this parameter takes is different for when the page is rendered server-side versus when that page becomes hydrated.

For example, consider this component:

<script>
    export let t = Math.random() * 90
    export let l = Math.random() * 90
</script>

<div class="box" style="--t: {t}vh; --l: {l}vw;"></div>

<style>
    .box {
        position: fixed;
        top: var(--t); left: var(--l);
        width: 10vw; height: 10vh;
        background-color: black;
        transition: all 1s;
    }
</style>

When the page is rendered on the server, t and l take on some random value, and the result is returned to the browser as HTML. However, once the page becomes hydrated, t and l take on different values. As a result, the box moves.

I don't want the box to move; rather, I want the random value returned by the server to be used by the client as well so there isn't a flash of changing style. Everything's fine if the page is navigated via the in-page router; it's when the page is server-rendered that the box moves.

The result is the same if I export a load function. Is there a way with SvelteKit for the server and client to agree on a random value?

Postrider

I believe trying to reconcile server- and client-side values will be difficult if possible at all. I would instead prevent one or the other. You could set the values inside onMount to prevent server-side computation, or you could turn hydration off for the page (it has to be a page however, not merely a component) to use server-side values (you'd have to also verify this doesn't negatively impact your client-side navigation behavior, though). – Deposal

Answer 1

You have a few options here:

1. Set the random numbers in onMount so they're only set on the client. This will cause a FOUC, however, since the box won't be server rendered.

<script>
  import { onMount } from 'svelte';

  let t, l;

  onMount(() => {
    t = Math.random() * 90;
    l = Math.random() * 90;
  })
</script>

{#if t && l }
<div class="box" style="--t: {t}vh; --l: {l}vw;"></div>
{/if}

<style>
    .box {
        position: fixed;
        top: var(--t); left: var(--l);
        width: 10vw; height: 10vh;
        background-color: black;
        transition: all 1s;
    }
</style>

2. Generate the random numbers inside a server endpoint that you fetch in the load function. Since SvelteKit caches the result of fetches inside load, this should use the same random numbers on both client and server.

// random.json.js
export async function get() {
  return {
    body: {
      t: Math.random() * 90,
      l: Math.random() * 90,
    },
  };
}

<!-- index.svelte -->
<script context="module">
  export async function load({ fetch }) {
    // this will be cached, so it will be the same on client & server
    const result = await fetch('/random.json');
    const { t, l } = await result.json();
    return {
      props: {
        t, l
      }
    }
  }
</script>

<script>
    export let t;
    export let l;
</script>

<div class="box" style="--t: {t}vh; --l: {l}vw;"></div>

<style>
    .box {
        position: fixed;
        top: var(--t); left: var(--l);
        width: 10vw; height: 10vh;
        background-color: black;
        transition: all 1s;
    }
</style>

Personally, I like the second option better, since there's no FOUC.

Renaud

Nice, I didn't realize load worked that way, but now that I think about it it makes sense. Learned something new today ^^ – Postrider

Answer 2

I think you could avoid a backend call and use a predictable pseudorandom number generator.

For example; https://github.com/davidbau/seedrandom

Estellestella

Answer 3

You can use a .server.js/.server.ts file to create t and l only on the server side.

You have a file mypage.server.ts:

export const load = async () => {
    return { t: Math.random() * 90, l: Math.random() * 90};
};

And then in mypage.svelte:

<script>
    export let data;
    let { t, l } = data;
</script>
...

See also :

• Section in Svelte tutorial
• My commit fixing the same problem on my site

Shandrashandrydan