An extra fetch during first page load in Svelte

I am developing my site with Svelte, Flowbite-Svelte (UI) and TypeScript - and so far so good.

I have a component RandomBook.svelte:

<script lang="ts">
import { Card, Button, Badge, ButtonGroup, Tooltip } from "flowbite-svelte";
import { page } from "$app/stores";
import { BookManager } from "../lib/BookManager";
let book = $page.data.randomBook;
console.log(book.title);
async function refresh() {
const bm = new BookManager();
let rb = await bm.getRandomBook();
book = rb[0];
console.log(book.title);
}
</script>
<div>
<Card img={book.img}>
<Badge color="red" rounded>手气不错</Badge>
<h5
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
{book.title}
</h5>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">
【{book.region}】<a
href="/book/author/{book.author}"
class="hover:bg-sky-700">{book.author}</a
>
著{#if book.translated} | {book.copyrighter} 译{/if}<br />
收录于：{book.purchdate}，访问量：<Badge color="red"
>{book.vc.toLocaleString("en-US")}</Badge
>
</p>
<ButtonGroup>
<Button color="blue">详细信息 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z"/>
</svg></Button>
<Button on:click={refresh}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg></Button>
<Tooltip placement="right">随机换一本</Tooltip>
</ButtonGroup>
</Card>
</div>

(https://github.com/taylorren/rsywx.svelte/blob/main/src/widget/RandomBook.svelte)

The first call to invoke this component is in root's +page.svelte and +page.ts:

<script lang="ts">
import { Card, Button } from "flowbite-svelte";
import BookToday from "../widget/BookToday.svelte";
import LatestBook from "../widget/LatestBook.svelte";
import RandomBook from "../widget/RandomBook.svelte";
import Summary from "../widget/Summary.svelte";
import Qotd from "../widget/Qotd.svelte";
import ReadSummary from "../widget/ReadSummary.svelte";
//export let data;
</script>
<title>任氏有无轩 | 藏书、读书、博客、维客、资源</title>
<div class="grow">
<div class="flex flex-row flex-wrap m-8 gap-4 justify-center items-baseline">
<LatestBook />
<Summary />
<RandomBook />
<BookToday />
<Qotd/>
<ReadSummary/>
...

/** @type {import('./$types').PageLoad} */
import { ReadManager } from "../lib/ReadManager";
import { BookManager } from "../lib/BookManager";
import { MiscManager } from "../lib/MiscManager";
export async function load() {
const bm:BookManager= new BookManager();
const mm:MiscManager=new MiscManager();
const rm:ReadManager=new ReadManager();
const latestBook=await bm.getLatestBook(1);
const randomBook=await bm.getRandomBook(1);
const summary=await bm.getSummary();
const booksToday=await bm.getBookToday();
const readSummary=await rm.getSummary();
const qotd=await mm.getQotd();
return {
latestBook: latestBook[0],
randomBook: randomBook[0],
summary: summary,
booksToday: booksToday,
readSummary: readSummary,
qotd: qotd,
};
}

The site loads good but there is a small issue:

During my first visit to that page or a reload, the random book will show one book and then quickly switch to show another book.

I don't know how this could happen. The full code is located at https://github.com/taylorren/rsywx.svelte

The load function is executed both on the server and on the client.

The random book loaded by the server is shown first and is replaced by the client load.

To fix this: instead of using the "real" global fetch, use the fetch that is passed to the load function.

export async function load({ fetch }) {
...
bm.getRandomBook(1, { fetch });

 private async _getBook(uri: string, opts?: { fetch: any }): Promise<Book> {
const ret = await (opts?.fetch ?? fetch)(uri);

By using this special fetch from SvelteKit the client re-uses the server responses from the server load.

https://kit.svelte.dev/docs/load#making-fetch-requests