TECHNOLOGY COMPARE

Gatsby / Nuxt

「どっちが上?」ではなく、まず同じ仕事をする道具なのかを確認します。

DIRECT COMPARISON

直接比較しやすい組み合わせ

GatsbyとNuxtはどちらも「Webサイト・Webアプリ」の技術なので、同じ土俵で比較しやすい組み合わせです。

Webサイト・Webアプリ

Gatsby

ReactとGraphQLを使う静的サイト生成フレームワーク。複数のコンテンツ源をビルド時に集約し、最適化したページを生成する。

何を担当する?

複数のコンテンツ源をビルド時に集約し、最適化したページを生成する。

いつ使う?

  • 既存Gatsby資産を保守するか、静的生成の設計を学ぶとき。

避けたい場面

  • 活発な新規開発と最新のReactフルスタック機能を優先するとき。
Webサイト・Webアプリ

Nuxt

Vueを基盤にフルスタックWebアプリを作るフレームワーク。規約に沿ったルーティング、描画、サーバー処理を提供する。

何を担当する?

規約に沿ったルーティング、描画、サーバー処理を提供する。

いつ使う?

  • VueでSSRや静的生成を含むサイト全体を作るとき。

避けたい場面

  • Vueを使わないか、小さな埋め込み部品だけで足りるとき。
DIRECT RELATION

NuxtとGatsbyはWebアプリ全体の描画・ルーティング・配備方式で比較される。規約に沿ったルーティング、描画、サーバー処理を提供する。一方、Gatsbyは複数のコンテンツ源をビルド時に集約し、最適化したページを生成する。