この記事を読んだ後に理解できること

• App Router（app directory）の概要
• React Server Componentsの概要

App Routerとは？

App Routerとは「React Server Components（Server Components）」を含め、Reactの最新機能を使ったアプリケーション構築を簡単にできるようにした概念的なものです。

Next.js13でリリースされた機能であり、バージョン13.4のリリース時にstable版となりました。

App Routerはリポジトリ内の「app」ディレクトリ配下にあるコンポーネントをデフォルトで「Server Components」として扱うことができます。

App Routerを使うメリットとは？

App Routerを使うメリットは、React Server Components（Server Components）等のReactの最新技術を使うことでサイトパフォーマンスに優れたWebサイト構築が可能なことです。

このメリットを活かす上でNext.js13の非常に重要な仕組みである「Server Components」と「Client Components」について理解する必要がありますので、今回はこちらについて解説します。

Client Componentとは

Client Componentとは、JavaScriptの実行、HTML、CSSの組み立てがクライアントサイド（ユーザ側）で行われるコンポーネントを指しています。




Client Componentsでは上の画像のようにアプリケーションが動作します。

• まず、ユーザがサーバに対してリクエストを送ります。ここでは、ショッピングサイトを仮定して、商品一覧ページを表示するリクエストを送っています。
• サーバからは圧縮されたHTMLとCSS、JavaScriptが返されます。
• ユーザのブラウザ上で、受け取ったHTML、CSSの組み立てが行われます。
  • この時、商品一覧情報を取得するJavaScriptが非同期処理で実行されます。
• 商品一覧情報のリクエストを受け取ったAPIサーバは、DB等を経由して、ユーザに商品情報一覧を返します。
• ユーザのブラウザでは、組み立てられたHTMLの中にJavaScriptで取得したデータを展開する作業が行われます。

いわゆるSPA（シングルページアプリケーション）の動作になります。
最近では、主流となった画面表示の方法となりますが、デメリットがいくつかあります。

Client Componentsはユーザ側（ブラウザ）でJavaScriptの実行、HTML、CSSの組み立てが行われるため、サイトパフォーマンスはユーザのデバイスや環境に依存してしまいます。

Server Componentsとは

Server Componentとは、JavaScriptの実行、HTML、CSSの組み立てがサーバ上で行われるコンポーネントを指しています。

Client Componentsでは、これらの動作はクライアント（ユーザのブラウザ等）で実行されていました。

Next.jsはサーバ機構を有しており、そのサーバでJavaScriptの実行、HTML、CSSの組み立てが可能になっています。

これにより、ユーザ環境に依存しないサイトパフォーマンスの最適化が実現可能になりました。




Server Componentsでは上の画像のようにアプリケーションが動作します。
（Client Components同様、ショッピングサイトを想定しています。また、画像の解説はDynamic Data Fetching及びDynamic Rendering時の挙動となります。）

• ユーザが商品一覧ページの表示をリクエストします。
• Next.jsのサーバは、リクエストを受けるとサーバ上でHTML、CSSの組み立てを行います。
  • この時、商品一覧情報を取得するJavaScriptが非同期処理で実行されます。
• 商品一覧情報のリクエストを受け取ったAPIサーバは、DB等を経由して、Next.jsのサーバに商品情報一覧を返します。
• Next.jsのサーバでは、組み立てられたHTMLの中にJavaScriptで取得したデータを展開する作業が行われます。
• サーバからユーザに対して組み立てられたHTMLが返却されます

これにより、ユーザ環境に依存しないサイトパフォーマンスの最適化が実現可能になりました。

Server Componentでできること・Client Componentでできること

Server Componentsの生成が実行されるタイミングについて

Server Componnentは大きく3つのタイミングで生成が実行されます。

1. ビルド時
Next.jsアプリケーションをビルドするタイミング（npm run build等）でServer Componentsの生成が行われます。ビルド時にサーバでHTML等の生成が行われるので、ユーザはすぐにコンテンツを見ることができます。ただし、ビルド時にデータ取得を行うので、リアルタイムなデータ反映はできません。

2. 一定時間経過後
該当ページに最初のリクエストが送られてから一定時間経過後にそのページのServer Componentsの生成が行われます。
リアルタイムなデータ反映とまではいきませんが、概ねパフォーマンスを維持したまま新しい情報の配信が可能となります。


3. リクエスト時
ユーザからリクエストを受け取ったタイミングでHTML等の生成がサーバで行われる。これにより、リアルタイムなコンテンツを提供が可能になります。ただしリクエストを受けてからデータ取得、HTML、CSSの組み立て等が行われるので、パフォーマンスは少し落ちます。

Next.js13では、1のビルド時にデータを取得することをStatic Data Fetching、ビルド時に生成したHTMLをユーザの画面上に表示することをStatic Renderingと定義しています。

2の一定時間経過後にServer Componentsが生成されるようにするにはStatic Data Fetchingのオプションであるrevalidateを設定する必要があります。


3のリクエスト時にサーバ上でデータの取得を行うことをDynamic Data Ferching、リクエスト時に生成したHTMLをユーザの画面上に表示することをDynamic Renderingと定義しています。

なぜServer Componentsを使う必要があるのか

Client Componentsだけでもアプリケーションは作ることができます。

Server ComponentsはClient Componentsと比較して、以下のようなメリットが存在します。

- パフォーマンスが高い
- Googleのクローラーが認識できる
- SEOの向上につながる

パフォーマンスについては、先ほど解説したとおりで、ユーザの環境に依存しない画面表示ができるためです。

一般的にClient Componentsで構成されるアプリケーションをSPA（シングルページアプリケーション）と呼びます。

SPAはリアルタイムな更新が可能であったりUI（ユーザインターフェース）的に優れているのですが、Googleのクローラーからは正確に認識されづらいというデメリットがあります。

Googleのクローラーに正確に認識されることによって、Googleなどの検索エンジンの検索結果で上位に表示されるようになります。

しかし、Googleのクローラーはせっかちなところがあるので、HTML、CSSの組み立てまでは待ってくれますが、JavaScriptで取得したデータを展開させるところまでは待ってくれません。

そのため、Googleのクローラーはデータが入っていないHTMLをそのWebページのコンテンツとして認識するので、コンテンツが充実していないと判断し、検索結果で上位表示をしないようになります。

Server Componentsを使うことによって、これを避けることができます。

Next.js12以前と比較して理解するServer Components

Next.js12以前にもNext.js13のServer Componentsのような仕組みはあります。
しかし、Server Componentsより柔軟性に欠けています。

上記のようにNext.js12以前は、ページ単位でのみサーバの処理を設定することができました。

そのため、ページ内の一部のみでリアルタイムな情報を反映させたいが、その他のページ全体はその必要性がないといったケースでも全体をSSR（Dynamic Rendering）させるしかなかったのです。

例えばですが、以下のようなケースです。

• ヘッダーにユーザ名を表示させた状態でページを表示したい
• ユーザ名を更新した場合は、そのデータがヘッダーに表示されるようにしたい
• その他のページ内のコンテンツはリアルタイムな更新が求められない

パフォーマンスで見るとSSGの方が優れているのですが、このようなケースでかつSEOを考慮したい場合は、SSRで対応するしかありません。

Next.js13のServer Componentsはコンポーネント単位でサーバの処理を設定することができるため、上記のようなケースに対応することができます。

さいごに

今回は、App Routerを使う上で前提知識として求められる「Server Components」と「Client Components」について解説しました。