Apa itu Gatsby JS, dan Bagaimana Pengembang E-niaga Menggunakannya untuk Membuat Toko Cepat?

Scott Fitzgerald menulis surat kepada editornya pada tahun 1922 mengumumkan niatnya untuk mulai menulis novel baru yang ia gambarkan sebagai: 

“[S]sesuatu yang baru — sesuatu yang luar biasa dan indah dan sederhana dan berpola rumit.”

Tiga tahun kemudian, ia menerbitkan “The Great Gatsby.”

Kesederhanaan yang indah inilah, yang bertentangan dengan kemewahan karakter Jay Gatsby, yang diingat oleh kerangka kerja sumber terbuka GatsbyJS. Dibuat pada Mei 2015 oleh Kyle Mathews, Gatsby, pada dasarnya, adalah cara sederhana untuk membangun situs web dengan React.

Fitzgerald meninggal sebelum "The Great Gatsby" mendapat pujian luas, tetapi Mathews lebih beruntung. Lebih dari setengah tahun setelah diluncurkan, ketika Mathews berbicara di konferensi React pada Januari 2016, orang-orang sudah menggunakannya.

“Saya berasumsi bahwa orang hanya menggunakan situs statis untuk penurunan harga atau situs berbasis JSON, tetapi ternyata, ada sekelompok besar pengembang yang tertarik untuk mendorong batas-batas apa yang dapat dilakukan situs statis,” kata Mathews.

Popularitas tumbuh begitu pesat sehingga pada tahun 2018, Mathews dan beberapa kontributor inti membentuk Gatsby Inc. untuk membantu tim pengembangan membangun “situs web yang didukung CMS dengan alat modern”.

Saat ini, ada lebih dari 107.000 situs langsung di internet yang menggunakan Gatsby JS.

Apa itu Gatsby?

Gatsby adalah generator situs web statis sumber terbuka (SSG) yang didasarkan pada kerangka pengembangan frontend React dan memanfaatkan teknologi Webpack dan GraphQL. Ini dapat digunakan untuk membuat situs statis yang merupakan aplikasi web progresif, mengikuti standar web terbaru, dan dioptimalkan untuk kecepatan dan keamanan.

Dalam sebuah artikel di Blog Pengembang BigCommerce dari Karen White, mencatat persepsi bahwa SSG hanya dapat digunakan untuk situs yang berfokus pada konten, bukan situs dengan elemen dinamis. Namun dia mengatakan dengan React di sampingnya, Gatsby dapat membangun situs seperti aplikasi bahkan untuk e-niaga.

“Artinya, Gatsby menghadirkan kecepatan situs yang dibuat secara statis serta fungsionalitas kerangka kerja,” tulisnya.

PELAJARI LEBIH LANJUT TENTANG GATSBY + BIGCOMMERCE

Untuk informasi lebih lanjut tentang bagaimana Gatsby dan BigCommerce bekerja sama, lihat blog pengembang kami.

Baca Sekarang

1. Generator situs statis.

Di satu sisi, "generator situs statis" persis seperti apa suaranya. Tapi, apa arti sebenarnya? Apakah situs statis atau dinamis tergantung pada apakah halaman dikodekan sebagai halaman statis dan kemudian diakses oleh pengguna, atau jika halaman dibuat secara dinamis sesuai permintaan melalui sistem manajemen konten saat pengguna mengaksesnya. Yang terakhir membutuhkan pemrosesan sisi server.

Generator situs statis memberikan kompromi antara keduanya dengan memungkinkan pengembang pada dasarnya untuk "menulis secara dinamis dan mempublikasikan secara statis." Dengan SSG, pengembang membuat situs statis yang disebarkan ke server HTTP. Hanya ada file dan folder — tidak ada database, tidak ada rendering sisi server. Saat pengguna meminta halaman, server mengembalikan file yang cocok.

SSG juga memiliki manfaat keamanan siber. Penyerang dunia maya menggunakan metode seperti pembuatan skrip, injeksi database SQL, atau kerentanan database sisi server — tetapi SSG menghindarinya karena hanya terdiri dari file statis dan tidak merujuk database.

2. Bereaksi.

