SSR（サーバーサイドレンダリング）とMPA（マルチページアプリケーション）の関係を説明したものとして、最も適切なものはどれですか？

解説

正解は「SSRはHTMLをどこで生成するかの手法で、MPAは…」です。SSRはレンダリング（HTML生成）の場所、MPAはページ遷移の仕組みを表す言葉で、比べている軸がそもそも異なります。SSRとMPAはそれぞれ何を指すかSSR：リクエストを受けたサーバーがデータを取得し、HTMLを組み立ててブラウザに返す手法です。対になるのはブラウザ側でHTMLを組み立てるCSR（クライアントサイドレンダリング）です。MPA：リンクをクリックするたびに、ブラウザがサーバーから新しいHTML文書を丸ごと読み込み直す構成です。対になるのは1枚のHTMLをJavaScriptで書き換えて画面を切り替えるSPA（シングルページアプリケーション）です。PHPやRuby on Railsで作られた従来型のWebサイトは「SSRかつMPA」です。一方、MPAでもHTMLをビルド時に作り置きする静的サイトはSSRではありません。このように2つの軸は独立して組み合わせられます。各誤答の誤り「SSRはMPAの新しい呼び方」は、従来型サイトで両方が同時に成り立っていることから生まれた混同です。「SSRを採用するとページ遷移はすべて…」は、SSRと遷移方式を結び付けてしまっています。SSRでもリンクごとにHTMLを返せばMPAです。「MPAはHTMLをビルド時に…」は、MPAを静的サイトに限定している点が誤りで、リクエストごとにHTMLを生成するMPAは一般的です。Next.jsのSSRは遷移のたびにHTMLを取り直すわけではない「Next.jsはSSRだからMPAのように動く」と考えがちですが、SSRが効くのは主に最初のアクセスです。その後はLinkコンポーネントによる遷移がJavaScriptで行われ、SPAのように画面の差分だけが更新されます。<!-- MPA：クリックするとブラウザが新しいHTML文書を丸ごと取得する --> <a href="/about">About</a> // Next.js：初回はサーバーで生成したHTML、以降の遷移はページを再読み込みせずに描画 import Link from "next/link"; <Link href="/about">About</Link>そのため、ページ遷移時にグローバル変数が初期化されるといったMPAの前提でコードを書くと、状態が残ったままになるなどの不具合につながります。参考Next.js Docs: Link ComponentMDN: SPA（シングルページアプリケーション）