streaming data

Author: Rich Harris

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/README.md

@@ -0,0 +1,55 @@
+---
+title: Streaming data
+path: /blog/welcome
+---
+
+Ordinarily, SvelteKit will load all the data your page needs _before_ rendering it. In general this provides a better user experience than showing loading spinners and skeleton UI everywhere. But sometimes you know that some data will be slow to load, and that it would be better to render the rest of the page instead of waiting for it. In these cases, we can return promises from `load` functions.
+
+In this exercise, we've added comments to the blog from [earlier](page-data), via a `getComments` function in `src/lib/server/data.js` with a simulated delay.
+
+Update `src/routes/blog/[slug]/+page.server.js` to load the comments:
+
+```js
+/// file: src/routes/blog/[slug]/+page.server.js
+import { error } from '@sveltejs/kit';
+import * as db from '$lib/server/data.js';
+
+export function load({ params }) {
+	const post = db.getPost(params.slug);
+	
+	if (!post) throw error(404);
+
+	return {
+		post,
++++		promises: {
+			comments: db.getComments(params.slug)
+		}+++
+	};
+}
+```
+
+> If `comments` is a top-level property of the returned object, SvelteKit will automatically await it. For that reason, we must nest it inside an object. Here, we've called that object `promises`, but the name is not important.
+
+Inside `src/routes/blog/[slug]/+page.svelte` we can now use an [`{#await ...}](await-blocks) block to render placeholder UI while the data loads:
+
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
+<script>
+	export let data;
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>
+
++++<h2>Comments</h2>
+
+{#await data.promises.comments}
+	<p>loading comments...</p>
+{:then comments}
+	{#each comments as comment}
+		<p><strong>{comment.author}</strong> {comment.content}</p>
+	{/each}
+{:catch}
+	<p>failed to load comments</p>
+{/await}+++
+```

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/lib/server/data.js

@@ -0,0 +1,75 @@
+export function getSummaries() {
+	return posts.map((post) => ({
+		slug: post.slug,
+		title: post.title
+	}));
+}
+
+export function getPost(slug) {
+	const post = posts.find((post) => post.slug === slug);
+
+	if (post) {
+		return {
+			slug: post.slug,
+			title: post.title,
+			content: post.content
+		};
+	}
+}
+
+export async function getComments(slug) {
+	// simulate delay
+	await new Promise((fulfil) => setTimeout(fulfil, 1000));
+
+	const post = posts.find((post) => post.slug === slug);
+	return post?.comments;
+}
+
+const posts = [
+	{
+		slug: 'welcome',
+		title:
+			'Welcome to the Aperture Science computer-aided enrichment center',
+		content:
+			'<p>We hope your brief detention in the relaxation vault has been a pleasant one.</p><p>Your specimen has been processed and we are now ready to begin the test proper.</p>',
+		comments: [
+			{
+				author: 'GLaDOS',
+				content: "This cake is great! It's so delicious and moist!"
+			},
+			{
+				author: 'Doug',
+				content: 'The cake is a lie'
+			}
+		]
+	},
+
+	{
+		slug: 'safety',
+		title: 'Safety notice',
+		content:
+			'<p>While safety is one of many Enrichment Center Goals, the Aperture Science High Energy Pellet, seen to the left of the chamber, can and has caused permanent disabilities, such as vaporization. Please be careful.</p>',
+		comments: [
+			{
+				author: 'Cave',
+				content: "Science isn't about WHY, it's about WHY NOT!"
+			}
+		]
+	},
+
+	{
+		slug: 'cake',
+		title: 'This was a triumph',
+		content: "<p>I'm making a note here: HUGE SUCCESS.</p>",
+		comments: [
+			{
+				author: 'GLaDOS',
+				content: "It's hard to overstate my satisfaction."
+			},
+			{
+				author: 'GLaDOS',
+				content: 'Aperture Science. We do what we must because we can.'
+			}
+		]
+	}
+];

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">home</a>
+	<a href="/blog">blog</a>
+</nav>
+
+<slot />

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<p>home</p>

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/blog/+layout.server.js

@@ -0,0 +1,7 @@
+import * as db from '$lib/server/data.js';
+
+export function load() {
+	return {
+		summaries: db.getSummaries()
+	};
+}

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/blog/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let data;
+</script>
+
+<h1>blog</h1>
+
+<ul>
+	{#each data.summaries as { slug, title }}
+		<li><a href="/blog/{slug}">{title}</a></li>
+	{/each}
+</ul>

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/blog/[slug]/+layout.svelte

@@ -0,0 +1,30 @@
+<script>
+	export let data;
+</script>
+
+<div class="layout">
+	<main>
+		<slot />
+	</main>
+
+	<aside>
+		<h2>More posts</h2>
+		<ul>
+			{#each data.summaries as { slug, title }}
+				<li>
+					<a href="/blog/{slug}">{title}</a>
+				</li>
+			{/each}
+		</ul>
+	</aside>
+</div>
+
+<style>
+	@media (min-width: 640px) {
+		.layout {
+			display: grid;
+			gap: 2em;
+			grid-template-columns: 1fr 16em;
+		}
+	}
+</style>

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/blog/[slug]/+page.server.js

@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import * as db from '$lib/server/data.js';
+
+export function load({ params }) {
+	const post = db.getPost(params.slug);
+	
+	if (!post) throw error(404);
+
+	return {
+		post
+	};
+}

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-a/src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let data;
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-b/src/routes/blog/[slug]/+page.server.js

@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit';
+import * as db from '$lib/server/data.js';
+
+export function load({ params }) {
+	const post = db.getPost(params.slug);
+	
+	if (!post) throw error(404);
+
+	return {
+		post,
+		promises: {
+			comments: db.getComments(params.slug)
+		}
+	};
+}

Diff for: content/tutorial/04-advanced-sveltekit/04-advanced-loading/04-streaming/app-b/src/routes/blog/[slug]/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let data;
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>
+
+<h2>Comments</h2>
+
+{#await data.promises.comments}
+	<p>loading comments...</p>
+{:then comments}
+	{#each comments as comment}
+		<p><strong>{comment.author}</strong> {comment.content}</p>
+	{/each}
+{:catch}
+	<p>failed to load comments</p>
+{/await}