ガイド →このページを編集

なぜreact-serverを使うべきか?

ここでは次の質問に答えることとしましょう: なぜ @lazarv/react-serverを使うべきか?願わくはあなたがなぜこのフレームワークを利用すべきか、そしてこのフレームワークを次のプロジェクトで利用することが良い選択であることの答えを手に入れられるでしょう。

「私は、Viteを使って React Server Components と Server Functions を活用したかったため、@lazarv/react-server を作成しました❤️ ほとんどの小規模なアプリにとって、Next.js は過剰であり、重く、動作が遅すぎました。私は、Node.js でシンプルな JavaScript ファイルを実行するのと同じような軽快な開発体験を求めていました。このフレームワークは、できる限り特定の考え方に縛られない（non-opinionated）設計を目指しており、ほぼ何でも実現できます。唯一の制約は、独自の React バージョンを使用することですが、プロジェクトに React をインストールする必要すらありません。フレームワークにすべて含まれているからです。このフレームワークを作ること、そしてこのドキュメントを作成することを楽しんだのと同じくらい、皆さんにも楽しんで使っていただければ嬉しいです。」 - lazarv

@lazarv/react-server は、Next.js / Remix / Astro と最もよく比較されるフレームワークです。 特定のライブラリをベースとして使用し、以下のような機能をサポートしている場合、そのソリューションを「メタフレームワーク」とみなすことができます。

このフレームワークは、最新の技術を積極的に活用し、高速な開発プロセスを求める方 に最適です。 また、アプリケーションの構築方法や動作を完全にコントロールしたい場合にもこのフレームワークはぴったりの選択肢となるでしょう。

@lazarv/react-serverの目標は、以下の機能を備えたメタフレームワークを提供することです:

React Server Components を使用すると、アプリケーションのどの部分を静的にし、どの部分を動的にするかを開発者が自由に制御 できます。完全にサーバサイドレンダリングされたアプリケーションを、クライアントサイドの JavaScript なしで構築することも可能です。 ただし、クライアントコンポーネントを活用すれば、プログレッシブエンハンスメントの考え方に基づいてインタラクティブな要素を追加できることも念頭に置きましょう。

React Server Components を用いた データ取得はシンプルですが、習得には難しい部分があります。 通常とは異なるマインドセットが必要になりますが、開発者はコンポーネントの描画に必要なデータを「いつ取得し、どのように処理し、クライアントへ送るか」を自由にコントロール できます。

ES モジュールは、JavaScriptの現在であり未来です。 モジュールのインポート・エクスポートの規格として、すでに すべての最新のブラウザと Node.js でサポート されています。 ある問題に対してネイティブな解決策があるなら、それを使うのが最善です。 ES モジュールは、JavaScript におけるモジュール管理のネイティブな解決策 です。 これは、かつて jQuery が必要不可欠だった時代から、すべての jQuery の機能が最新のブラウザに組み込まれたことで不要になったのと同じ流れ です。 ES モジュールも同様に、これからの標準として確立されています。

Vite は 高速な開発サーバ であり、Rollup をベースにした軽量なバンドラー です。 ES モジュールを活用し、優れた開発体験を提供します。

すでに多くのフレームワークが Vite を採用しており、Astro、Nuxt.js、SvelteKit、SolidStart、Qwik などでも使用されています。

👉 why Vite もぜひ読んでみてください！

プラグインは フレームワークを拡張する最適な方法 です。シンプルに記述でき、簡単に導入できる ため、新機能の追加や既存機能のカスタマイズが可能になります。このフレームワークは コアが非常に小さく、柔軟に拡張可能 なので、独自のツールを持ち込んでカスタマイズできます。

実際に ファイルシステムベースのルーター自体がプラグインとして実装 されており、@lazarv/react-server では、Vite の React 向けプラグインやフレームワークに依存しないプラグイン も利用できます。

このフレームワークのすべての部分は 設定可能で拡張可能 です。もしそうでない場合、それは バグとして報告すべき問題 です。

React Server Components は、開発スタイルを PHP の方向へと大きく変えつつあります。 サーバ関数は、その流れをさらに推し進める存在です。 従来の PHP では、サーバサイドとクライアントサイドで異なる言語を使い分ける必要 がありました。 あなたはPHP と JavaScript の両方を扱わなければなりません。 しかし、React Server Components とサーバ関数を使えば、JavaScript なしでも、TypeScript または JavaScript だけでアプリケーション全体を構築できます。 サーバでもクライアントでも同じ言語を使うことができ、データ取得やレンダリングにも同じ言語を使用できます。すべてを同じ言語で統一できるのです。

