レンダリング

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

基礎

まず、3つの基本的な Web の概念を理解しておくと役立ちます。

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

レンダリング環境

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

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

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

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

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

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

大まかに言えば、すべての Web サイトは同じリクエスト-レスポンスのライフサイクルに従います。

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

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

ネットワーク境界

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

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

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

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

Reactの"use client"規約を使用して境界を定義できます。また、サーバー上でいくつかの計算処理を行うようにReactに指示する"use server"規約もあります。

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

これらの環境で作業する場合、アプリケーションのコードの流れを一方向的と考えると役立ちます。つまり、レスポンス中、アプリケーションコードはサーバーからクライアントへと一方向に流れます。

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

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

この概念は、同じコンポーネントツリー内でクライアントコンポーネントとサーバーコンポーネントをどのようにインターリーブできるかを見ると、より明確になります。