Next.jsはMPA？SPA？

こんにちはNaotoです。

Next.jsを学んでいると、RSC, SSR, CSR, ISR, SSG, SPA, MPAなど、いろんなワードが出てきます。

そして、考えれば考えるほど、何がどう繋がっているのか訳が分からなくなり、頭がおかしくなりそうだったため、一つずつ理解して潰していこうと思い、今回はMPA、SPAについて勉強してみました。

MPA、SPAについての理解はできているのですが、

「Next.jsはサーバーサイドでレンダリングするから、MPA?」

「でも、クライアントコンポーネントはSPAのように動くよな？」

となっていたため、

"Next.jsはMPAとSPAどっちなのか"

という部分に焦点を当てて勉強してみました。

※この記事は、Next.js App Routerについて記載しています。

結論

結論から述べると、

「Next.jsは、MPAでもSPAでもない、PESPA（両者のハイブリッド）である！」

です。

そもそもSPAやMPAという概念に当てはめることができない領域にきているという感じです。

では、上記結論に至った詳細を説明します。

まずは、MPA、SPAについて復習しました。

MPAとは？

• Multi Page Application

• ユーザーがインタラクティブな操作をするたびに、サーバーに通信し、サーバーから完成されたHTMLファイルを受け取って、ブラウザに表示する。
  →操作の度に通信時間が発生するため、インタラクティブな操作が多いWebアプリケーション（SNS, Todoアプリ, チャットアプリなど）に向いていない。

• 従来のWebサイト（コーポレートサイトなど）によく見られる。

SPAとは？

• Single Page Application

• クライアントとサーバー間の通信は初回アクセス時のみ。

• 初回アクセス時に、ほぼ空のHTML、CSS、大量のJavaScriptバンドルファイルをダウンロードし、クライアント側でJavaScriptを動かして、画面遷移やUIの更新を行っていく。

• 全ての処理がクライアント側で行われるため、動作が早く、ネイティブアプリのような体験を得られる。
  →インタラクティブな操作が多いWebアプリケーション（SNS, Todoアプリ, チャットアプリなど）に向いている。

• 初回アクセス時のJSバンドルファイルが重いため、初回アクセスに時間がかかる。
  →SEOに向いてない。

Next.jsはどっち？

上記を踏まえて、Next.jsはMPAとSPAのどちらになるのか調べてみました。

答えは、「どちらにも当てはまらない。」です。

MPAでない理由

Next.jsでは、Linkコンポーネントを使用した画面遷移はSPAとして動作するからです。

SPAとして動作する根拠は以下２つです。

①Route Cache

Next.jsには、Route Cacheというキャッシュ機能があります。

Route Cahceとは、一度訪問したページの情報をクライアント側にキャッシュとして残し、再度同じページを訪問した際にそのキャッシュの情報を使って素早く画面遷移を行う仕組みです。

この機能により、ページへの再訪の際は、サーバーとの通信なしに、画面遷移を行うことができます。

例） /a/sub1 にアクセスした後、/a/sub2 にアクセスした場合

/aまでの部分は、/a/sub1 にアクセスした際にキャッシュされた情報が使用され瞬時に画面に表示されます。

②Linkコンポーネントによるプリフェッチ

上記①の機能だけでは、初めてアクセスするページの時には、サーバとの通信が必要になるためMPAになります。

そこを補うのがLinkコンポーネントのプリフェッチ機能です。

Linkコンポーネントには、リンクが画面上に現れた際に、あらかじめ静的部分をバックグラウンドにてプリフェッチしてくれる機能があります。

そして、ユーザが実際にリンクをクリックした時には、プリフェッチされた画面を瞬時に表示し、その後に動的部分を取得します。（動的部分の取得中は、loading.jsやSuspenseのfallback UIが表示される）

よって従来のMPAのようなリンククリック後のページ更新はなく、SPAとして画面遷移を行うことができます。

上記の理由からNext.jsはMPAではないことが分かりました。

SPAではない理由

Next.jsは、完全SPAのReactアプリケーションとは違い、RSC等、サーバー上でレンダリングを含む多くの処理を行うため、もちろんSPAではありません。

（そもそもSPAの欠点を補うために生まれたのがNext.jsであるため、当たり前ですが。。）

では何なのか。

Next.jsはMPAではないが、SPAでもない。

では何なのか。

上記の通り、Next.jsでは、

ルート間の画面遷移は、SPAで行われるが、瞬時に表示されるのは静的部分のみ（＋loading.jsやSuspenseのfallback UI）で、動的部分は、SSRならサーバ上、CSRならクライアント上にてデータ取得された後に表示されます。

このようなアプローチを、PESPA（Progressive Enhanced Single Page Application）というそうです。

株式会社一創様の記事には、以下のように記載されていました。

PESPA（Progressive Enhanced Single Page Application）は、
Webアプリケーションの開発において、ユーザー体験を向上させるための新しいアプローチです。

PESPAは、まず最小限のHTMLとCSSをサーバーから送信し、
ユーザーがコンテンツを迅速に表示できるようにします。

次に、必要に応じてJavaScriptを追加してインタラクティブな機能を提供します。

この段階的なロードプロセスにより、PESPAはSEOの問題を解決し
、初期ロード時間を短縮し、ユーザーに優れたエクスペリエンスを提供します。

PESPAの基本概念は、まず静的なコンテンツを提供し、
次に動的なコンテンツをロードすることで、
ユーザーがページを読み込みながらも操作を続けられるようにすることです。

これにより、従来のSPAのように全てのリソースを一度にロードする必要がなくなり、
パフォーマンスの向上が図れます。

まさにNext.jsのことだと思いました。

以上のことから、
Next.jsは

"SPAやMPAには当てはまらない、PESPAという新しいアプローチになる。"

ということが分かりました！

最後に

今回は、Next.jsとMPA,SPAについて調べてみました。
ご指摘等ありましたら、ぜひコメントいただけると幸いです。

次回は、SSR, ISR, SSG等を理解するために、Next.jsのキャッシュについて学んでみようと思います。

最後までお読みいただきありがとうございました。