Gatsby vs. Next.js

GatsbyjsとNext.jsは、現在Web開発で最も注目されているトピックの2つです。 YouTubeの掲示板やコメントのセクションで、なぜどちらを選ぶのかと尋ねる人がたくさんいます。私は過去12か月間、Next.jsとGatsbyjsの世界に頭を抱えていました。そのため、このディスカッションに参加する資格があると思います。

プロジェクトにNext.jsまたはGatsbyを使用する場合、「適切なジョブ表現のための適切なツール」が思い浮かびます。しかし、私があなたをそのような漠然とした答えでぶら下げたままにするつもりはないので心配しないでください。

TLDR：

• GatsbyとNext.jsはどちらもReactフレームワークであり、どちらもすぐに使用できるSSR（サーバーサイドレンダリング）を提供します（SEOに最適）。
• Next.jsは、この2つについてあまり意見がありませんが、学習曲線が急で、バッテリーが少なくなっています。つまり、自分でより多くのことを行うことができます。
• Next.jsは、頻繁に更新する必要のある大量のデータがあるサイトに最適です。

Next.jsとGatsby.jsの類似点

人々がGatsbyとNext.jsを比較しているのには十分な理由があります。それらは、異なるよりも多くの共通点を持っています。したがって、最初にGatsbyとNext.jsの共通点を見てから、それらの違いについて説明します。

GatsbyとNext.js：

• どちらも、すぐに使用できる高性能を提供します。
• どちらもJavaScriptフレームワークであり、どちらもReactベースです。
• どちらも、サーバー側レンダリング（SSR）とクライアント側レンダリング（CSR）をすぐに使用できます。
• どちらも静的サイト生成（SSG）と動的サイト生成（DSG）を提供します。
• どちらもコード分割と優れたキャッシュ機能を備えています。
• どちらもページデータのプリフェッチを提供します。 Gatsbyはこれを自動的に行い、Next.jsにはprefetchがあります Linkで使用できる小道具 コンポーネント（ルーティング用）。
• どちらも、独自のルーターを使用してページの自動ルーティングを提供します（GatsbyはReachルーターを使用し、Next.jsはNext.jsルーターを使用します）。
• GatsbyとNext.jsはどちらも、RestAPIからデータをフェッチできます。 WordPress、Contentful、またはPrismicをCMSバックエンドとして使用する。

箱から出してすぐに、GatsbyとNext.jsは、サーバー側レンダリング（SSR）とクライアント側レンダリング（CSR）に関して、両方の長所を提供します。 SSRはSEOに最適であり、CSRは、ネイティブモバイルアプリの使用を思い出させる素晴らしいインスタントページトランジション（ページの更新なし）をユーザーに提供するのに最適です。

Next.jsとGatsby.jsの違い

以下は、どちらかがカスタマイズによって潜在的に何に変わるかではなく、どちらかのフレームワークで箱から出してすぐに得られるものに基づいていることを明確にしたいと思います。 Next.jsとGatsbyはどちらも非常に柔軟性があります。

GatsbyとNext.jsは、「無限に」カスタマイズできます。彼らは両方ともあなたにこれだけ話すために彼らの邪魔にならないでしょう。 「すべての人にとってすべてのものになりたい」という古典的なフレーズが思い浮かびます。どちらも潜在的な顧客を排除することを望んでおらず、優れたビジネスマンとして、弱点ではなく長所を強調することに重点を置いています。必要に応じて。

どちらも嘘をついているわけではありませんが、Next.jsとGatsbyはどちらも非常に柔軟性があり、絶えず進化しているため（巨額の財政的支援を受けて）、長い話をするとき、特定のユースケースに一方のツールが優れているとは言い難いです。用語。

私はゲームにスキンがないので、これは私の偏見のない視点です。 Next.jsとGatsbyを異なるものにする主な領域：

• Gatsbyは、GraphQL（意見あり）を使用するように強制します。Next.jsはオプションです。
• Gatsbyは、画像変換をそのまま使用する必要はありませんが、すぐに使用できます（ある程度意見が分かれています）。
• Gatsbyは、画像に遅延読み込みを自動的に追加します（意見あり）
• Gatsbyサイトは、小さなプラグインをインストールすることでプログレッシブWebアプリ（PWA）に変えることができます。 Next.jsでそれを行う簡単な方法を見たことがありません。
• Next.jsは、動的ルーティングと静的ルーティングの両方を提供します。私が知る限り、Gatsbyは静的/ハードコードされたルーティングのみを提供しています。明確な情報を見つけるのが難しいため、これについて100％確信はありません（詳細がわかったら更新します）。
• Gatsbyは、サイト構築（SSG）フェーズでSSRを実行します。
• Next.jsはページリクエストに応じて動的にSSRを実行しますが、静的エクスポート機能を介してSSGも提供します。

