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