Gatsby vs 11ty：どちらが良いですか？ -TargetTrend

	ギャツビー	11ty
開発プラットフォーム：	React.js	Node.js
レンダリングされたページ：	HTMLとJS	HTML
読み込み時間：	尊大	速く
使いやすさ：	トップ	平均
画像処理：	トップ	平均
テンプレートの柔軟性：	平均	トップ
コミュニティ＆プラグイン:	より大きい	より小さい
API統合：	おすすめ！	ロー
追加サービス：	ギャツビークラウド	なし
学習曲線：	より高い	低くなる

開発プラットフォーム

どちらのフレームワークもJavaScriptで実行されますが、11tyはNode.jsで直接開発され、GatsbyはReactにルーツがあります。

Node.jsは、ChromeV8レンダリングエンジンに基づくランタイム環境です。インストールされている任意のプラットフォームでJavaScriptコードを実行できます。つまり、JavaScriptはWebブラウザーに限定されなくなります。

React.jsは、非常に直感的でインタラクティブなアプリやWebサイトの作成に役立つUI開発フレームワークです。その機能は、ここギャツビーがレンダリングしたサイトで非常に明白であり、大きなプラスです。

したがって、11tyサイトを生成するにはNode.jsだけが必要ですが、GatsbyWebサイトをレンダリングするにはNode.jsとReact.jsの両方が必要です。

レンダリングされたページ

ここに、これら11つのシステムの大きな違いがあります。 GatsbyはデフォルトでHTMLおよびJSサイトをレンダリングしますが、XNUMXtyはデフォルトでプレーンHTMLサイトをレンダリングします。

もちろん、必要に応じていつでも11tyテンプレートにJavaScriptを追加できますが、パッケージは単純化するように設計されています。たとえば、基本的な11tyインストールでは、マークダウンファイルに書き込んだ内容だけが出力されます。

一方、Gatsbyは、React.jsのルートを利用して、単純なHTML出力以上のものを生成します。たとえば、最適化された段階的に読み込まれる画像に加えて、流動的なページ遷移と全体的なリッチなユーザーエクスペリエンスのためのリンクプリフェッチが得られます。

ロード時間

React.jsはクライアントサイドのJavaScriptです。したがって、それを含むWebサイトは、サイトのコンテンツやその他の含まれるJS機能を表示する前に、最初にフレームワークをロードして訪問者のブラウザーで実行する必要があります。

簡単に言うと、XNUMXで生成された標準の静的HTMLサイトは、React.js機能を備えたGatsbyサイトよりも常に高速に読み込まれます。

使いやすさ

フロントエンドまたはサイト訪問者が見るものに関しては、Gatsbyは統合されたReact.js機能のために11ty以上の利点があります。

11tyよりもユーザーエクスペリエンスに重点を置いています。これには、プリフェッチされたページと画像管理に加えて、サイト管理者にとってより簡単なサイト移行が含まれます。

Gatsbyを使用すると、WordPressサイトを静的サイトに移行するために必要なのはgatsby-source-wordpressプラグインだけで、それ以外はすべて自動的に処理されます。 Gatsbyには、2,000を超える他のプラグインから選択することもできますが、11tyは近づいていません。

画像処理

Gatsbyは、画像処理に関して11tyを超える多くの利点を提供します。これには、外部データの最初の調達と静的ページのレンダリング、およびそれらがWebサイトの訪問者にどのように提供されるかが含まれます。

それに比べて、11tyは多くの画像処理機能を提供していません。ビルド時の画像変換と出力サイズの処理を支援するシンプルな画像プラグインがあります。それでも、ギャツビーが提供するものと比較すると見劣りします。

テンプレートの柔軟性

ここが11tyが輝くところです。ユーザーエクスペリエンスに重点を置いているGatsbyとは異なり、11tyはシンプルさと自由に重点を置いています。

11の異なるテンプレート言語を使用して10tyテンプレートを作成できます。さらに、XNUMXつのプロジェクトで、XNUMXつだけを使用することも、XNUMXつ、XNUMXつ、またはすべてのこれらの異なる言語を組み合わせることができます。問題ない。

GatsbyはMarkdownとJavaScriptテンプレートファイルのみを受け入れますが、11tyはHTML、Markdown、Nunjucks、Liquid、JavaScript、Haml、EJS、Mustache、Handlebarsを受け入れます。

XNUMXはまた、フロントマターと外部データをうまく組み合わせて、必要なサイト構造を作成します。さらに、テンプレート作成はGatsbyにとって比較的困難な作業ですが、すべてが簡単に見えるようになります。

コミュニティとプラグイン

コミュニティとプラグインに関して言えば、Gatsbyコミュニティは、11tyコミュニティよりもはるかに大きく、より機知に富んでいます。

11tyプロジェクトを拡張するために数えることができるテンプレートとプラグインはほんの一握りですが、Gatsbyは2,000を超えるプラグインを誇っています。検索、データソーシング、eコマース、分析、コンテンツ管理など、幅広いタスクを実行します。

ギャツビーには商業的な支援もあるので、将来的にはより多くの活動と改善が期待できます。

API統合

Gatsbyは、より大きく活気のあるコミュニティを考えると、現在11tyよりも多くのAPIやサービスに接続しています。これはより成熟したプロジェクトであり、これはその広範な統合から非常に明白です。

GatsbyのAPIプラグインのリストには、eコマース用のShopify、Snipcart、Bigcommerce、検索用のAlgolia、Netlify、ホスティング用のAmazon S3に加えて、コンテンツソーシング用のDrupal、Airtable、WordPressが含まれます。

もちろん、もっとたくさんあり、最も人気のあるオンラインサービスがサポートされています。必要なものを検索するだけです。

追加サービス

静的ページを自分で簡単にホストすることも、多くの手頃なサービスを使用して、ライブWebサーバーを管理する手間を省くことができます。最も人気のあるものには、Netlify、Azure、AWSAmplifyなどがあります。

さらに、Gatsbyは、Gatsbyサイトのシームレスな構築、コラボレーション、展開のためのGatsby Cloudも提供しています。また、パフォーマンスレポート、増分ビルド、リアルタイムのと組み合わせた、シンプルで高性能なLC / MSシステムおよび展開プレビュー。

これは11tyに欠けているもうXNUMXつの機能です。

どちらのフレームワークも GitHub、ジャムスタックプロジェクトはそうあるべきです。そのため、Strapi のようなヘッドレス CMS を使用して Git 上でプロジェクトを管理し、レンダリング後に Netlify のようなサービスにデプロイすることができます。

学習曲線

ギャツビーは11tyよりも高い学習曲線を持っています。これは、学ぶべき慣習が非常に多く、非常に多くの分野でもあるためです。ただし、Gatsbyが最適なツールである場合は、余分な労力が報われるはずです。

まとめ

このギャツビーと11tyの比較の終わりに来ると、これらXNUMXつのパッケージがどれほど似ているが異なるかがわかります。

Gatsbyは、優れたユーザーエクスペリエンスが組み込まれた静的なWebサイトが必要な場合に最適です。 11tyは、ユニークなものを作成したい上級ユーザーに最適です。

もちろん、その間に他のユースケースがあります。プロジェクトの目標を熟考して、XNUMXつのうちどちらが最適なソリューションであるかを判断する必要があります。

ギャツビー対11tyの比較