React単体で作ったページとNext.jsで作ったページ。GoogleのBotがアクセスしたときの「最初に受け取るHTML」はどう違う？

解説

正解は「Reactは空、Next.jsは中身が詰まっている」です。React単体で作成したページは、ブラウザ（やBot）が最初に受け取るHTMLの中身が <div id='root'></div> のようにほぼ空っぽです。一方、Next.jsで作成したページは、最初から見出しやテキストなどのコンテンツがギッシリ詰まった状態のHTMLを受け取ります。「どちらも同じReactを使っているのに、なぜ？」と疑問に思うかもしれません。これこそが、Next.jsを採用する最大の理由の1つです。なぜReact単体のHTMLは「空っぽ」なのか？React単体（ViteやCreate React Appなどで構築）のアプリケーションは、CSR（クライアントサイド・レンダリング）という方式で動きます。CSRでは、サーバーはとりあえず「空のHTML」と「巨大なJavaScriptファイル」を返します。それを受け取ったブラウザ側（クライアント側）でJavaScriptが実行され、そこから初めて画面のパーツが作られていきます。そのため、JavaScriptを完璧に解釈できない一部のクローラー Botから見ると、「真っ白なページ」に見えてしまうリスクがあるのです。Next.jsがSEOに強いと言われる本当の理由一方のNext.jsは、SSR（サーバーサイド・レンダリング）やSSG（静的サイト生成）と呼ばれる方式（プレレンダリング）を標準でサポートしています。Next.jsは、ユーザー（やBot）からアクセスがあった際、あらかじめサーバー側でJavaScriptを実行し、完成されたHTMLを作ってから返してくれます。Botがアクセスした瞬間に文字情報やリンクがすべてHTML内に存在するため、クローラーがページの内容を正しく理解でき、SEO（検索エンジン最適化）に非常に有利に働きます。ユーザー体験（UX）への影響これはSEOだけでなく、人間のユーザーにとっても大きなメリットがあります。React単体のCSRでは、JavaScriptのダウンロードと実行が終わるまで画面が真っ白になったり、ローディングスピナーが回り続けたりします。Next.jsのように最初に完成したHTMLが届く仕組みだと、ブラウザは即座に画面を描画（FCP: First Contentful Paint）できます。ユーザーは「クリックした瞬間にページが表示された」と感じるため、離脱率の低下にもつながります。「Reactで十分」というケースももちろんありますが、「SEOを気にするWebメディアやECサイト」ではNext.jsが必須と言われるのは、こうした「最初のHTMLの作られ方」に決定的な違いがあるからです。