Gatsby JS, static site generator dengan memanfaatkan ReactJS

Last Updated on January 18, 2023 by

Perkembangan internet telah mendorong hampir semua pihak untuk memiliki eksistensi di dunia maya ini. Salah satu cara untuk mempertegas eksistensi tersebut adalah dengan situs web milik sendiri. Jika Anda sedang mencari cara untuk membuat web sederhana, saat ini telah muncul solusi static site generator atau SSG yang mampu mempercepat pembangunan dan pengelolaan situs web Anda. Salah satu layanan SSG adalah Gatsby JS yang kali ini akan kami bahas. Penasaran ingin tahu lebih lanjut? Simak artikel kami berikut ini!

Apa itu Gatsby JS Static Site Generator?

Sebelum membahas lebih lanjut, mungkin ada baiknya kita mengenal sedikit tentang situs web statis. Website statis adalah situs web yang kontennya bersifat statis dan sepenuhnya diproses di sisi klien, jadi kontennya sama untuk seluruh pengunjung. Situs web statis cocok diterapkan jika Anda memiliki konten yang tidak memerlukan pemrosesan data pengguna. Contohnya seperti situs web yang memuat informasi dasar tentang suatu perusahaan atau situs web yang isinya kebanyakan artikel dan berita.

Saat ini, banyak yang memanfaatkan static site generator (SSG) untuk pembuatan website statis karena dapat mempercepat performa situs web dan membebaskan penggunanya untuk membuat konten dengan berbagai format. Hal ini karena pada situs yang dibuat dengan SSG, konten-konten  dan template situs web dipisahkan dengan jelas. Saat halaman web di-build, konten dan template baru akan digabungkan untuk kemudian dikirim ke web server atau object storage service seperti Amazon S3, Netlify atau Gatsby Hosting. Arsitektur website seperti ini disebut Jamstack. Pada Jamstack, sisi frontend yang memuat JavaScript, HTML dan CSS serta backend yang berisi content API dipisahkan. Konten-konten di situs web akan masuk ke dalam API sehingga dapat digunakan oleh berbagai aplikasi dan layanan seperti SSG untuk menghasilkan halaman web.

Beberapa keunggulan yang dimiliki arsitektur Jamstack yaitu tidak menggunakan basis data untuk menyimpan konten sehingga aman dari serangan database, serta dapat di-hosting di web server biasa atau menggunakan layanan manajemen konten pihak ketiga.

Gatsby JS adalah salah satu framework yang memungkinkan pembuatan website statis dengan memanfaatkan React dan platform Gatsby Cloud yang membuat website dapat dibangun dan dipublikasi dengan cepat. Gatsby JS memadukan fungsi-fungsi dari React untuk antarmuka JavaScript dan GraphQL untuk pemrosesan data. Selain itu, Gatsby didukung dokumentasi dan komunitas yang mumpuni serta banyak plugin pihak ketiga yang dapat membantu pembuatan situs web.

Gatsby JS dapat mengolah dari berbagai sumber, seperti Content Management System (CMS), Markdown, dan lain-lain. Selain itu, Gatsby juga mampu membuat performa website lebih cepat. Untuk mencapainya, Gatsby hanya akan memuat elemen-elemen HTML, CSS, JavaScript, serta data-data yang penting saja. Setelah proses pemuatan selesai, Gatsby akan segera menyiapkan data-data pada halaman lainnya, sehingga pengunjung dapat menjelajahi situs web tanpa perlu menunggu lama.

Fitur-fitur Gatsby

1. Kombinasi data dari mana saja

Gatsby membuat pengembang situs web dapat memadukan data dari sumber-sumber berbeda dan memprosesnya di satu tempat. Pembuat situs dapat mengambil data untuk website dari Shopify, WordPress, Stripe dan sumber lainnya..

2. Situs dapat dimuat lebih cepat

Dalam membuat website statis, Gatsby mengutamakan pemuatan halaman web dan konten-konten yang penting serta menunda pemuatan elemen yang kurang penting. Dengan mekanisme ini website Gatsby akan memiliki performa yang jauh lebih tinggi dan SEO yang baik.

3. Aman dan dapat berkembang sesuai kebutuhan