カスタマイズに関しては、Gatsbyには、インストールがほとんど簡単な便利なプラグインがたくさんあります（コメントから検索用のAlgoliaまで）。 Next.jsのGitHubリポジトリには/examplesディレクトリがあり、Nextで使用されているさまざまなライブラリ（「プラグイン」）を紹介しています。しかし、私の経験では、Next.jsの例を使用すると、Gatsbyのプラグインを使用するよりも構成が難しくなります。

動的データフェッチ

Gatsbyはそのまま静的に生成されますが、GatsbyはさまざまなサーバーAPIにクエリを実行して動的に データを取得します。

Next.jsは、同様の方法で動的なデータフェッチを実行できます。

SSRが必要な場合は、Gatsbyの組み込みGraphQL APIを使用してWordPressやContentful（「ヘッドレスCMS」）などのCMSからデータを消費し、コンテンツを公開するたびに（CMSからの）Webhookを使用して自動デプロイを処理できます。

コンベンションと構成

一般的に、ギャツビーは2つの中でより意見が分かれています。その利点は、決定を下すことが少ないことです。 Next.jsを起動して実行するには、さらに多くの構成が必要です。その利点は、何も強制されないことです。

Next.jsは、「アプリをゼロから構築する」製品であり、いくつか 素敵なバッテリーが含まれています（SSR、ルーティング、プリフェッチ、コード分割）。

Gatsbyは、「出発点には、とにかく欲しいものが含まれている」製品であり、多くの 含まれているバッテリー（GraphQL、プリフェッチ、SSR、コード分割、遅延読み込み、画像変換）。

製品の隅々まで特定のカスタマイズが必要な場合は、Next.jsが2つのうちのより良い選択です。これは、箱から出してすぐに使用できる「ベアボーン」（少ない作業）だからです。

フレームワークから機能を削除してプロジェクトを開始するのは決して楽しいことではありません。そのため、（何らかの理由で）GraphQLが気に入らない場合は、Gatsbyは適していません。

GraphQLは現在（正当な理由で）すべての誇大宣伝であり、Gatsbyがフレームワークの一部になっていることに異議を唱えるのは困難です。ボーナスだと思いますが、好みが違うかもしれません。 Apollo（GraphQLエンジン）がNext.jsアプリへの最も人気のある追加の1つであることは注目に値します。

Gatsbyが画像変換と遅延読み込みを処理することに関しては、意見はありますが、これによりパフォーマンスが大幅に向上するため、おそらくそれを決定することを許してくれるでしょう。ただし、繰り返しになりますが、画像変換を独自の方法で処理したい場合は、Next.jsの方が適しています。

SEO用のギャツビーvs.ネクスト.js

GatsbyとNext.jsはどちらもサーバーサイドですぐにレンダリングされるため、優れたSEO（検索エンジン最適化）を必要とするWebサイトに最適です。つまり、今日ではほとんどすべての公開Webサイトを意味します。

ただし、Gatsbyと比較してNext.jsが優れている特定のSEOユースケースがあります：

TwitterやRedditのようなプラットフォームを構築していて、コンテンツの更新を常にプッシュする必要がある場合、およびすべてのコンテンツに最適なSEOが必要な場合は、Next.jsが最適なオプションです。

どうして？ Next.jsは、サーバー側で独自のサーバーからコンテンツの更新を動的にレンダリングできるため、即座に 変更があるときはいつでも。

Gatsbyが新しいコンテンツを表示するには、コンテンツに変更が加えられるたびにアプリを再構築して再デプロイする必要があります。これは、ブログ、eコマースサイト、および1日1回、あるいは1時間に1回だけ更新をプッシュする必要がある他のほとんどのタイプのWebサイトには問題ありません。

一方、Gatsbyサイトが外部APIから動的にデータをフェッチして、サイトの更新を表示している場合（たとえば、TalkardやDisqusなどのコメントサービスを介して）、Gatsbyサイトでリアルタイムのコンテンツ更新を取得できます。更新はサーバー側ではなくクライアント側でレンダリングされるため、SEOのメリットは得られません（これはSEOに必要なものです）。

一般的な現実世界の観察

大規模なサイトを持つ大企業は、GatsbyではなくNext.jsを使用する傾向があります。間違った考えはありませんが、ReactJSの公式ドキュメントページではGatsbyを使用しています。私が観察したことについて話しているだけです。

Next.jsを使用する大きなウェブサイト：

• Marvel.com
• Netflix
• Uberマーケットプレイス
• Invisionapp
• マテリアルUI

Gatsbyを使用する大きなウェブサイト

• ReactJS
• MarvelApp.com

うん、興味深いことに、マーベルは両方を使用しています。メインサイトにはNext.jsを使用し、MarvelApp（デザインプラットフォーム）にはGatsbyを使用しています。

