Next JS vs Gatsby をReactエンジニアが語ります🤔 最適なReact フレームワークを選択しましょう🚀

こんにちは！

これまで多くの React.js エンジニア、そして私たちも Next JS と Gatsby のどちらが優れたフレームワークなのか、度々議論をしてきました。

React.js のエコシステムは単なるフロントエンドに留まらず、フレームワーク、ライブラリ、モバイル・デスクトップ・VR・ゲームのアプリ開発ツールなどの全てを含めたかなり広い範囲をカバーするようになってきており、それに伴い議論の余地も広がっています。

現在も、Next JS と Gatsby は二強として React の開発者やファンから圧倒的な人気を集めています。

そこで、本記事では Next JS と Gatsby について、それぞれの特徴やユースケースを実例を交えて紹介します！

想定する読者

• Next JS と Gatsby の違いが知りたいヒト
• Next JS か Gatsby のどちらを選ぶべきか悩んでいるヒト
• React フロントエンド開発に関わるヒト

はじめに

Next JS か Gatsby か、という議論に対し一般的にいわれているのは、Gatsby はコンテンツの更新が少ない静的なウェブサイトに向いている一方、Next JS はサーバーとのやり取りが多い複雑なサイトを作るのに便利だということです。

しかし、開発者としてシステムの保守性やセキュリティまで考えていくと、この二者にはそれ以上に大きな違いがあるので、選定に頭を悩ませる方は多いでしょう。

そんな悩みを抱えている方は、ぜひこの記事を参考にしてみてください！

Gatsbyとは

Gatsby は、高性能なアプリやウェブサイトを構築できる、無料でオープンソースの React フレームワークです。Gatsby の特徴は、静的な HTML ページを生成し、非常に高速なパフォーマンスを実現することに主眼を置いて開発されている点。

デフォルトで組み込まれている PWA のプラグインを使えば、最初のロードでは必要なアセットだけを取得し、後のページに必要なアセットはプリフェッチするという仕組みで、短時間の読み込みを実現することもできます。

Gatsby は React ベースで作られたものでありながら、スターター、プラグイン、すぐに使えるテーマからなる独自のエコシステムを備えています。標準の拡張機能だけで GraphQL やReact 、React Router を利用でき、それらのメリットを活かし、簡単に静的サイト生成の仕組みを構築できます。

次のパートでは、Next JS の性能を見ていきましょう。

Next JSとは

Next JS は Gatsby とは異なり、パフォーマンスの高速化よりも、独自の開発ツールでより高度な機能を実現することに目標の重点を置いています。例えば、サーバー側でレンダリングされた Web サイトとアプリをほとんど構成ファイルなしで構築できるような仕組みです。

Next JS で構築された Web サイトは、自動コード分割、データ取得機能、単一ファイルコンポーネント、ホットリロードなどの機能を使ってサーバーと頻繁にやり取りすることで、新しいリクエストが来るたびに毎回 HTML テンプレートを生成することが可能です。

したがって、Next JS の最大の利点は、トラブルのリスクなく簡単に任意のコンポーネントをカスタマイズしたり、全コンポーネントを入れ替えたりできる所だといえます。

GastbyとNext JSの共通点

作られた目的が異なるとはいえ、Gatsby とNext JS にはそもそも似通った部分があり、それがこの2つのフレームワークの間で議論が起こっている理由です。差別化要因を比べる前に、まずは共通点を整理してみましょう。

GastbyとNext JSの違い

1. SEO最適化

Web サイト・アプリに関わるすべてのものは SEO の影響を受けますが、Gatsby と Next JS にはそれぞれ SSR、プラグインと呼ばれる SEO 最適化の機能があるので、アプリのパフォーマンスを最大限に引き出すことができるので問題ありません。加えて、どちらも HTML コンポーネントを CND データベースにインポート・エクスポートできるため、ページの読み込み速度が向上します。

2. インクリメンタルビルド

Gatsby と Next.js は、ページ全体を更新せずにコンテンツを部分的に変更できるインクリメンタルビルドに対応しているという点で、どちらも Web 開発向けの JavaScript フレームワークとして優れています。これにより、ビルド時間が短縮され、新しいページを開発するプロセスが高速化されます。

3. ビルトインの高速化・キャッシュ機能

