機能 →このページを編集.md

ライブコンポーネント

ライブコンポーネントは、@lazarv/react-server の強力な機能であり、ページ全体を再読み込みすることなくリアルタイムで更新できるインタラクティブなコンポーネントを作成できます。これはチャットアプリケーション、ダッシュボード、コラボレーションツールなどの動的なコンテンツ更新を必要とするアプリケーションで特に有用です。

注記: ライブコンポーネントは @lazarv/react-server とシームレスに連携するよう設計されており、React Server Components の力を活用してスムーズで効率的なユーザー体験を提供します。ただし、これらはまだ実験的な機能であり、本番環境での使用には注意が必要です。

ライブコンポーネントにはいくつかの利点があります。

アプリケーションにライブコンポーネントを実装するには、コンポーネント内で "use live" ディレクティブを使用します。このディレクティブによりコンポーネントはライブ状態となり、リアルタイムで更新が可能になります。コンポーネントは非同期ジェネレータ関数で実装し、React Server Componentとしてコンポーネントの更新をyieldする必要があります。

以下にライブコンポーネントのシンプルな使用例を示します。

"use live";

export default async function* LiveComponent() {
  while (true) {
    yield <div>Current time: {new Date().toLocaleTimeString()}</div>;
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
}

ランタイムはこのコンポーネント用に特別なアウトレットを作成し、リアルタイムでの更新を可能にします。コンポーネントは毎秒再レンダリングされ、ページ全体の再読み込みやユーザーの操作を必要とせずに現在の時刻を表示します。

アプリケーションでライブコンポーネントを使用するには、他のReactコンポーネントと同様にインポートしてレンダリングします。

import LiveComponent from "./LiveComponent";

export default function Home() {
  return (
    <div>
      <h1>Live Component Example</h1>
      <LiveComponent />
    </div>
  );
}

これによりページ上にライブコンポーネントが表示され、毎秒更新されて現在の時刻が表示されます。

ライブコンポーネントは、サーバ関数やクライアントコンポーネントなど @lazarv/react-server の他の機能と組み合わせて使用することも可能です。これによりユーザーの入力やデータ変更にリアルタイムで応答する、リッチでインタラクティブなアプリケーションを作成できます。

各ライブコンポーネントインスタンスは独自のコンテキストで実行されるため、同一ページ上に同一ライブコンポーネントの複数インスタンスを配置でき、それぞれが独自の状態と更新を保持します。これにより複数のライブ更新を同時に処理できる複雑なインタラクティブUIを作成できます。

注記: ライブコンポーネント機能の最新情報にご期待ください。"use live: broadcast" がまもなく提供開始予定です。これにより複数のライブコンポーネントへの更新を一括で配信できるようになり、アプリケーション全体の状態と更新の管理が容易になります。

ライブコンポーネントは、サーバーとクライアント間のWebSocket接続を確立するために、内部でsocket.ioを利用しています。これによりサーバーはクライアントにリアルタイムで更新をプッシュでき、ライブコンポーネントはページ全体を再読み込みすることなく更新が可能になります。

"use live" ディレクティブを使用すると、ランタイムが自動的に必要なWebSocket接続を設定し、サーバーとクライアント間の通信を管理します。これにより基盤となる実装の詳細を気にすることなく、ライブコンポーネントの構築に集中できます。

注記: ライブコンポーネントはWebSocketsを基盤として構築されていますが、将来的にはランタイムがリアルタイム通信のための他のプロトコル（サーバー送信イベント（SSE）やHTTP/2プッシュなど）をサポートする可能性があります。これにより、アプリケーションの要件に最適なプロトコルを選択でき、異なるブラウザやデバイス間で最適なパフォーマンスと互換性を確保できます。

← 機能: マイクロフロントエンド機能: Workers →