Mengenal apa itu SSG (Static Site Generator)

Faisal Hanafi 6 September 2022

Mengenal apa itu SSG (Static Site Generator)

Hai coders....

Yuk mengenal yang namanya SSG. SSG merupakan singkatan dari Static Site Generator. Secara sederhana site static generator adalah alat yang menghasilkan situs web HTML statis penuh berdasarkan data mentah dan satu set template. Pada dasarnya, site static generator mengotomatiskan tugas pengkodean halaman HTML individual dan menyiapkan halaman tersebut untuk disajikan kepada pengguna sebelumnya. Karena halaman HTML ini dibuat sebelumnya, mereka dapat dimuat dengan sangat cepat di browser pengguna.

Site Static Generator adalah alternatif untuk sistem manajemen konten (CMS) — jenis alat lain untuk mengelola konten web, membuat halaman web, dan mengimplementasikan template. Template sendiri adalah format yang dapat digunakan kembali untuk konten web, pengembang menggunakan template untuk menghindari penulisan format yang sama berulang-ulang. Site Static Generator biasanya merupakan bagian dari pendekatan pengembangan web JAMstack.

Apa itu web statis?

web statis terdiri dari satu atau lebih halaman web HTML yang memuat dengan cara yang sama setiap saat. Situs dengan web statis kontras dengan situs web dinamis, yang memuat secara berbeda berdasarkan sejumlah input data yang berubah, seperti lokasi pengguna, waktu, atau tindakan pengguna. Sementara halaman web statis adalah file HTML sederhana yang dapat dimuat dengan cepat, halaman web dinamis memerlukan eksekusi kode JavaScript di dalam browser untuk dirender.

Apa perbedaan antara generator situs statis dan CMS?

Pada hari-hari awal Internet, situs web disimpan sebagai situs HTML statis, dengan semua halaman web ditata dan dikodekan terlebih dahulu. Ini tidak efisien karena mengharuskan pengembang untuk membuat kode setiap halaman web secara manual.

Sistem manajemen konten (CMS) muncul sebagai cara bagi pengembang untuk menghindari semua pengaturan manual itu. Alih-alih mengkode halaman sebelumnya, konten disimpan dalam database CMS, dan ketika pengguna meminta halaman, server melakukan hal berikut:

  • Query database untuk konten

  • Mengidentifikasi template yang sesuai dengan konten

  • Menghasilkan halaman

  • Melayani halaman ke pengguna

Konten dalam CMS harus sesuai dengan salah satu bidang yang ditawarkan oleh database CMS, tetapi selama itu, akan muncul di tempat yang tepat di situs web setiap saat.

SIte Static Generator adalah gabungan antara dua pendekatan ini. Seperti CMS, ini memungkinkan pengembang untuk menggunakan template dan secara otomatis membuat halaman web tetapi melakukan yang terakhir sebelumnya, bukan sebagai tanggapan atas permintaan pengguna. Ini membuat kinerja situs web lebih cepat, karena halaman web langsung siap dikirim ke pengguna akhir. Ini juga menawarkan penyesuaian yang lebih besar kepada pengembang, karena mereka tidak dibatasi oleh bidang basis data yang ditawarkan oleh CMS.

Bagaimana kerangka kerja frontend digunakan dengan static site generator?

Kerangka kerja frontend adalah kumpulan file dan folder kode prebuilt untuk membantu dengan desain dan pemformatan situs web. Kerangka kerja frontend umum termasuk Bootstrap, React, dan Vue.js, meskipun ada banyak lainnya.

Kerangka kerja frontend sangat membantu ketika pengembang awalnya membangun situs web. Namun, kerangka kerja frontend sendiri tidak menghasilkan halaman web HTML, kecuali jika pengembang menggunakan alat tambahan. Static Site Generator dapat digunakan bersama dengan kerangka kerja bagi pengembang untuk dengan cepat menyiapkan situs web atau aplikasi yang dirancang sepenuhnya untuk digunakan. Sebagian besar generator situs statis memungkinkan pengembang untuk menggunakan kerangka kerja apa pun yang mereka inginkan.

Apa sajakah generator situs statis yang umum digunakan?

Banyak generator situs statis tersedia untuk digunakan saat ini. Beberapa yang penting untuk diketahui adalah:

  • Jekyll
  • Gatsby
  • Hugo
  • Next.js
  • Nuxt.js
  • Astro

Demikian sedikit penjelasan mengenai Site Static Generator next time kita lebih menjelajahinya lagi ya coders semangat :)