React adalah library JavaScript yang efisien dan fleksibel untuk membangun antarmuka pengguna, menurut Reactjs.org. Kerangka kerja berbasis komponen ini memberi pengembang serangkaian fungsionalitas inti yang ringan dan dapat diterapkan secara luas yang dapat mereka gunakan untuk membangun aplikasi satu halaman atau seluler.

Salah satu keuntungan menggunakan komponen React adalah build modular membantu menjaga semuanya tetap konsisten saat Anda memiliki antarmuka pengguna yang rumit.

3. GraphQL.

GraphQL adalah bahasa kueri untuk API dan waktu proses untuk memenuhi kueri tersebut dengan data Anda yang sudah ada. Ini telah menjadi populer di kalangan pengembang karena beberapa alasan. Pertama, permintaan data Anda dapat terstruktur secara deklaratif, yang berarti Anda dapat membuat kueri API untuk bidang yang tepat yang Anda inginkan tanpa harus berurusan dengan respons yang menyertakan properti tambahan.

Kemudian, kueri GraphQL dapat mencakup banyak sumber daya dalam satu permintaan. “A GraphQL API pada dasarnya memiliki satu titik akhir yang dapat menanyakan data apa pun yang tersedia untuknya,” kata White.

Ini mengubah desain API dan interaksi klien-server untuk meningkatkan pengalaman pengembang, memungkinkan pengalaman pengguna yang lancar bahkan lintas platform dan di seluler.

4. Paket Web.

Webpack adalah bundler modul sumber terbuka untuk JavaScript. Ini “menempatkan semua aset Anda — termasuk JavaScript, gambar, font, dan CSS, dalam grafik ketergantungan.” Ada beberapa keuntungan menggunakan Webpack, termasuk penataan gaya yang lebih mudah, pemecahan kode, lebih banyak kontrol dalam cara aset diproses, penyebaran produksi yang stabil, dan kecepatan pemuatan halaman yang lebih cepat.

Ekosistem Gatsby:Plugin dan Pemula

Plugin memungkinkan Anda menghubungkan Gatsby dengan platform pihak ketiga dan mengimpor data yang diekspos melalui lapisan GraphQL.

Salah satu alasan pengembang menyukai Gatsby adalah karena itu dibangun di atas React. Ini berarti Anda dapat menggunakan paket apa pun yang sudah Anda gunakan dengan NPM (pengelola paket untuk paket Node.js).

Gatsby memang datang dengan beberapa starter default dan mengurangi kebutuhan akan kode boilerplate. Karena Gatsby adalah open source, Anda juga akan memiliki akses ke plugin, starter, dan transformer dalam jumlah besar dan terus bertambah yang dibuat oleh komunitas Gatsby yang ada. Hanya dengan melihat halaman Gatsby di GitHub menunjukkan lebih dari 3.500 kontributor.

Selain itu, BigCommerce merilis template CMS Gatsby-Netlify untuk memulai pengembangan etalase PWA tanpa server.

4 Fitur Penting Gatsby

Jika ada satu hal yang dapat disetujui semua orang, situs web Gatsby bisa sangat cepat. Tetapi ada banyak keuntungan lain juga — terutama jika Anda seorang pengembang yang sudah terbiasa dengan React. Berikut adalah beberapa fitur Gatsby yang paling penting.

1. Dibuat untuk performa.

Menurut tes kinerja yang dilakukan oleh pendiri Gatsby, Kyle Matthews, situs Gatsby rata-rata 2-3 kali lebih cepat daripada jenis situs serupa, dan kerangka kerja itu sendiri bertanggung jawab atas kinerja, jadi itu tidak cocok bagi Anda sebagai pengembang.

“Yang harus Anda lakukan adalah membuat kode sumber, dan Gatsby.js kemudian akan mengkompilasi konfigurasi Webpack yang paling berkinerja untuk membangun situs Anda,” kata Sarah Mischinger di Storyblok.

Generator situs statis seperti Gatsby meningkatkan kecepatan dan kinerja karena yang harus dilakukan server hanyalah mengembalikan file alih-alih melakukan kueri basis data dan membuat setiap halaman sesuai permintaan. Gatsby menangani semua pengambilan data dan menggunakan data tersebut untuk menghasilkan file HTML statis, JavaScript, dan file CSS, sehingga membuatnya bekerja lebih cepat.