高速化・キャッシュ機能により、どちらのフレームワークであっても、開発者はコード分割・コード最適化の問題から解放されます。各ページルートの情報を基に、コードはデフォルト機能により分割され、新しいページもビルトインのルーティング機能によって作成されます。

4. 開発者フレンドリーであること

Gatsby も Next JS も、デベロッパー向けの網羅的なドキュメントを提供しており、 開発者がすばやく導入、運用、プロダクトへの機能追加をできるようになっています。どちらのフレームワークでも、開発者はゼロから全てを学習する必要はなく、基本的な React の理解があれば取り掛かることが可能です。

5. 動的Web開発

Gatsby や NextJS は、高い Lighthouse スコア、ホットリロードがすぐに使えること、後続ページの非同期プリフェッチ、HTML の事前レンダリングなどの優れた特徴を備えています。そのため、高性能な動的 Web アプリの開発に向いているといえます。

GastbyとNext JSの使い分け

Gatsby と Next JS の共通点を確認してきました。続いて両者の異なる点を確認し、どちらがどのような点で優れているかを実際に見ていきましょう！ 

1. データ処理

データ処理の観点で考えると、Next JS を使った場合は開発者が必要に応じてデータ全体を管理できるのに対し、Gatsby はデータを取得して処理するまでの正確な方法が用意されている (GraphQL) という特長があります。

Gatsby は各ページに必要なデータのみを取得できる点がかなり優秀です。また、豊富なプラグインがあり、色々なデータソースとの接続がしやすくなっています。その一方で、Next JS ではデータ処理方法は完全に自由です。つまり、開発者自身がアーキテクチャを選び、色々な方法( SSR、SSG、または事前レンダリング) でデータを取得できます。

2. ページのレンダリング

Gatsby はビルド中にHTMLページを生成します。Gatsby が静的サイトジェネレーターといわれる理由はここにあります。Gatsby なら、レンダリングを管理するために Node サーバーを使う必要はありません。ただし、大量のサブページや何百もの HTML テンプレートが入った大規模な Web サイトを構築するような場合には、Gatsby は適していません。

これに対し、Next JS の PWA は、SSR によってページをレンダリングできます。 Node.js と NPM をインストールすれば、毎リクエストの実行中にHTMLレンダリングを処理できます。すると、最初の HTML を読み込んだ後、ハイドレーションが処理されアプリが実行されます。

3. 拡張性

Gatsby と Next JS の3つ目の比較ポイントは拡張性です。

Gatsby には膨大な数のツールとプラグインがあり、それらを使って Web サイトやアプリに機能を追加できます。Gatsby プラグインライブラリの利点には、構成済みテーマ、画像の圧縮、TypeScript コンパイラなどがあります。補足として、自らテーマと機能をカスタマイズしてプラグインライブラリで公開することもできます。

Next JS には幅広い連携ツールとライブラリがあり、こちらも Gatsby に劣らない拡張性があります。コード分​​割、ページルーティング、画像の最適化など、以前は React に組み込むのが難しかった機能が今ではデフォルトで付いています。

4. スケーラビリティ

スケーラビリティの観点からいえば、Gatsby は大規模なアプリを作る場合には賢明な選択とはいえません。それに対し、企業用途で規模を拡大する必要があるような場合、Next JS は完璧なフレームワークです。

Gatsby は、静的な Web ページや個人のブログには向いていますが、将来アプリサイズを大きくしたい場合には、ビルド時にかなり遅くなったり、全くビルドされない可能性も出てきます。つまり、スケーラビリティには大きな問題があります。

反対に、Next JS は最新の企業用 Web 開発のトレンドにも沿っており、大規模なアプリを構築する場合、現時点で最も良い選択肢の1つです。Next JS なら、ユーザーごとに異なる魅力的なコンテンツをログインユーザーにシームレスに表示することもできます。

5. インフラストラクチャと情報セキュリティ

インフラストラクチャや情報セキュリティの側面もみてみましょう。

Gatsby の場合、ビルド時の事前レンダリングと CDN を使用するだけで、超高速の Web アプリを作成できます。要求されたデータだけをソースからフェッチする仕組みのため、セキュリティ面でもかなり安全です。

