SvelteKit SSR - как заблокировать рендеринг на стороне сервера до тех пор, пока данные не будут получены?

Question

Я использую SvelteKit и по причинам SEO я хотел бы использовать полный SSR и гарантировать, что все данные будут извлечены и обработаны на стороне сервера перед доставкой в ​​браузер. Другими словами, все вызовы внутреннего API должны быть завершены до того, как будет доставлен ответ начальной страницы.

Однако из документации мне неясно, как этого добиться. (Возможно, я что-то упустил.)

Я пробовал следующее, но это просто полностью пустое тело:

      <script>
    let promise = fetch('https://swapi.dev/api/people/1/')
        .then((response) => response.json());
</script>

{#await promise then character}
<main>
    <h1>Your character</h1>
    Name is {character.name}
</main>
{/await}

Кто-нибудь знает, как заблокировать рендеринг на стороне сервера с помощью SvelteKit до тех пор, пока данные не будут получены?

Answer 1

Вам нужно экспортировать loadфункция: https://kit.svelte.dev/docs#loading

Answer 2

Просто чтобы добавить рабочий пример к ответу выше:

      <script context="module">
    /**
     * @type {import('@sveltejs/kit').Load}
     */
    export async function load({ page, fetch, session, context }) {
        const url = `https://swapi.dev/api/people/1/`;
        const res = await fetch(url);

        if (res.ok) {
            return {
                props: {
                    character: await res.json()
                }
            };
        }

        return {
            status: res.status,
            error: new Error(`Could not load ${url}`)
        };
    }
</script>

<script lang="typescript">
    export let character: any;
</script>

<main>
    <h1>Your character:</h1>
    <p>Name is {character.name}</p>
    <p>Hair color is {character.hair_color}</p>
</main>