Dalam sebuah artikel di Medium, Nicholas Feitel menulis bahwa situs Gatsby-nya “memuat lebih dari dua kali lebih cepat dari aplikasi React sederhana saya dan LIMA kali lebih cepat dari situs kompleks seperti LinkedIn.” Dengan Gatsby, Anda tidak perlu bergantung pada server untuk pembuatan halaman dinamis — sebagai gantinya, pra-render pada build dan gunakan CDN untuk pengiriman.

2. Ekosistem sumber terbuka.

Gatsby memiliki ekosistem plugin yang luas, integrasi yang kuat, dan dokumentasi yang sangat baik. Komunitas open source yang luas adalah salah satu kekuatan terbesar meta-framework. Komunitas Gatsby telah membuat lebih dari 2.000 plugin, jadi kemungkinan besar Anda akan dapat menemukan alat yang sudah dibuat untuk memenuhi kebutuhan Anda.

3. Dapat dengan mudah mentransfer data.

Dengan Gatsby, Anda dapat memuat data dari hampir semua sumber data, sehingga Anda dapat menggunakan alat apa pun yang paling Anda sukai untuk mengelola konten sambil tetap menggunakan React dan GraphQL di sisi pengembangan. Plugin sumber memungkinkan Anda untuk berintegrasi dengan solusi SaaS dan alat pihak ketiga lainnya tanpa konfigurasi ekstensif, dan Gatsby juga menyediakan dukungan API untuk menambahkan data khusus.

Ini, kata Karen White, adalah kekuatan besar Gatsby:“Gatsby memperkenalkan konsep “jaringan konten” untuk menjelaskan caranya menautkan platform pihak ketiga.”

“Jaringan konten adalah perpindahan dari platform monolitik all-in-one menuju model di mana setiap platform pihak ketiga menyumbangkan fungsionalitas khusus untuk keseluruhan arsitektur — memungkinkan setiap platform untuk melakukan yang terbaik dan mesh konten untuk menyatukan semuanya dengan cara yang kohesif.”

4. Gatsby merender halaman dan rute dengan masalah minimal.

Hanya dengan menggunakan React, Anda masih harus membuat Route untuk komponen di folder pages Anda. Namun, di Gatsby, dengan memiliki komponen di folder halaman, halaman akan dibuat secara otomatis — tanpa Router atau sakelar.

Kesulitan dengan Kerangka Kerja Gatsby

Seperti kebanyakan kerangka kerja open source, Gatsby masih terus berkembang. Namun seperti yang ada sekarang, ada beberapa kerugian untuk bekerja dengannya, tergantung pada keterampilan pengembangan Anda dan waktu yang ingin Anda komit untuk membangun.

1. Kurva belajar yang tajam.

Jika Anda bersedia meluangkan waktu dan tenaga, Gatsby memiliki banyak dokumentasi kuat yang tersedia dan komunitas pengguna yang terlibat. Dan, seperti yang dicatat oleh Matthew Bunday dari Zen of React, “Mencurahkan terlalu banyak upaya untuk membangun toko online Anda menggunakan teknologi baru dapat mengurangi bisnis inti Anda.”

2. Plugin dan starter tidak selalu berkualitas tinggi.

Dengan pengembangan open source, Anda harus memperhatikan kualitas dari apa yang Anda dapatkan dan standar apa yang diikuti oleh pembuatnya. Kalin Chernev menulis, “Jika GatsbyJS dianggap serius, contoh dan titik awal dalam komunitas harus memiliki standar yang lebih baik.”

3 Kasus Penggunaan Gatsby yang Menonjol

Kasus penggunaan untuk Gatsby selalu berkembang, tetapi berikut adalah tiga kasus penggunaan teratas saat ini — termasuk satu kasus penggunaan khusus perdagangan dalam perdagangan tanpa kepala.

1. Buat situs statis menggunakan CMS tanpa kepala.

Jika yang Anda butuhkan hanyalah halaman web statis yang menyajikan HTML, JavaScript, dan CSS, Gatsby adalah pilihan yang sangat baik. Anda dapat menggunakannya untuk membuat halaman secara dinamis dari hampir semua sumber. Saat memperbarui konten di CMS, Anda dapat mengonfigurasi pemicu otomatis untuk memperbarui konten di situs statis. Itu berarti situs web akan dibuat ulang hanya jika kontennya diperbarui.