ブログに関しては、まともなNext.jsブログの例をいくつか見ただけですが、Gatsbyの良いブログの例をかなりたくさん見ました。これはタニア・ラシアによるもので、私のお気に入りの1つです。

Gatsbyは、「ブロガー向けの単なる別の静的サイトジェネレーター」（Jekyllなど）として見られたくないことを明確にしていますが、ブログで非常に人気があるという事実は変わりません。多くのWordPressユーザーはその理由でギャツビー（私が上で述べたタニアを含む）。

GatsbyまたはNext.jsを使用したヘッドレスCMS

多くの開発者は、トレンドの「ヘッドレスCMS」または「デカップリングCMS」について話し合っています。 WordPressをバックエンドとして使用し、React（またはAngular / Vue）を使用してRest API/GraphQLを介してデータを消費します。 Next.jsとGatsbyはどちらも、ヘッドレスCMS製品のフロントエンドアプリとして使用できます。理論的には非常に有望に聞こえますが、これまでのところ、いくつかの良い例しか見ていません。

• Next.js + WordPress by Kata.ai
• Gatsby + WordPress by Chase McCoy
• インディゴツリーによるギャツビー+ワードプレス
• Gatsby + WordPress by Adam Rasheed

アダムとチェイスの Gatsby+WordPressの例はどちらも非常に高速です。 カタのは Next.jsの例ウェブサイトは美しいですが、少し遅いです。ハイエンドのパフォーマンスはNext.jsの主なセールスポイントの1つであるため、KataはWordPressでNext.jsを使用する必要がある理由の最も説得力のある例ではありません。

ヘッドレスCMSはまだ比較的新しい概念です。ヘッドレスCMS全般（ヘッドレスワードプレスだけでなく）が2020年に注目を集めることは間違いありません。また、GatsbyとNext.jsの両方がSSRを処理するため、どちらもヘッドレスフロントエンドとして確実なオプションです。

GatsbyとNextのデプロイ/ホスティング

Gatsbyはデプロイ前に静的に生成（プレビルド）されるため、独自のサーバーがなくてもどこでも実行できます。通常、Next.jsでは、を除いてNode.jsサーバーを実行する必要があります。 Gatsbyと同じように、アプリ全体が静的サイトとしてエクスポートされます。 （そうです、それは可能です）。一部のホスティングソリューションは、相互に合わせてカスタマイズされています。

Gatsby + Netlify

GatsbyとNetlifyは天国で行われた試合です。サイトがサーバーレスの場合、GatsbyサイトをNetlifyにデプロイすると、文字通り30秒未満で構成できます。

ここから、contintiusのデプロイは、単一のgit push origin masterを実行することに要約できます。 ターミナルでコマンドを実行します—gatsbyのgatsby-plugin-netlifyプラグインを使用する場合。

Next.js + Now

Next.jsはNowホスティングサービスとうまくペアになっており、正当な理由で、ZeitはNow（ホスティングサービス）とNext.js（フレームワーク）の両方の背後にある会社です。

Netlifyの場合と同様に、Nowへのデプロイは数秒で完了しますが、デプロイするアプリの種類によって異なります。

注：GatsbyとNext.jsは特定のホスティングサービスとうまく連携しますが、実際に静的/フロントエンドのNext.jsアプリをNetlifyでホストでき（ここに例があります）、GatsbyをNowでホストできます（ここに例があります）。

どちらのフレームワークも、DigitalOcean、Herokuなどでホストできます。

Next.jsまたはGatsbyアプリのいずれかで（サーバーレスにするのではなく）独自のバックエンドサーバー/ APIをホストする場合は、DigitalOcean、Heroku、Nowなどを検討する必要があります。 （「現在」）Zeitの Now v2.0 に注意してください 多くの開発者にとって大きな問題となっているDockerはサポートされなくなりました。

Next.jsとGatsbyのデプロイ時間

Gatsbyを再構築して再デプロイすると、更新の間に遅延が発生します。遅延の大きさは、サイトの大きさによって異なります。大きいほど、再構築と再デプロイにかかる時間が長くなります。最近、Gatsbyを使用してこのサイトを構築しましたが、再構築から再デプロイが完了するまでに約2分かかり、比較的小規模なサイトです。

Next.jsには、この再構築>再デプロイ>ダウンタイムの問題はありません。独自のバックエンドサーバーを実行している場合、新しいコンテンツはすぐに更新されます。

Gatsbyを使用すると、ダウンタイムや遅延なしに増分更新を簡単に処理できる場合、これは問題にならない可能性がありますが、現時点では、自分で回避する方法を見つける必要があります（WebSocketなど）。

リソース

• Postlight.comには、GitHubに非常に興味深いWordPress+Next.jsスターターキットがあります。
• ヘッドレスCMSの場合、WordPressの確かな代替手段として、Prismic、Contentful、Sanity、Ghost、ButterCMSがあります