Gatsby memiliki jaringan cloud hosting yaitu Gatsby Cloud yang memiliki kemampuan skalabilitas terkini, sehingga dapat menangani lalu lintas data yang besar, melindungi data dari celah-celah keamanan, dan membuat pengaksesan website menjadi lebih cepat untuk pengunjung.

4. Proses pembangunan yang mudah

Pembangunan aplikasi web dengan Gatsby dapat dilakukan lebih mudah dengan memanfaatkan  tema yang memuat komponen-komponen siap pakai atau dari starter yaitu situs web setengah jadi, serta dukungan plugin yang beragam. Plugin yang tersedia di antaranya untuk data dari CMS seperti WordPress atau Contentful, integrasi tools, dan pengelola gambar.

Memulai membangun website dengan Gatsby JS

Pada bagian ini kami akan membahas sedikit tentang pembangunan website menggunakan Gatsby. Langkah-langkah yang kami paparkan di sini dikutip dari tutorial resmi Gatsby JS yang memuat setiap tahapan dengan lebih lengkap.

Sebelum memulai, pastikan Anda sudah menginstal Node.js, Git, text editor untuk koding, dan Gatsby CLI. Untuk Gatsby CLI bisa Anda instal menggunakan node package manager (npm) yang sudah termasuk dalam Node.js. Penginstalan Gatsby CLI dilakukan dengan mengetik perintah berikut pada command prompt atau terminal di komputer Anda:

npm install -g gatsby-cli

Anda dapat memulai pembuatan website Gatsby dengan starter seperti gatsby-starter-default. Starter adalah situs web setengah jadi yang dapat Anda sesuaikan dengan kebutuhan. Namun jika ingin membangun semuanya dari awal, Anda bisa mengeksekusi perintah berikut pada direktori tempat proyek Anda akan dibangun (masih di command prompt):

gatsby new

Setelah menjalankan perintah di atas, Anda akan diarahkan ke proses setup interaktif untuk menentukan nama website, folder untuk tempat aset website, pilihan untuk menggunakan JavaScript atau TypeScript, penambahan CMS dan styling system, serta penginstalan plugin. Setelah proses pembuatan situs berhasil, jalankan situs Anda dengan mengeksekusi perintah:

gatsby develop

Situs Anda akan dapat dilihat pada server pengembangan lokal (komputer tempat Anda menjalankan perintah di atas) dengan mengunjungi alamat yang tertera pada hasil eksekusi perintah di web browser, biasanya http://localhost:8000. Situs akan terus aktif selama server pengembangan tersebut berjalan. Untuk menghentikannya, buka kembali command prompt, kemudian tekan Ctrl+C secara bersamaan pada keyboard.

Untuk mengaktifkan website Anda menggunakan Gatsby Cloud, langkah-langkahnya secara garis besar adalah sebagai berikut:

1. Buat akun di Gatsby Cloud.
2. Manfaatkan akun GitHub untuk membuat repository khusus untuk website Gatsby JS, lalu push proyek website Gatsby Anda ke repository tersebut (langkah-langkahnya dapat Anda temukan pada artikel kami sebelumnya).
3. Hubungkan akun Gatsby Cloud Anda dengan GitHub.
4. Pilih situs yang ada pada repository GitHub website Anda ke Gatsby Cloud.
5. Sesuaikan beberapa pengaturan yang diminta jika diperlukan, klik Next, lalu klik Build Site.
6. Anda akan kembali dibawa ke dashboard akun Gatsby Cloud dimana Anda dapat melihat situs web yang sedang di-deploy, lengkap dengan alamat situs yang dapat dikunjungi oleh siapa saja.

Setelah proses deployment, situs Anda akan diperbarui secara otomatis setiap kali ada push ke cabang main di repository situs Gatsby Anda.

Penutup

Itulah sedikit pembahasan kami mengenai Gatsby JS, salah satu solusi yang dapat Anda manfaatkan untuk membuat situs web statis. Keunggulan Gatsby di antaranya memungkinkan  performa website yang tinggi dan memungkinkan Anda untuk mengelola dan menyebarkan konten dengan cara Anda sendiri. Jadi bagaimana, tertarik menggunakan Gatsby untuk website Anda?

Jangan lupa untuk selalu ikuti appkey.id agar tidak ketinggalan pembahasan terbaru mengenai pengembangan aplikasi dan web!