Arsitektur publik Gatsby yang terdokumentasi
Gatsby dibangun di sekeliling React dan alat Node.js. Pengembang menulis komponen React, sementara Gatsby mengoordinasikan pengambilan data, kueri GraphQL, pembuatan halaman, pemrosesan aset, pembundelan, dan perilaku rendering yang dipilih.
Hal ini menjelaskan arsitektur framework yang didokumentasikan untuk proyek Gatsby. Penjelasan ini tidak menyimpulkan sistem hosting privat, layanan internal, atau topologi operasional di balik gatsbyjs.com.
Komponen inti
| Lapisan | Peran yang didokumentasikan secara publik |
|---|---|
| React | Menyediakan komponen, JSX, state, dan interaksi sisi browser. |
| API Gatsby | Menghubungkan konfigurasi, pengambilan data, pembuatan node, pembuatan halaman, dan pekerjaan siklus hidup rendering. |
| Lapisan data | Menormalisasi catatan yang bersumber sebagai node dan menyajikannya melalui skema GraphQL. |
| Plugin sumber | Mengimpor konten dari file, sistem konten, API, dan layanan. |
| GraphQL | Memilih bidang yang bersumber untuk halaman dan komponen dalam alur kerja data Gatsby. |
| Rendering | Mendukung SSG, DSG, SSR melalui getServerData, dan rute sisi klien. |
| Ekosistem plugin | Menambahkan sumber, transformasi, penanganan gambar, penataan gaya, analitik, dan integrasi lainnya. |
Dari konten menjadi halaman
- Plugin sumber mengambil atau membaca konten.
- Gatsby membuat node dan membangun skema datanya.
- Kueri halaman meminta bidang yang diperlukan.
- Templat React merender konten hasil kueri.
- Gatsby membuat atau menyajikan halaman sesuai dengan mode rendering-nya.
Halaman statis dibuat selama build. Halaman tertunda ditangguhkan hingga permintaan pertamanya pada infrastruktur yang kompatibel. Halaman SSR menjalankan logika saat permintaan melalui getServerData. Rute sisi klien mencadangkan jalur tertentu untuk perilaku aplikasi browser.
Arsitektur tersebut tidak menjamin waktu build, kecepatan halaman, atau hasil pencarian tertentu. Hasil tersebut bergantung pada latensi sumber, jumlah node dan halaman, desain kueri, gambar, JavaScript, caching, hosting, dan implementasinya sendiri.
