🙌

React.jsとNext.jsって何？どう違うの？深堀りしてみた。

2023/03/05に公開

Reactは、Facebookによって開発されたJavaScriptライブラリで、Webアプリケーションのフロントエンド開発に使用されます。Reactは、UIのコンポーネントベースの設計パターンを採用し、Webアプリケーションの開発をより簡単かつ効率的にします。

一方、Next.jsは、Reactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）の機能を提供します。Next.jsは、Reactアプリケーションの機能を強化し、SEOの最適化やパフォーマンスの向上など、より高度な機能を提供します。

ReactとNext.jsを選択するポイントは、アプリケーションのニーズによって異なります。以下は、それぞれの使用例です。

Reactを使用する場合：

ユーザーによって動的に変更されるUIがある場合
SPA（シングルページアプリケーション）を開発する場合
バックエンドAPIによって提供されるデータに基づいて、UIをレンダリングする場合
Next.jsを使用する場合：

サーバーサイドレンダリングや静的サイト生成が必要な場合

SEOの最適化が必要な場合
ページのパフォーマンスを向上させる必要がある場合
簡単にまとめると、Reactは単純なSPAの開発に使用され、Next.jsはより複雑なWebアプリケーションや高度な機能が必要な場合に使用されます。

ではNext.jsの方がReact.jsよりもSEOで勝るのはなぜなのか？

Next.jsは、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）の機能を提供するため、SEOの観点からReact.jsよりも優れているとされています。

従来のReactアプリケーションは、クライアントサイドJavaScriptに依存しているため、WebクローラーがWebページのコンテンツを理解できず、検索エンジンでのランキングが低下する可能性があります。一方、Next.jsを使用すると、サーバーサイドでReactコンポーネントをレンダリングすることができます。このため、クローラーは完全にレンダリングされたコンテンツを取得し、より良いSEOの結果を得ることができます。

また、Next.jsは静的サイト生成（SSG）の機能を提供するため、WebページのコンテンツをHTMLファイルとして生成し、必要に応じてキャッシュすることができます。これにより、ユーザーがWebページにアクセスする際に、サーバーに負荷をかけることなく、高速なWebページの表示が可能になります。

つまり、Next.jsを使用することで、クローラーがコンテンツを理解でき、高速なWebページの表示が可能になるため、SEOの観点からReact.jsよりも優れているとされています。

クライアントサイドレンダリング（CSR）を使う場合は、Next.jsでSEOの恩恵を受けれるのか？

CSRを使用する場合、Next.jsで提供されるサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）の恩恵を受けることはできません。

Next.jsは、サーバーサイドレンダリングと静的サイト生成の機能を提供することで、SEOの最適化に貢献します。これは、Webクローラーが完全にレンダリングされたコンテンツを取得し、より良いSEOの結果を得ることができるためです。一方、CSRでは、JavaScriptがクライアント側で実行され、コンテンツがレンダリングされるため、Webクローラーはコンテンツを正確に理解できず、SEOのランキングが低下する可能性があります。

ただし、CSRを使用する場合でも、Next.jsは静的ファイルの生成と配信に役立ちます。例えば、Next.jsを使用してアプリケーションをビルドし、その出力を静的ファイルとして配信することができます。この場合、生成された静的ファイルはSEOに有利であり、リソースの配信も高速になります。

つまり、CSRを使用する場合でも、Next.jsは静的ファイルの生成と配信によってSEOの最適化やパフォーマンスの向上に貢献できますが、サーバーサイドレンダリングや静的サイト生成の恩恵を受けることはできません。

SSGとは何？CSRとの違いは？

静的サイト生成（SSG）は、Webサイトのページを、ビルド時にサーバーサイドで事前にレンダリングして、静的なHTMLファイルとして生成する手法です。

SSGでは、ビルド時に必要なデータをすべて収集し、そのデータを使って各ページをサーバーサイドで事前にレンダリングします。そして、ビルドされたHTMLファイルをWebサーバーにアップロードし、Webサイトにアクセスするユーザーは、生成された静的なHTMLファイルをブラウザで直接読み込んで表示します。このため、サーバーサイドの負荷が軽減され、高速なWebページを実現することができます。

一方、クライアントサイドレンダリング（CSR）は、ページをブラウザ上で動的にレンダリングする手法です。ブラウザはJavaScriptを使用して、必要なデータを取得してページを構築します。CSRの場合、初回のページの読み込みが遅く、Webサイト全体がレンダリングされるまでに時間がかかります。これにより、ユーザーエクスペリエンスが低下する場合があります。

つまり、SSGはビルド時にサーバーサイドで事前にレンダリングして静的なHTMLファイルを生成し、CSRはクライアントサイドで動的にレンダリングしてページを構築します。SSGの場合、静的なHTMLファイルが生成されるため、高速なWebページの表示が可能です。また、Webサーバーへの負荷も軽減されます。一方、CSRは初回のページの読み込みが遅く、ユーザーエクスペリエンスが低下する可能性があります。

SSG,SSR,CSRはそれぞれどういうサービスのサイトにおすすめか？

SSG、SSR、CSRはそれぞれ、Webサイトの目的やコンテンツに応じて最適な手法が異なります。

静的サイト生成（SSG）は、静的なWebサイトやブログ、情報提供型のサイトに適しています。例えば、ニュースサイトやブログなど、記事の内容が頻繁に更新されない場合に適しています。また、トラフィックが安定している場合にも有効です。

サーバーサイドレンダリング（SSR）は、動的なWebサイトやWebアプリケーションに適しています。例えば、オンラインショップやSNSサイト、Webアプリケーションなど、ユーザーの操作に応じてコンテンツが変化する場合に適しています。また、トラフィックの急増が予想される場合にも有効です。

クライアントサイドレンダリング（CSR）は、ユーザーによって動的に生成される個人化されたWebサイトやWebアプリケーションに適しています。例えば、ポートフォリオサイトやWebアプリケーションなど、ユーザーの行動に応じてコンテンツが変化する場合に適しています。

ただし、最適な手法は、コンテンツの種類や目的によって異なるため、各サイトに合わせた最適な手法を選定することが重要です。また、Webサイトのトラフィックやアクセス数の変化に応じて、手法を変更することも必要になる場合があります。

最後に、SSG、SSR、CSRはそれぞれ、実際に利用されているサービスをリストアップ

静的サイト生成（SSG）:

GatsbyJS：React.jsベースの静的サイトジェネレーターで、eコマース、ブログ、ポートフォリオ、ニュース、エンターテインメント、メディアなどのWebサイトに利用されています。
Jekyll：Rubyベースの静的サイトジェネレーターで、ブログやポートフォリオサイトなどに利用されています。
サーバーサイドレンダリング（SSR）:

Airbnb：React.jsとNode.jsを使用して開発されたWebアプリケーションで、旅行予約や宿泊施設の検索などの機能を提供しています。
Netflix：Node.jsとReact.jsを使用して開発された動画ストリーミングサービスで、コンテンツの表示や検索などの機能を提供しています。
クライアントサイドレンダリング（CSR）:

Twitter：React.jsを使用した動的Webアプリケーションで、ツイートの投稿や検索、フォローなどの機能を提供しています。
Trello：React.jsを使用したタスク管理ツールで、ユーザーのタスクの作成や編集、共有などの機能を提供しています。