ReactとNext.jsの特徴と違い

はじめに

今回、ReactとNext.jsの学習にあたってそれぞれの違いや特徴と使い分けについて曖昧だったのでまとめてみました
また、SPA・SSR・SSGについても深掘りしました

Reactの特徴

• ライブラリ
  • ReactはUIを構築するためのJavaScriptのライブラリで、基本的にはビュー層のみを提供
• SPA(シングルページアプリケーション)
  • ReactのデフォルトはSPAで作成される
• 柔軟性
  • Reactは柔軟性であり、ルーティングやSSRを導入することができ、その際は追加で設定やライブラリが必要
• Reactの利用に適したケース
  • プロジェクトの設計や設定を細かく制御したい場合に適している
  • 完全にカスタマイズされたアプリケーションの開発
  • フロントエンドの要件が複雑で既存のフレームワークの制約を避けたい場合

SPAとは

ユーザーがWebアプリやWebサイトを利用する際に、ページ全体を再読み込みせずに必要な部分だけを動的に更新する仕組みを持つWebアプリケーションである

• SPAの特徴
  • ページ全体の再読み込みが不要なため、レスポンスが早い
  • JavaScriptやCSSなどが再利用され効率的なリソースを利用可能
  • 動画やフォームなど、リッチなインタラクションでシームレスなUXを提供しやすい
  • コンポーネント指向でコードをモジュール化しコードの再利用が可能
  • 初回アクセス時に全てのJavaScriptやリソースをダウンロードするため、読み込みが遅い
  • CSRのためクローラーがコンテンツを認識しにくいためSEO対策が難しい
  • 大量のJavaScriptが動作するため、低スペックなデバイスではパフォーマンスの低下がありうる
  • フロントエンドの開発に精通しているためサーバーサイドとAPIの連携も重要

Next.jsとは

• フレームワーク
  • Next.jsはReactに不足している機能(SSRやルーティングなど)を統合的に提供
• SSR(サーバーサイドレンダリング)
  • ユーザーがページにアクセスをしたときにレンダリングし、その結果を送信する。これにより、SEOに有利であり初期表示速度が向上する
• SSG(スタティックサイドジェネレーション)
  • ビルド時にページを事前に生成し、静的ファイルとしてホスティングできるため初回読み込みが非常に高速で効率的である
• APIルート
  • サーバー側の処理(APIエンドポイントなど)を簡単にセットアップ可能であり、バックエンドの軽い作業を行える
• 画像最適化
  • next/imageコンポーネントにより、画像のサイズやフォーマットを自動で最適化する
• ファイルベースのルーティング
  • ファイル構造に基づいたルーティングがデフォルトで提供される
• Next.jsの利用に適したケース
  • SEOが重要なWebサイト(ECサイト・ブログなど)
  • サーバーサイドレンダリングを活用して初期表示速度を向上させたい場合
  • 静的サイト生成を利用した効率的なデプロイが必要な場合
  • シンプルなAPIサーバーが必要な場合

SSR(サーバーサイドレンダリング)とは

Webアプリケーションのコンテンツをサーバー側でHTMLに変換し、それをクライアントに送信する方式である

• SSRの流れ

  1. クライアントがリクエストを送信
  2. サーバー側でHTMLを生成
  3. 生成されたHTMLをクライアントに送信
  4. クライアントサイドでJavaScriptを実行(オプション)

• SSRの特徴

  • 初期表示で完全なHTMLが生成(プリレンダリング)されるため、検索エンジンのクローラーがコンテンツを正確に認識しやすいためSEOの最適化に有利
  • ブラウザが最初に完全なHTMLを受け取るため、ユーザーがコンテンツを目視できるまでの時間が短くなる
  • JavaScriptに依存されないため、クライアントサイドでJavaScriptが無効化されている場合でもSSRはコンテンツを表示できる
  • サーバー側でHTMLを生成するため、リクエストが増えるとサーバーのリソースが圧迫される可能性あり
  • CSRと比べてセットアップや開発が複雑になることがある
  • 初期描画後にJavaScriptがハイドレーションを行うまで完全なインタラクティブ性を実現できない場合がある

SSG(スタティックサイドジェネレーション)とは

WebサイトやWebアプリを構築する方法の一つで、ビルド時に静的なHTMLファイルを生成し、それをサーバーやCDNに配置する

• SSGの仕組み

  1. ビルド時にHTMLを生成
  2. 静的なHTMLの配置
  3. クライアントサイドでJavaScriptを実行(オプション)

• SSGの特徴

  • サーバーで動的処理をせず、あらかじめ生成されたHTML(プリレンダリング)を提供するため読み込み速度が非常に早い
  • 静的ファイルはCDNを通じてキャッシュされるため、大量のトラフィックにも対応できスケーラビリティが高い
  • 動的なバックエンドがないため一般的なサーバーサイドの脆弱性が発生しにくい(SQLインジェクションなど)
  • あらかじめ生成されたHTMLを提供するため検索エンジンが正確にコンテンツをクロールしSEOに有利
  • 生成後のHTMLファイルは固定されるため、頻繁に変化するデータには不向き(ニュースや株価情報など)
  • 動的な要件を持つアプリケーションの対応が難しいが静的生成後にクライアント再度で動的処理を行うISG(インクリメンタルスタティックジェネレーション)やCSR(クライアントサイドレンダリング)と組み合わせることで対応可能

補足
SSGの弱点(リアルタイム性の欠如)補う仕組みとしてISR(インクリメンタルスタティックリジェネレーション)がある。ISRでは既存の静的ページを再生成するプロセスを特定のタイミングで行えるため、必要なページのみ再生成することができビルド時間が大幅に短縮されます。また、リアルタイム性に対応されておりコンテンツが更新された際に、必要なページだけをバックグラウンドで再生成できる

ReactとNext.jsの違い

特徴	React	Next.js
タイプ	ライブラリ	フレームワーク
ルーティング	自由（追加ライブラリが必要）	ファイルベースのルーティング
SSR	サポートなし（追加設定が必要）	ネイティブサポート
SSG	サポートなし	ネイティブサポート
SEO 対応	工夫が必要	標準対応
API サーバー機能	なし	標準提供
画像最適化	なし	標準提供

まとめ

Reactは柔軟性があり完全にカスタマイズされたSPAに向いており、Next.jsはSEOを意識する場合や高速なページロードが必要な場合に威力を発揮できるのでそれぞれの特徴を理解しがら使い分けできればと思う