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