これは特に TypeScript を使う場合に便利で、アプリケーション全体を型安全にすることができます！

高度なルーティングの設定や管理は難しく、アプリケーションをリファクタリングや再構築する際にはさらに厄介になります。 ファイルシステムベースのルーティングは、この問題に対する最適な解決策です。 @lazarv/react-server には 標準でファイルシステムベースのルーティング機能が組み込まれており、すぐに利用できます。 しかし、他のルーティングソリューションを使うことも、自分で独自のルーターを作成することも可能 です。 自分のエントリーポイントを指定してアプリケーションを実行すれば、自由にカスタマイズできます。

静的ページを作成する際には、Markdown や MDX のようなシンプルなツールを使ってページを作成するのが非常に簡単です。あなたのページはサーバコンポーネントとなり、MDX を使用することで Markdown ページ内に任意の React コンポーネントを使用することもできます。この機能により、このドキュメントウェブサイトの作成が非常に簡単になりました。このサイトのすべてのページは MDX を使用して作成されています。

また、任意の Remark や Rehype プラグインを使用して Markdown の設定を拡張することもできます。

フレームワークはサーバサイドレンダリングされたアプリケーションだけのためのものではありません。フレームワークを使用して静的なマルチページアプリケーションを作成することもできます。このようなフレームワークの最良の例はAstroです。@lazarv/react-serverもマルチページアプリケーションと静的生成をサポートしています。任意のページを静的HTMLページとしてエクスポートし、React Server Component形式の出力と一緒にクライアントサイドのナビゲーションを引き続き機能させることができます。アプリケーションをエクスポートした後でも、@lazarv/react-serverを使用してファイルを提供したり、任意の静的ファイルサーバを使用してアプリケーションをホストすることができます。

ユーザーがブラウザでJavaScriptを無効にしている場合でも、Reactサーバ関数はプログレッシブエンハンスメントをサポートします。これはアクセシビリティとSEOにとって素晴らしい機能です。クライアントサイドのJavaScriptなしで完全にサーバレンダリングされたアプリケーションを作成することができます。しかし、クライアントコンポーネントを使用することで、プログレッシブエンハンスメントに留意してインタラクティブな部分を追加することができます。

リンクとフォームがウェブの基本構成要素であるように、これらはサーバ機能を持つReact Server Componentsの基本構成要素でもあります。ページにリンクを追加し、フォームにサーバ関数を使用して、JavaScriptなしでアプリケーションを動作させることができます。ESモジュールを使用した遅延読み込み対応のクライアントコンポーネントにより、アプリケーションは高速で、どのブラウザでも動作します。

ストリーミング方式のサーバサイドレンダリングでは、ブラウザはページ全体がレンダリングされるのを待つ必要がありません。ページの最初の部分が準備でき次第、レンダリングを開始できます。これはアクセシビリティとSEOにとって素晴らしい機能です。また、アプリケーションがより速く感じられます。サーバサイドで Suspense を使用することで、サーバサイドの読み込みが快適になります。

ストリーミングされたページが読み込まれると、必要に応じてすぐにハイドレーションが開始され、クライアントコンポーネントが即座に動作し始めます。ページの読み込み中に新しいクライアントコンポーネントがレンダリングされると、新しいコンポーネントはレンダリングされ次第ハイドレーションされます。

ページのレンダリングが成功した後、フレームワークのキャッシュレイヤーを利用して完全に制御しながらレスポンスを保存し、次のユーザーのためにページの読み込みをほぼ瞬時にすることができます。また、再検証を使用してページが常に最新の状態であることを確認することもできます。

@lazarv/react-server は、デフォルトでインメモリキャッシュをサポートしていますが、あなたのユースケースに応じて最適な他のキャッシュ実装を使用することもできます。

このフレームワークは Vite を使用しているため、Vite の高速な React HMR 実装を活用しています。クライアントコンポーネントを使用していない場合でも、React HMR を使用して開発体験をより迅速かつ快適にすることができます。

アプリケーションを本番環境にデプロイする準備が整ったら、フレームワークの Node.js クラスター機能を使用してアプリケーションを超高速で実行できます。フレームワークはCPUのすべてのコアを使用してアプリケーションを実行します。これは本番環境へのビルドにとって素晴らしい機能です。

注意: この機能は、本番ビルドおよび node.js 環境でのみ利用可能です。

← ガイド: はじめようガイド: サーバーコンポーネント →