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

如上所述，答案是导出一个load函数（如此处所述），但只是添加一个工作示例：

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