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

Posted 2023-03-07

【中文标题】SvelteKit s-s-r - 如何在获取数据之前阻止服务器端渲染？

【英文标题】：SvelteKit s-s-r - how to block server-side render until data has been fetched?

【发布时间】：2021-07-25 17:23:53

【问题描述】：

我正在使用 SvelteKit，出于 SEO 的原因，我想使用完整的 s-s-r 并确保在传递到浏览器之前获取并呈现所有数据在服务器端。换句话说，所有对后端 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 阻止服务器端渲染？

【参考方案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>