機能

このセクションでは、@lazarv/react-serverの機能について紹介します。このランタイムは、サーバーサイドレンダリングのReactアプリケーションを構築するためのツールとユーティリティのセットを提供します。

CLIを使用してアプリのビルド、実行、デプロイする方法を学ぶことができます。これは開発ワークフローを簡単にするためのコマンドを提供するシンプルなツールです。

ランタイム独自の設定ファイルやVite設定ファイルを使用してアプリを設定する方法を学ぶことができます。@lazarv/react-serverはViteの上に構築されており、すべてのVite設定オプションとプラグインを使用してアプリをカスタマイズできます。

また、サーバーサイドレンダリング、ミドルウェア、ルートハンドラー、またはサーバー関数の実行中に完全なHTTPコンテキストにアクセスすることもできます。ランタイムはHTTPコンテキストにアクセスし操作するための一連のフックと関数を提供します。

さらに、ランタイムはサーバー上でデータをキャッシュするためのツールも提供しています。デフォルトではメモリ内にデータをキャッシュできますが、独自のキャッシュプロバイダーを構築することも可能です。

ランタイムはデフォルトでAES-256-GCM暗号化を使用して、すべてのサーバー関数識別子を暗号化します。これにより、レンダリング中に明示的に公開されなかったサーバー関数をクライアントが発見したり呼び出したりすることを防ぎ、追加の設定なしでサーバーサイドコードを安全に保ちます。受信するサーバ関数ペイロードも、設定可能なデコード上限によってゲートされ、サーバコードが実行される前にメモリ、深度、ストリームサイズを制限します — 細工されたRSCリプライによるDoS攻撃から保護します。

エラー処理については、組み込みのエラーバウンダリコンポーネントの使用方法や、独自のエラー処理を実装する方法について学ぶことができます。

また、部分的プリレンダリング、クラスターモード、ミドルウェアモードなど、便利な機能についても学ぶことができます。部分的なプリレンダリングは、アプリの一部だけをプリレンダリングしたい場合に便利です。クラスターモードは、マルチプロセス環境でアプリを実行したい場合に役立ちます。一方、ミドルウェアモードは、ExpressやNestJSなどの既存のサーバーでアプリをミドルウェアとして実行したい場合に便利です。

マイクロフロントエンドセクションでは、マイクロフロントエンドアーキテクチャを実装する方法について学ぶことができます。ランタイムはアプリでマイクロフロントエンドを実装するための一連のツールを提供しています。RemoteComponentコンポーネントを使用して、リモートURLからマイクロフロントエンドを読み込み、サーバーサイドレンダリングを使用してアプリ内でレンダリングできます。サーバーサイドレンダリングがサポートするiframeフラグメントをReactアプリケーションで使用できます！

ランタイムは"use worker"ディレクティブを使用して重い計算を別スレッドにオフロードするワーカーも提供しています。サーバーではワーカー関数はNode.js Worker Threadsで実行され、クライアントではWeb Workersで実行されます — すべて透過的なRSCベースのシリアライゼーションで。ワーカーはプレーンな値、SuspenseつきのReact要素、ReadableStream、遅延Promiseを返すことができます。

ライブコンポーネントを使用すると、ページ全体のリロードなしにリアルタイムで更新されるコンポーネントを作成できます。"use live"ディレクティブを使用して、サーバー上で非同期ジェネレーター関数を記述し、クライアントに逐次レンダリングをストリーミングできます — ダッシュボード、チャットアプリケーション、またはストリーミング更新が必要なUIに最適です。

ランタイムはMCP（Model Context Protocol）もサポートしており、サーバーサイドの関数、ツール、リソースを言語モデルやその他の自動化エージェントに公開するための構造化された方法を提供します。標準化されたインターフェースを通じて発見、検証、呼び出しが可能な型付きサーバー関数を定義でき、AIツールや自動化の統合が容易になります。

本番環境への準備として、ランタイムにはOpenTelemetry統合による組み込みのオブザーバビリティが含まれています。有効にすると、HTTPリクエスト、SSRレンダリング、サーバーアクション、ミドルウェアを分散トレースとメトリクスで自動的に計装します — 無効時はオーバーヘッドゼロです。

開発中は、組み込みのDevToolsパネルを有効にして、ブラウザから離れることなくアプリケーションの動作を検査できます。サーバープロセスの状態、RSCペイロードの内容、キャッシュの動作、ルートツリー、アウトレットのレイアウト、リモート/ライブコンポーネント、ワーカースレッド、サーバーログをカバーしており、必要になるまで邪魔にならないドッキング可能なパネルで表示されます。

@lazarv/react-serverがNext.js、TanStack Start、React Router、Wakuとどのように比較されるかは、比較表を参照してください。