PricingLoginStart free
Sveltejs Academy · レッスン

ReadableStreamによるストリーミング

+server.jsでWeb Streams APIを使用し、大きなレスポンスを段階的にストリーミングします。

レッスン 4/413 ステップ

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

ストリーミングする理由

大きなレスポンスは段階的に送信できるため、クライアントはすぐにデータの受信を開始できます。

ReadableStream API

標準のWeb Streams APIを使用して、ストリーミングレスポンスを構築します。

const stream = new ReadableStream({
  async start(controller) {
    for (const chunk of source) {
      controller.enqueue(new TextEncoder().encode(chunk));
    }
    controller.close();
  }
});
return new Response(stream);

Server-Sent Events

リアルタイム更新には、text/event-stream形式のデータをストリーミングします。

チャンク転送

HTTPは、キューに追加された各チャンクを準備でき次第、通信経路へ送信します。

ユースケース

リアルタイムログ、AIによるテキスト生成、ファイルのアップロードとダウンロード、進捗イベントなどに使用できます。

クライアント側

クライアント側でresponse.body.getReader()を使用して、ストリームを読み取ります。

バックプレッシャー

消費側の処理が遅いと、ストリームはデータの生成を一時停止します。生成側でブロッキング処理を行わないようにしてください。

クローズ処理

処理が完了したら、必ずcontroller.close()を呼び出してください。エラーが発生した場合はcontroller.error()を呼び出します。

アダプター

ストリーミングのサポートはアダプターによって異なります。adapter-nodeは動作しますが、一部のエッジランタイムには制限があります。

パフォーマンス

ストリーミングを使うと、Time to First Byte（最初の1バイトまでの時間）が短縮され、体感速度が大幅に向上します。

load と組み合わせる

SvelteKitのストリーミングloadは、時間の経過とともに解決されるPromiseを返します。これは通常のストリームとは異なります。

確認問題

ストリーミングの主な利点は何ですか？

対話的なレッスンで答える

まとめ

ReadableStreamをResponseでラップすると、+server.jsからチャンクを段階的にストリーミングできます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163
無料で学習を始めるコース全体を表示

よくある質問

「ReadableStreamによるストリーミング」レッスンは無料ですか？

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

「ReadableStreamによるストリーミング」で何を学びますか？

+server.jsでWeb Streams APIを使用し、大きなレスポンスを段階的にストリーミングします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ReadableStreamによるストリーミング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. +server.js：GET、POST、PUT、DELETE
  2. RequestとRequestEvent
  3. JSONレスポンスを返す
  4. ReadableStreamによるストリーミング
← Sveltejs Academyに戻る