それに対し、Next JS では、インフラのためにサーバーのデータベースをセットアップしたり、保守したりする必要があります。プライベート API や CMS ツールもありますが、データはサーバー上にあるため、Gatsby に比べると漏洩のリスクが高くなります。

GatsbyとNext JSのユースケース

Gatsby と Next JS のどちらを選ぶかは、結局は適材適所の問題として答えを考える必要があります。特定のユースケースとその場合の両者のパフォーマンスを例に、どのような時にどちらを使えばよいかを確認していきましょう。

• 静的なWebサイト

シンプルで静的な Web サイトを作る場合には、Gatsby は持ってこいだといえます。静的な Web サイトは、基本的には個別の HTML ページの組み合わせからなり、それぞれが物理的に1つの Web ページを表します。例えば、個人ブログのような場合が良い例です。リアルタイムのアップデートなしで、異なる訪問者たちに同じコンテンツが表示されます。

• 複数ユーザーを想定した大規模な Web サイト

例えば、沢山のユーザーが自分のアカウントを作成し、ページのコンテンツにコメントを付けるような Web サイトの開発を検討する場合は、Next JS を選ぶのがいちばんでしょう。

上記の要望を満たすものを、静的なサイトとしてランタイム中に作成するのはほとんど不可能です。このような Webサイトは、多数のユーザーによって同時に登録や使用をされている間、それを全て処理しなければいけないからです。よって、Gatsby のようにビルド時間がかかるフレームワークは、あまり賢い選択とはいえません。

さらに、大規模な Web サイトでは、動的で個別に異なるコンテンツを登録ユーザーに表示する必要があります。 SSRは Next JS の数ある利点の1つであり、認証に基づいて複数のユーザーを管理する場合には非常に優れた開発手法です。これにより、ユーザーが Web サイトにアクセスした時に、即時に正しいコンテンツを表示できます。

• ハイブリッド Web アプリ

SSR を使ったUIのレンダリング同様、ハイブリッド Web アプリの開発についても Next JS が Gatsby に勝っているといえます。例えば CSR にデータを処理する必要があるような場合です。

そのような Web アプリの場合、ログインユーザー向けの CSR と新規ユーザー向けの SSR の両方を組み合わせて全体が構成されます。加えてほぼ全ての Web ページを SEO 最適化する必要があります。このような Web アプリでは、ページのコンテンツは動的かつパブリックにアクセスできる必要があるため、ほぼ間違いなく Next JS が Gatsby よりも優れたパフォーマンスを発揮するでしょう。

Gatsby と Next JS を使っている実際の例

紹介してきた2つのフレームワークが、実際の Web サイトでどのように使われているかは気になりますよね。具体的な例とともに、最新 Web 技術における現在の市場トレンドのなかで、Gatsby とNext JS がどのようなポジションにあるか見ていきましょう。

Next JS を使った Web サイトの例

• Netflix
• Twitch
• Uber
• Docker
• Invision
• Magic Leap

Gatsby を使った Web サイトの例

• Figma
• Nike
• Airbnb Engineering
• Digital Ocean
• Hasura
• Impossible Foods
• Send Grid

まとめ

Gatsby と Next JS の機能の違いは、過去に比べてかなり少なくなっています。Gatsby は何度も修正を経て、SSR やDSG など、より多くのクライアント側の機能に対応できるようになりました。その結果、フレームワークの選定はますます難しくなっています。結局は、開発者の好みや求める機能次第で選ぶのがよいということになります。

以上を要約すると、Next JS は大規模でトラフィックの多いアプリに適しており、Gatsby は小規模で静的な Web サイトに適しています。

よって、次のような場合には Next JS がおすすめです。

• 大量のコンテンツとデータを管理する大規模なアプリを構築し、将来的にも拡大させるケース。この場合、ヘッドレス CMS と Next JS の機能を組み合わせると、柔軟な管理ができます。

それに対し、次のような場合には Gatsby がおすすめです。

• システムの整合性や安定性を最優先する小規模なプロジェクトの場合。セットアップが簡単で、開発時間も短縮できます。

さまざまな角度から比較をしてきましたが、Gatsby と Next JS はどちらも優れたフレームワークであることに変わりはなく、現在トレンドになっているサーバーレス開発にも対応可能です。

React / Vueの UI 開発、AWS サーバーレス開発はお気軽にお問い合わせください。