0Pricing
Sveltejs Academy · レッスン

loadでPromiseを使ったデータストリーミング

未解決のPromiseをloadから返し、初期HTMLの後にデータをストリーミングします。

「loadでPromiseを使ったデータストリーミング」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

ストリーミングを使う理由

ストリーミングによる読み込みでは、遅いデータの解決を待たずにページを描画できるため、体感パフォーマンスが向上します。

Promiseを返す

一部のプロパティを未解決のPromiseとして含むデータを返します。

export async function load() {
  return {
    fast: getFastData(),
    slow: getSlowData()   // promise, not awaited
  };
}

マークアップでのawait

ページ内で{#await}を使用して、ストリーミングされたPromiseを処理します。

{#await data.slow}
  <p>Loading...</p>
{:then result}
  <p>{result}</p>
{/await}

初期HTML

高速なデータはすぐに描画され、低速なデータは解決すると表示されます。

SuspenseのようなUX

データがストリーミングされている間は、スケルトンやスピナーを表示します。

複数のストリーミングプロパティ

複数のプロパティを個別にストリーミングし、それぞれを独自のタイミングで解決できます。

ストリーム内のエラー

awaitブロック内で{:catch}を使用して、拒否を処理します。

サーバーが必要

ストリーミングによる読み込みは、SSRが有効な場合にのみ機能します。

アダプターの制限なし

ほとんどのアダプター（node、vercel、cloudflare）はストリーミングをサポートしています。

型安全性

Promise<T>の値を返すことで、dataプロパティの型を正確に保てます。

使用する場面

低速なAPI、AI生成コンテンツ、大規模なクエリなど、初回描画を妨げたくない処理に適しています。

理解度チェック

loadからawaitしていないPromiseを返すと、どうなりますか。

まとめ

loadから未解決のPromiseを返してストリーミングし、マークアップ内で{#await}を使って処理します。

よくある質問

「loadでPromiseを使ったデータストリーミング」レッスンは無料ですか？

はい。「loadでPromiseを使ったデータストリーミング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「loadでPromiseを使ったデータストリーミング」で何を学びますか？

未解決のPromiseをloadから返し、初期HTMLの後にデータをストリーミングします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「loadでPromiseを使ったデータストリーミング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. loadでPromiseを使ったデータストリーミング
  2. 遅延読み込みとSuspense風UX
  3. +server.jsによるサーバーからのストリーミング
  4. プログレッシブハイドレーション
← Sveltejs Academyに戻る