Jamstack

Apa itu Jamstack

"Jamstack" yang sebenarnya adalah JAM dan stack dimana JAM adalah akronim dari JavaScript, API & Markup. Sebuah arsitektur yang memisahkan web layer dari data dan business logic.

• JavaScript

  Semua fungsionalitas dilakukan oleh JavaScript, seperti request API atau merender halaman statis. Banyak library atau framework yang bisa digunakan sesuai kebutuhan.

• APIs

  Server side operation seperti koneksi ke database atau terhubung ke third-party services.

• Markup

  Pre-render halaman statis HTML yang dikirimkan ke borwser, di-generate dari Markdown atau dengan Static Site Generator.

Workflow

Setiap push ke Version Control System akan trigger build di CDN dimana SSG - Static Site Generator akan dijalankan, proses ini kemudian menghasilkan static asset yang dikirim ke browser. Datasource umumnya menggunakan HeadlessCMS yang memudahkan untuk mengatur content seperti Strapi, Contentful, Sanity.io.

Keuntungan

• Performance

  Jamstack generate page selama build sehingga hanya static yang terkirim. Layanan CDN dapat menerima request dengan cepat tanpa infrastruktur kompleks

• Developer Experience

  Sangat banyak variasi teknologi yang bisa digunakan. Developer punya kebebasan untuk memilih framework, trhid-party APIs yang mempercepat proses development dan menyenangkan untuk dilakukan.

• Security

  Kita tidak perlu khawatir dengan keamanan karena aplikasi terpecah menjadi beberapa layanan.

• Scalability

  Dengan CDN mudah untuk mengatur traffic

---

Development

Untuk generate halaman asset HTML banyak cara yang dilakukan.

Hand Coding

Menulis HTML untuk halaman yang sederhana.

Static Site Generator

• Next JS
• Hugo
• Gatsby

See more SSG

---

Deployment

• Vercel
• GitHub Pages
• Amazon S3

See more Hosting & Deployment

---

CMS

Secara umum dikenal dengan HeadlessCMS untuk mengatur content.

• Netlify CMS
• Strapi
• Contentful
• Sanity.io

See more Headless CMS

---

Static Web Service

List untuk layanan yang bisa digunakan awesome-static-website-services

---

Referensi

Jamstack org * Jamstack WTF * Contentful * jamstack-architecture-and-scenarios *