Sveltekit 加载器在获取加载函数时答案

【问题标题】：Sveltekit loader while fetching in load functionSveltekit 加载器在获取加载函数时
【发布时间】：2023-01-09 10:39:14
【问题描述】：

我在 SvelteKit 中有一个加载函数。它获取一些数据。

有没有办法在加载函数解析之前显示加载程序？或者有一些 SSG 会在 SSR 解决后更新？任何使流程更流畅而不是无法将反馈返回给用户的方法......

<script context="module">
        export const async load = ({ fetch }) => {
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            return {
                data: await response.json()
            }
        }
</script>

<script>
        export let data;
</script>

<img src={data.message} alt="Dog image" />

我想要一个加载程序直到加载完成或一些默认数据值直到加载完成以获得更好的用户体验。我不想把它移到onMount，因为我想在SSR 上调用一个api。

我正在寻找初始 CSR 的组合，直到 SSR 加载完成。我希望这也适用于初始负载，而不仅仅是在导航时。

【问题讨论】：

标签： svelte sveltekit svelte-component svelte-store

【解决方案1】：

当然，最简单的方法是您可以像文档中那样等待获取

https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941?version=3.46.4

<script>
    const fetchImage = (async () => {
        const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
    })()
</script>

{#await fetchImage}
    <p>...waiting</p>
{:then data}
    <img src={data.message} alt="Dog image" />
{:catch error}
    <p>An error occurred!</p>
{/await}

或者任何替代方法，例如分配反应变量也应该有效

【讨论】：

我正在为 SSR kit.svelte.dev/docs/loading 使用 sveltekit 内置的“加载”功能。想象一下，您将 fetchImage 放入其中，这样它就会在服务器端发生，但我也希望 <p>...waiting</p> 直到加载函数解析。这样我就有了 SSR，但也没有黑屏。你的例子是纯粹的 CSR 不是吗？
你能提供代码吗？所以我可以更好地理解这个问题:)
afaik SSR 不需要任何加载状态。如果数据准备好，SSR 应该返回数据。你上面提到的问题我假设它发生在加载函数之外
我添加了评论

【解决方案2】：

跟踪load功能进度的加载状态将在1.0版本后实现，希望很快，通过引入一个特殊的路由文件+loading.svelte查看问题https://github.com/sveltejs/kit/issues/7213和Richhttps://github.com/sveltejs/kit/issues/7213#issuecomment-1318758519的回复

【讨论】：