レンダリング

レンダリングとは、記述したコードをユーザーインターフェースに変換するプロセスです。ReactとNext.jsでは、コードの一部をサーバーまたはクライアントでレンダリングできるハイブリッドWebアプリケーションを作成できます。このセクションでは、これらのレンダリング環境、戦略、およびランタイム間の違いを理解するのに役立ちます。

基礎

まず、3つの基本的なWeb概念に慣れておくと役立ちます。

• アプリケーションコードを実行できる環境：サーバーとクライアント。
• ユーザーがアプリケーションを訪問または操作したときに開始されるリクエスト-レスポンスのライフサイクル。
• サーバーとクライアントのコードを分離するネットワーク境界。

レンダリング環境

Webアプリケーションをレンダリングできる環境は、クライアントとサーバーの2つです。

• クライアントとは、ユーザーのデバイス上のブラウザを指し、アプリケーションコードをサーバーにリクエストします。その後、サーバーからのレスポンスをユーザーインターフェースに変換します。
• サーバーとは、データセンター内のコンピューターを指し、アプリケーションコードを保存し、クライアントからのリクエストを受信して、適切なレスポンスを返します。

歴史的に、開発者はサーバーとクライアントのコードを記述する際に、異なる言語（例：JavaScript、PHP）とフレームワークを使用する必要がありました。Reactを使用すると、開発者は同じ言語（JavaScript）と同じフレームワーク（例：Next.jsまたは選択したフレームワーク）を使用できます。この柔軟性により、コンテキストを切り替えることなく、両方の環境向けにシームレスにコードを記述できます。

ただし、各環境には独自の機能と制約があります。したがって、サーバーとクライアント用に記述するコードは常に同じではありません。データフェッチやユーザー状態の管理など、一方の環境に他方よりも適した特定の操作があります。

これらの違いを理解することは、ReactとNext.jsを効果的に使用するための鍵です。サーバーおよびクライアントコンポーネントのページで、違いとユースケースについて詳しく説明しますが、ここでは基礎の構築を続けます。

リクエスト-レスポンスのライフサイクル

一般的に、すべてのウェブサイトは同じリクエスト-レスポンスのライフサイクルに従います。

1. ユーザーアクション: ユーザーがWebアプリケーションとやり取りします。これは、リンクをクリックする、フォームを送信する、またはブラウザのアドレスバーに直接URLを入力することなどが考えられます。
2. HTTPリクエスト: クライアントは、要求されているリソース、使用されているメソッド（例：GET、POST）、および必要に応じて追加データに関する必要な情報を含むHTTPリクエストをサーバーに送信します。
3. サーバー: サーバーはリクエストを処理し、適切なリソースで応答します。このプロセスには、ルーティング、データフェッチなど、いくつかのステップが含まれる場合があります。
4. HTTPレスポンス: リクエストを処理した後、サーバーはHTTPレスポンスをクライアントに返します。このレスポンスには、ステータスコード（リクエストが成功したかどうかをクライアントに伝えるもの）と要求されたリソース（例：HTML、CSS、JavaScript、静的アセットなど）が含まれます。
5. クライアント: クライアントはリソースを解析してユーザーインターフェースをレンダリングします。
6. ユーザーアクション: ユーザーインターフェースがレンダリングされると、ユーザーはそれと対話し、プロセス全体が再び開始されます。

ハイブリッドWebアプリケーションを構築する上で重要な部分の1つは、ライフサイクルで作業をどのように分割し、ネットワーク境界をどこに配置するかを決定することです。

ネットワーク境界

Web開発において、ネットワーク境界とは、異なる環境を分離する概念的な線のことです。たとえば、クライアントとサーバー、またはサーバーとデータストアなどです。

Reactでは、最も理にかなっている場所であればどこにでもクライアント-サーバーのネットワーク境界を配置することを選択できます。

舞台裏では、作業はクライアントモジュールグラフとサーバーモジュールグラフの2つの部分に分割されます。サーバーモジュールグラフにはサーバーでレンダリングされるすべてのコンポーネントが含まれ、クライアントモジュールグラフにはクライアントでレンダリングされるすべてのコンポーネントが含まれます。

モジュールグラフを、アプリケーションのファイルが互いにどのように依存しているかを視覚的に表現したものと考えると役立つかもしれません。

Reactの"use client"規約を使用して境界を定義できます。また、"use server"規約もあり、これはReactにサーバーで計算作業を行うように指示します。

ハイブリッドアプリケーションの構築

これらの環境で作業する場合、アプリケーションのコードの流れが単方向であると考えることが役立ちます。言い換えれば、応答中、アプリケーションコードはサーバーからクライアントへと一方向に流れます。

クライアントからサーバーにアクセスする必要がある場合は、同じリクエストを再利用するのではなく、サーバーに新しいリクエストを送信します。これにより、コンポーネントをどこにレンダリングし、ネットワーク境界をどこに配置するかを理解しやすくなります。

実際には、このモデルは開発者に、まずサーバーで何をG実行したいかを考え、その後その結果をクライアントに送信してアプリケーションをインタラクティブにするように促します。

この概念は、同じコンポーネントツリー内でクライアントコンポーネントとサーバーコンポーネントをどのように混在させるかを検討する際に、より明確になるでしょう。