Using nondeterministic/random functions during SSR

[FeldrinH]

I have an function that uses random number generation (currently Math.random) that I want to use with SvelteKit during SSR.
As far as I can tell I have two suboptimal choices:

1. Put it in +page.ts load. In that case it gets rerun on the client causing the random value to change, which creates an unpleasant change in the page content after hydration.
2. Put it in +page.server.ts load. In that case I end up making an unnecessary request to the server during every client side navigation.

Is there a solution that allows me to avoid these drawbacks i.e. not make extra requests to the server but also not render the page twice with different values on initial load?

[echocrow]

if anyone stumbles across this question in 2026: these days sveltekit has hydratable(), which may solve this kind of problem:

• https://svelte.dev/docs/svelte/hydratable

whatever value is generated/returned in SSR will carry over into hydration, ensuring a hydration match and avoiding said unpleasent change as JS kicks in

[hyunbinseo]

I just learned about this. Thank you!

import { hydratable } from 'svelte';
const rand = hydratable('random', () => Math.random());

[rbozan]

With the caveat that you have to enable the experimental async flag in the settings.

https://svelte.dev/docs/kit/remote-functions

[echocrow]

With the caveat that you have to enable the experimental async flag in the settings.

correct! as of today, you'll need to enable compilerOptions.experimental.async in order to use hydratable, even when the passed-in function is synchronous (aka no async/await is used). opting into remoteFunction is not necessary for this alone.

if you try to use hydratable without the experimental flag today, the compiler will throw an error and guide you to the necessary config.

in the (hopefully near) future, this will be enabled by default though. 🤞