Gatsby vs 11ty:どちらが良いですか?

次のプロジェクトで静的サイトジェネレーターを使用することにしましたが、Gatsbyと11tyのどちらかを選択できませんか? いくつかの啓蒙のために読んでください。

ギャツビー対11tyの議論は、静的なサイトとして継続され、 静的サイトジェネレーター DrupalやWordPressなどの従来のプラットフォームよりも人気が高まっています。

Gatsbyは、多くのことを簡単に実行できる強力なシステムですが、11tyは、物事をシンプルかつ効率的に保ちます。 どちらのシステムもJavaScriptを利用しています。 しかし、ギャツビーはに基づいていますが 反応する、11tyはNode.js上に構築されています。

XNUMXつのプラットフォーム間のこの比較では、次のプロジェクトに最適なプラットフォームを決定するのに役立つ主要な機能を確認します。

ギャツビー対11tyの比較

ギャツビー11ty
開発プラットフォーム:React.jsNode.js
レンダリングされたページ:HTMLとJSHTML
読み込み時間:尊大速く
使いやすさ:トップ平均
画像処理:トップ平均
テンプレートの柔軟性:平均トップ
コミュニティとプラグイン:より大きいより小さい
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サイトのシームレスな構築、コラボレーション、および展開のためのGatsbyCloudも提供しています。 また、パフォーマンスレポート、インクリメンタルビルド、リアルタイムのCMSと展開のプレビューが付属しています。

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

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

学習曲線

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

まとめ

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

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

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

Nnamdi Okeke

ンナムディ・オケケ

Nnamdi Okekeは、さまざまな本を読むのが大好きなコンピューター愛好家です。 彼はWindows/MacよりもLinuxを好み、使用しています。
当初からのUbuntu。 ツイッターで彼を捕まえることができます ボンゴトラックス

記事:278

技術者のものを受け取る

技術トレンド、スタートアップトレンド、レビュー、オンライン収入、Webツール、およびマーケティングを月にXNUMX〜XNUMX回

コメントを残す

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *