gatsbyjs.com

Gatsbyの公開ドキュメントに記載されたアーキテクチャ

GatsbyはReactとNode.jsツールを中心に構築されています。開発者がReactコンポーネントを記述し、Gatsbyがデータ取得、GraphQLクエリ、ページ作成、アセット処理、バンドル、選択したレンダリング動作を調整します。

これはGatsbyプロジェクトについてドキュメントに記載されたフレームワークアーキテクチャを説明するものです。gatsbyjs.comの背後にある非公開のホスティングシステム、内部サービス、運用トポロジーを推測するものではありません。

中核となる構成要素

レイヤー	公開ドキュメントに記載された役割
React	コンポーネント、JSX、state、ブラウザ側のインタラクションを提供します。
Gatsby API	設定、データ取得、ノード作成、ページ作成、レンダリングのライフサイクル処理を接続します。
データレイヤー	取得したレコードをノードとして正規化し、GraphQLスキーマを通じて公開します。
ソースプラグイン	ファイル、コンテンツシステム、API、サービスからコンテンツを取り込みます。
GraphQL	Gatsbyのデータワークフローで、ページとコンポーネント用に取得済みフィールドを選択します。
レンダリング	SSG、DSG、getServerDataによるSSR、クライアントサイドルートに対応します。
プラグインエコシステム	ソース、変換、画像処理、スタイリング、分析、その他の統合機能を追加します。

コンテンツからページまで

1. ソースプラグインがコンテンツを取得または読み取ります。
2. Gatsbyがノードを作成し、データスキーマを構築します。
3. ページクエリが必要なフィールドを要求します。
4. Reactテンプレートがクエリされたコンテンツをレンダリングします。
5. Gatsbyがレンダリングモードに従ってページを生成または配信します。

静的ページはビルド中に生成されます。遅延ページは、互換性のあるインフラ上で最初にリクエストされるまで延期されます。SSRページは、getServerDataを通じてリクエスト時のロジックを実行します。クライアントサイドルートは、選択したパスをブラウザアプリケーションの動作用に確保します。

このアーキテクチャは、特定のビルド時間、ページ速度、検索結果を保証しません。それらの結果は、ソースの遅延、ノード数とページ数、クエリ設計、画像、JavaScript、キャッシュ、ホスティング、実装そのものによって異なります。