# Streaming, snapshots, and other new features since SvelteKit 1.0

DevFeed: [Streaming, snapshots, and other new features since SvelteKit 1.0](<https://devfeed.tech/articles/streaming-snapshots-and-other-new-features-since-sveltekit-1-0-3035.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/streaming-snapshots-sveltekit>)

Author: Geoff Rich, Rich Harris

Published: 2023-02-21T00:00:00Z

Content type: article

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [Streaming](<https://devfeed.tech/topics/streaming.md>), [Promise](<https://devfeed.tech/topics/promise.md>)

Tags: [await](<https://devfeed.tech/tags/await.md>), [new-features](<https://devfeed.tech/tags/new-features.md>), [streaming](<https://devfeed.tech/tags/streaming.md>), [svelte](<https://devfeed.tech/tags/svelte.md>)

## AI overview

This article describes SvelteKit features shipped since version 1.0, focusing on streaming non-essential data from nested promises in server load functions. It explains that pages can begin rendering before nested data resolves, while hosting support determines whether responses are streamed or buffered.

## Source excerpt

The Svelte team has been hard at work since the release of SvelteKit 1.0. Let's talk about some of the major new features that have shipped since launch: streaming non-essential data, snapshots, and route-level config. Stream non-essential data in load functions SvelteKit uses load functions to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn't essential - the user won't see any part of the new page until all the data is ready. There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from load and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don't start fetching until the client renders, and you're also having to break SvelteKit's load convention. Now, in SvelteKit 1.8, we have a new solution: you can return a nested promise from a server load function, and SvelteKit will start rendering the page before it resolves. Once it completes, the result will be streamed to the page. For example, consider the following load function: export const const load: PageServerLoadload: PageServerLoad = () => { return { post: anypost: fetchPost(), streamed: { comments: any; }streamed: { comments: anycomments: fetchComments() } }; }; SvelteKit will automatically await the fetchPost call before it starts rendering the page, since it's at the top level. However, it won't wait for the nested fetchComments call to complete - the page will render and data.streamed.comments will be a promise that will resolve as the request completes. We can show a loading state in the corresponding +page.svelte using Svelte's await block: <script lang="ts"> import type { PageData } from './$types'; export let data: PageData; </script> <article> {data.post} </article> {#a