はじめに

ReactとNext.jsの2つのフロントエンド技術を用いて同一内容のアプリを開発し、それらを比較しました。Reactのみを使用したもの（以下「ピュアReact」）とNext.jsを採用したものの両方を対象に、パフォーマンスとSEOの観点から検証を行いました。
今回の検証は、特に初学者や個人開発者の方々がアプリ開発を進める際の選択肢として役立つことを目的としています。シンプルなアプリを題材にしているため、同じような規模のプロジェクトを進める際の参考になるはずです。ReactとNext.jsの違いを理解する手助けができれば幸いです。

前提 + 概要

２つのアプリの主な違いは下記です。それぞれのアプリのデプロイ先が違うので、少なからずパフォーマンスに影響していることが考えられます。

① ピュアReact

フロント・バックエンド：App Runner
シンプルなSPA（Single Page Application）

② Next.js

フロントエンド：Vercel + Cloudflare(Proxy)
バックエンド：App Runner
Next.jsはデフォルトでページごとにデータ分割される

検証に使用したページ

トップページ(/): 簡単な内容を表示するだけのページ
マイページ(/mypage):
- トークンをバックエンドに送信して認証
- ユーザーの過去データを取得して表示

パフォーマンス計測に使用したツール（共通）

WebPageTest
https://www.webpagetest.org/
Lighthouse（下記設定で使用）
- Throttling：devtools
- Mode：Navigation
- Device：Desktop

コードは極力同じにしました。また、今回は複雑なアプリではなく、かなりシンプルな構成で検証を行いました。

検証1. Page Performance Metrics

トップページにおけるページパフォーマンスを計測しました。

ピュアReact（CSR）

Time to First Byte (TTFB): 0.79秒
サーバーが最初のデータを返すまでの時間を計測したものです。サーバーの応答速度が影響します。
Largest Contentful Paint (LCP): 2.84秒
ユーザーが見るページ内で、最も大きなコンテンツ（画像やテキスト）が表示されるまでの時間を示します。ユーザー体験に直結する重要な指標です。
Page Weight: 639kb

Next.js（SSG）

Time to First Byte (TTFB): 0.26秒
Largest Contentful Paint (LCP): 0.65秒
Page Weight: 109kb

比較結果：パフォーマンスに大きな差が出た
Reactはページ全体をデフォルトでインストールするので初速が遅い。一方、Next.jsはページごとにデータ分割されているかつSSGということもあり高速で表示を実現しています。

検証2. マイページ内でSEOとパフォーマンスを計測

① ピュアReact（CSR）

Performance: 96
その他の指標はすべて最高スコア

② Next.js（SSR）

Performance: 95
その他の指標はすべて最高スコア

SEOは両方とも最高スコア。Next.jsはSEOの高いスコアを期待して導入されるケースが多いと思いますが、予想に反して差がなかったという結果となりました。むしろ、ピュアReactでも十分なスコアが出ることが分かりました。

Googleは現在、JavaScriptをほぼ完全にレンダリングできるため、Lighthouseのスコアが高いのであれば、Google検索エンジンにおいては大きなSEOの問題は発生しない可能性が高いです。また、ピュアReactはrobots.txtというGoogleのクローラーが適切に巡回・評価するためのファイルをSEO用に設定する必要がありますが、簡単に作成できるので大きなコストとは言えません。Next.jsでは特に設定は不要です。

パフォーマンスにおいても差はありませんでした。最初にダウンロードしてしまえば、後は高速に処理されるというピュアReact(SPA)の特性上、トップページを経由してアクセスされるマイページは高パフォーマンスを発揮しました。

結論

初期ダウンロードにおいてはNext.jsが非常に高速

デフォルトでページごとにデータ分割され、サーバーサイドでレンダリングされるNext.jsは、初期表示が高速で、UXも高いです。一方、デフォルトで全てのページを読み込んでしまうSPAのピュアReactは、最初の表示に時間がかかります。改善策を講じることでパフォーマンスを向上させることが可能です。

SEOには差が出なかった

SEO観点での差を知りたくて始めた検証でしたが、予想に反して両者に大きな差はありませんでした。しかし、Google以外の検索エンジンはJavaScriptを完全に読み込めない場合があるため（例：Bingなど）、SSRやSSGが有利であると言えます。また、今回は小規模なアプリで検証しましたが、多数のページを持つ大規模なアプリではSEOに差が出てくる可能性があります。

今回使用したアプリ
AI食生活診断（Next.js）
https://www.healthchecker.app/
ソースコード
https://github.com/Kay-pht/Health-Checker-App-NextjsVer