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

【问题标题】：SvelteKit SSR - how to block server-side render until data has been fetched?SvelteKit SSR - 如何在获取数据之前阻止服务器端渲染？
【发布时间】：2021-07-25 17:23:53
【问题描述】：

我正在使用 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 阻止服务器端渲染？

【问题讨论】：

标签： svelte svelte-3 sveltekit

【解决方案1】：

你需要导出一个load函数：https://kit.svelte.dev/docs#loading

【讨论】：

谢谢 - 我错过了这一点，因为我从外部教程中（错误地）了解到 Svelte 没有固定的位置或方式来加载外部数据。

【解决方案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>

【讨论】：