2. Buat aplikasi web progresif (PWA).

Gatsby dirancang dari bawah ke atas untuk menjadi kerangka kerja PWA. Muncul dengan fitur PWA yang kuat dan dibuat agar cepat dan mudah diakses.

Gatsby memberikan pengalaman seperti PWA karena itu membuat situs Anda sebelumnya — tidak ada kode sisi server, database, dll. Setelah dimuat, React mengambil alih untuk memberikan pengalaman menjelajah seperti aplikasi dan kinerja yang dirasakan tinggi. Pengoptimalan siap pakai yang menyertai Gatsby mencakup pemecahan bundel kode, rute pemuatan lambat, pengambilan aset penting sebelumnya, dan penyisipan CSS penting.

3. Buat situs e-niaga tanpa kepala.

Konsep jaring konten Gatsby selaras dengan pendekatan perdagangan tanpa kepala untuk mengganti solusi all-in-one dengan modularitas dan fleksibilitas. Perdagangan tanpa kepala memisahkan frontend — atau kepala — situs e-niaga dari mesin e-niaga yang menggerakkan backend.

Seperti yang dijelaskan Karen White:“Situs e-niaga tanpa kepala yang menggunakan BigCommerce akan menggunakan BigCommerce untuk mengelola produk, pesanan, dan pembuatan keranjang, tetapi teknologi selain Stencil untuk merender lapisan presentasi. Lapisan presentasi alternatif dapat berupa front end React kustom, CMS seperti WordPress atau Drupal — atau Gatsby.”

Mengevaluasi apakah Gatsby Masuk Akal untuk Anda

Apakah Anda harus menggunakan Gatsby atau tidak sangat bergantung pada visi Anda untuk bisnis dan kemampuan pengembangan internal Anda.

Jika Anda memiliki tim yang nyaman dengan teknologi terkait Gatsby, dan terutama jika Anda sudah memiliki sistem manajemen konten yang Anda sukai, maka menggunakan Gatsby untuk toko e-niaga Anda adalah pilihan yang bagus. Toko yang sangat kompleks atau sering menambahkan produk baru harus melihat lebih dekat pro dan kontra sebelum terjun.

1. Apakah Anda menginginkan situs statis, seperti situs web atau blog pribadi yang sederhana?

"Statis" tidak berarti bahwa konten tidak interaktif atau tidak pernah berubah. Tetapi situs statis adalah pilihan tepat untuk situs web sederhana dengan banyak konten yang tidak sering berubah. Meskipun secara teknis Anda tidak harus memiliki CMS untuk mengelola konten ini, sangat disarankan untuk mempermudah pekerjaan dengan konten tersebut.

2. Apakah situs Anda rumit?

Situs yang sangat kompleks dengan banyak data yang berubah dan bagian yang bergerak dapat diperlambat dengan meningkatkan waktu pembuatan. Selain itu, jika situs Anda bergantung pada data yang tidak diambil hingga halaman dirender, Anda akan kehilangan manfaat dari halaman yang dibuat secara statis.

3. Apakah Anda sudah memiliki rute yang dibuat secara dinamis?

Jika Anda memiliki rute yang dibuat secara dinamis di situs Anda, Anda tidak akan mendapatkan manfaat dari laman yang dibuat secara statis jika Anda tidak mengetahuinya pada waktu pembuatan.

Kesimpulan

Gatsby sangat populer di kalangan pengembang saat ini, dan untuk alasan yang bagus. Pengembang menyukai React, yang menjadi basis Gatsby, dan ada banyak sumber daya yang tersedia di sekitar React dan Gatsby. Ini juga sangat fleksibel dan dapat diperpanjang — dan ketika dipasangkan dengan sistem manajemen konten tanpa kepala, ini bisa menjadi cara yang cepat dan kuat untuk mengirimkan konten.

Gatsby dan generator situs statis serupa juga mulai menjadi populer untuk toko e-niaga — tetapi itu sedikit lebih merupakan kasus penggunaan yang kompleks. Kami menyarankan untuk benar-benar menggali persyaratan dan kemampuan sebelum terjun. Namun, untuk jenis toko yang tepat dengan tim yang tepat, Gatsby dapat dengan indah dan cepat menghadirkan etalase yang kaya konten dengan backend e-niaga yang stabil dan aman.