SvelteKit渲染随机道具在服务器和客户端之间是不同的

Question

我想在SvelteKit中制作一个具有随机参数的组件。问题是，当页面在服务器端呈现时，该参数所取的值与页面水合时的值不同。

例如，考虑这个组件：

<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>

当页面在服务器上呈现时，t和l取一些随机值，结果以HTML形式返回给浏览器。然而，一旦页面变得水合，t和l就会呈现不同的值。因此，长方体移动。

我不想让箱子动；相反，我希望服务器返回的随机值也能被客户端使用，这样就不会突然改变风格。如果页面是通过页面内路由器导航的，一切都很好；当页面由服务器呈现时，框才会移动。

如果我导出一个load函数，结果是一样的。服务器和客户端是否可以通过SvelteKit就随机值达成一致？

Answer 1

这里有几个选项：

1. 在onMount中设置随机数，使其仅在客户端上设置。然而，这将导致FOUC，因为盒子不会被服务器渲染

<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. 在加载函数中获取的服务器端点内生成随机数。由于SvelteKit在加载中缓存获取结果，因此在客户端和服务器上都应该使用相同的随机数

// 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>

就我个人而言，我更喜欢第二种选择，因为没有FOUC。

Answer 2

我认为您可以避免后端调用，并使用可预测的伪随机数生成器。

例如；https://github.com/davidbau/seedrandom

Answer 3

只能在服务器端使用.server.js/.server.ts文件来创建t和l。

您有一个文件mypage.server.ts:

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

然后在mypage.svelte:中

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

另请参阅：

Svelte教程中的

• 部分
• 我承诺在我的网站上修复相同的问题