レンダリング
レンダリングとは、記述したコードをユーザーインターフェースに変換するプロセスです。ReactとNext.jsを使用すると、サーバーサイドとクライアントサイドでコードの一部をレンダリングできるハイブリッドWebアプリケーションを作成できます。このセクションでは、これらのレンダリング環境、戦略、ランタイムの違いを理解するのに役立ちます。
基礎知識
まず、以下の3つの基本的なWeb概念に慣れておくと良いでしょう:
- アプリケーションコードが実行される環境: サーバーとクライアント
- ユーザーがアプリケーションを訪問または操作したときに開始されるリクエスト-レスポンスライフサイクル
- サーバーコードとクライアントコードを分離するネットワーク境界
レンダリング環境
Webアプリケーションがレンダリングされる環境には、クライアントとサーバーの2つがあります。
- クライアントとは、ユーザーのデバイス上のブラウザを指し、アプリケーションコードを要求するリクエストをサーバーに送信します。その後、サーバーからのレスポンスをユーザーインターフェースに変換します。
- サーバーとは、アプリケーションコードを保存し、クライアントからのリクエストを受信して適切なレスポンスを返すデータセンター内のコンピュータを指します。
従来、開発者はサーバーとクライアント用のコードを記述する際に異なる言語（JavaScript、PHPなど）やフレームワークを使用する必要がありました。Reactを使用すると、開発者は**同じ言語（JavaScript）と同じフレームワーク（Next.jsなど）**を使用できます。この柔軟性により、コンテキストを切り替えることなく両方の環境用のコードをシームレスに記述できます。
ただし、各環境には独自の機能と制約があります。そのため、サーバーとクライアント用に記述するコードが常に同じとは限りません。データ取得やユーザー状態の管理など、特定の操作は一方の環境に適している場合があります。
これらの違いを理解することは、ReactとNext.jsを効果的に使用するための鍵です。詳細な違いとユースケースについてはサーバーコンポーネントとクライアントコンポーネントのページで説明します。まずは基礎を固めていきましょう。
リクエスト-レスポンスライフサイクル
大まかに言えば、すべてのWebサイトは同じリクエスト-レスポンスライフサイクルに従います:
- ユーザー操作: ユーザーがWebアプリケーションと対話します。リンクのクリック、フォームの送信、ブラウザのアドレスバーへの直接URL入力などが含まれます。
- HTTPリクエスト: クライアントはHTTPリクエストをサーバーに送信し、要求されているリソース、使用されているメソッド（
GET、POSTなど）、必要に応じて追加データを含みます。 - サーバー処理: サーバーはリクエストを処理し、適切なリソースで応答します。このプロセスにはルーティング、データ取得などいくつかのステップが含まれる場合があります。
- HTTPレスポンス: リクエストの処理後、サーバーはHTTPレスポンスをクライアントに返します。このレスポンスにはステータスコード（リクエストが成功したかどうかを示す）と要求されたリソース（HTML、CSS、JavaScript、静的アセットなど）が含まれます。
- クライアント処理: クライアントはリソースを解析してユーザーインターフェースをレンダリングします。
- ユーザー操作: ユーザーインターフェースがレンダリングされると、ユーザーはそれと対話でき、プロセス全体が再び開始されます。
ハイブリッドWebアプリケーションを構築する際の主要な部分は、ライフサイクル内で作業をどのように分割し、ネットワーク境界をどこに配置するかを決定することです。
ネットワーク境界
Web開発において、ネットワーク境界は異なる環境を分離する概念的な線です。例えば、クライアントとサーバー、またはサーバーとデータストアなどです。
Reactでは、最も理にかなっている場所にクライアント-サーバーのネットワーク境界を配置することを選択できます。
内部的には、作業はクライアントモジュールグラフとサーバーモジュールグラフの2つの部分に分割されます。サーバーモジュールグラフにはサーバーでレンダリングされるすべてのコンポーネントが含まれ、クライアントモジュールグラフにはクライアントでレンダリングされるすべてのコンポーネントが含まれます。
モジュールグラフは、アプリケーション内のファイルが互いにどのように依存しているかを視覚的に表現したものと考えると良いでしょう。
Reactの"use client"規約を使用して境界を定義できます。また、"use server"規約もあり、これはReactにサーバー上で計算作業を行うように指示します。
ハイブリッドアプリケーションの構築
これらの環境で作業する際、アプリケーション内のコードの流れを一方向と考えると役立ちます。言い換えると、レスポンス中にアプリケーションコードは一方向に流れます: サーバーからクライアントへ。
クライアントからサーバーにアクセスする必要がある場合は、同じリクエストを再利用するのではなく、サーバーに新しいリクエストを送信します。これにより、コンポーネントをどこでレンダリングし、ネットワーク境界をどこに配置するかを理解しやすくなります。
実際には、このモデルにより、開発者はアプリケーションをインタラクティブにする前に、まずサーバーで実行したいことを考えるようになります。
この概念は、クライアントコンポーネントとサーバーコンポーネントを同じコンポーネントツリー内で組み合わせる方法を見るとより明確になります。