メインコンテンツまでスキップ

レンダリング

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

基本​

まず、次の3つの基本的なWebの概念を理解しておくと便利です：

レンダリング環境​

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

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

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

しかし、各環境には独自の能力と制約があります。したがって、サーバーとクライアント用に書くコードは常に同じではありません。特定の操作（例：データの取得やユーザー状態の管理）は、ある環境により適しています。

これらの違いを理解することが、ReactとNext.jsを効果的に使用するための鍵です。詳細については、Server ComponentsおよびClient Componentsのページで取り上げますが、まずは基礎を続けていきましょう。

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

概して、すべての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"規約を使用して境界を定義することができます。また、"use server"規約もあり、特定の計算作業をサーバーで行うようにReactに指示します。

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

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

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

実際には、このモデルは開発者に、サーバーで何を実行するかについて最初に考えることを奨励し、その結果をクライアントに送り、アプリケーションをインタラクティブにします。

この概念は、同じコンポーネントツリー内でClient componentsとServer componentsを交互に配置する方法を学ぶときに明確になります。