Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

Streaming#352

Draft
Rich-Harris wants to merge1 commit intomain
base:main
Choose a base branch
Loading
fromstreaming
Draft
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line numberDiff line numberDiff line change
@@ -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}+++
```
Original file line numberDiff line numberDiff line change
@@ -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.'
}
]
}
];
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<nav>
<a href="/">home</a>
<a href="/blog">blog</a>
</nav>

<slot />
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
<p>home</p>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
import * as db from '$lib/server/data.js';

export function load() {
return {
summaries: db.getSummaries()
};
}
Original file line numberDiff line numberDiff line change
@@ -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>
Original file line numberDiff line numberDiff line change
@@ -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>
Original file line numberDiff line numberDiff line change
@@ -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
};
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
<script>
export let data;
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>
Original file line numberDiff line numberDiff line change
@@ -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)
}
};
}
Original file line numberDiff line numberDiff line change
@@ -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}
[8]ページ先頭
©2009-2025 Movatter.jp