Gatsby：静的レンダリングと動的レンダリングのためのReactフレームワーク

アプリのように動作するサイトのためのReactフレームワーク

GatsbyはReactに基づく無料のオープンソースフレームワークです。READMEは、動的にレンダリングされるサイトの制御とスケーラビリティを、静的サイト生成の速度と組み合わせたものと説明しています。これは、保守可能でコンテンツが豊富で高性能なウェブサイトを必要とするプロフェッショナル開発者を対象としています。リポジトリはLernaで管理されるmonorepoであり、複数のパッケージが1つのコードベースに存在し、それぞれがnpmに公開されます。READMEは、Gatsbyサイトは単なる静的ページではなく完全に機能するReactアプリであり、ブログ、eコマース、ユーザーダッシュボードをサポートできると強調しています。また、データロード、レンダリングオプション、組み込みのパフォーマンス、モダンスタック、低コストホスティングを主要な機能として挙げています。プロジェクトのホームページはgatsbyjs.comで、デフォルトブランチはmasterです。

あらゆるソースからデータを取得し、単一のGraphQLレイヤーでクエリする

Gatsbyのデータ処理はソースプラグインを中心に構築されています。Markdownファイル、ContentfulやWordPressなどのヘッドレスCMS、RESTやGraphQL APIからコンテンツを取得できます。ロード後、すべてのデータはGatsbyの統一されたGraphQLインターフェースを通じて公開されるため、ソースに関係なくコンポーネントは同じインターフェースでクエリします。これにより、コンテンツソースがレンダリングレイヤーから分離され、バックエンドが異なってもチームは一貫したワークフローを得られます。READMEは「どこからでもデータをロード」と明示し、ソースプラグインを使用してデータをロードし、GatsbyのGraphQLインターフェースに対して開発することを強調しています。また、「ソースプラグインを使用してデータをロードし、Gatsbyの統一されたGraphQLインターフェースを使用して開発する」と指示しています。これは中核的な差別化要因です：データソースがクエリモデルを決定するわけではありません。

ページ単位のレンダリングオプション：SSG、DSG、SSR

Gatsbyは3つのレンダリングオプションをサポートしています：静的サイト生成（SSG）、遅延静的生成（DSG）、サーバーサイドレンダリング（SSR）です。選択はプロジェクト単位ではなくページ単位で行われます。この細かい制御により、ほとんどのページで静的生成の速度を維持しつつ、必要な場所で動的レンダリングを選択でき、サイト全体を1つのモードとして扱う必要がありません。READMEはこれらを「代替レンダリングオプション」と呼び、「ページごとに」存在すると述べ、パフォーマンスと生産性の両方を犠牲にすることなく最適化できるとしています。また、gatsbyjs.com/docs/conceptual/rendering-options/ の概念ドキュメントへのリンクを提供しています。これは、静的か動的かという二元的な選択よりも柔軟です。

組み込みのパフォーマンス作業

READMEはパフォーマンスが組み込まれていると述べています。Gatsbyはコード分割、画像最適化、クリティカルスタイルのインライン化、遅延ロード、リソースのプリフェッチを自動化します。これらはデフォルトで行われ、手動調整は不要と主張しています。READMEにはベンチマーク数値や監査スコアは含まれておらず、これらのメカニズムをフレームワークの意図された動作として説明しているだけです。「デフォルトでパフォーマンス監査に合格」と述べていますが、具体的な結果は引用していません。そのフレーズはプロジェクトの主張であり、測定された保証ではありません。リストされたメカニズムは具体的です：コード分割、画像最適化、クリティカルスタイルのインライン化、遅延ロード、プリフェッチです。READMEはプリフェッチの後に「など」と付け加えていますが、それ以上は列挙していません。

ホスティングとクイックスタートの経路

Gatsbyサイトはサーバーを必要としないため、CDN上で完全にホストでき、コストを低く抑えられます。READMEは、多くのGatsbyサイトが無料でホストできるサービスの例としてNetlifyを挙げています。クイックスタートのフローには、Netlifyにサイトをデプロイするリンクが含まれており、その後、動作するサイト、リンクされたリポジトリ、プッシュ時の自動再ビルドと再デプロイという3つの結果が得られます。ローカル開発の経路では、npm init gatsbyでプロジェクトを初期化し、新しいディレクトリ内でnpm run developを実行します。サイトはhttp://localhost:8000で実行され、src/pages/index.jsを編集するとブラウザがリアルタイムで更新されます。READMEにはNetlify以外のホスティングプロバイダは記載されていません。

プロジェクト構造、ドキュメント、ライセンス

リポジトリはLernaで管理されるmonorepoであり、packagesディレクトリの下に複数のパッケージがあります。READMEは、v2からv3、v3からv4、v4からv5への移行ガイドへのリンク、リリースノート、バージョンサポートドキュメントへのリンクを提供しています。また、チュートリアルとドキュメントサイトを指し、ほとんどの開発者は詳細なチュートリアルから始めることを推奨しています。貢献ガイドライン、行動規範、「貢献方法」ドキュメントもリンクされています。プロジェクトはMITライセンスの下でリリースされています。ライセンスは、使用、コピー、変更、マージ、公開、配布、サブライセンス、販売の権利を許可し、ソフトウェアは「現状のまま」提供され、いかなる種類の保証もないと述べています。ライセンステキストは、サポート、セキュリティ、本番準備については触れていません。これらはライセンスの対象外です。

編集部の結論

READMEはGatsbyを、静的レンダリングと動的レンダリングを組み合わせ、GraphQLでデータソースを抽象化し、複数のパフォーマンス機構を自動化するReactフレームワークとして説明しています。READMEにはベンチマーク、セキュリティ保証、Netlify以外のサポートホストのリストは含まれておらず、これらは未検証の質問です。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes