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 函数（如 here 所述），但只是添加一个工作示例：

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

SvelteKit SSR - 如何在获取数据之前阻止服务器端渲染？

SvelteKit SSR - how to block server-side render until data has been fetched?

svelte

svelte-3

sveltekit