# Headless commerce: tiga tingkatan, pilihan yang nyata, dan mana yang mungkin sebenarnya Anda butuhkan

> Kebanyakan bisnis yang meminta "headless commerce" sebenarnya menginginkan commerce yang disematkan lewat widget. Segelintir butuh commercetools atau Saleor. Inilah kerangka keputusan yang jujur.

Ryan Badger - 3 Oktober 2025 - 6 menit baca

## Arti sebenarnya "headless commerce"

Headless commerce berarti memisahkan frontend (yang dilihat pelanggan Anda) dari backend commerce (keranjang, checkout, inventaris, pesanan). Alih-alih memilih platform yang menggabungkan keduanya (seperti toko bertema Shopify), Anda membangun atau membeli frontend secara terpisah dan menghubungkannya ke API commerce.

Kata "headless" dipakai dengan longgar. Ada tiga tingkatan yang berbeda:

- **Full headless:** Anda membangun frontend dari nol (React, Next.js, Astro, Nuxt) dan memanggil API commerce untuk setiap data. Daftar produk, status keranjang, checkout. Anda menguasai seluruh UX.
- **Headless dengan widget tersemat:** frontend Anda sudah ada (situs pemasaran, build Webflow, blog). Anda memasukkan widget commerce yang tampil di dalamnya. Bukan "full headless" tetapi tetap terpisah: situs Anda bukan templat platform commerce.
- **Tradisional (bukan headless):** Anda memilih Shopify atau BigCommerce atau WooCommerce, memakai sistem tema mereka, situs Anda ADALAH platform commerce itu.

Sebagian besar hype "headless" adalah soal tingkat 1. Kebanyakan toko sebenarnya tidak membutuhkannya.

## Kapan full headless sepadan

Full headless balik modal dalam empat situasi spesifik. Di luar itu, ini waktu rekayasa yang tidak akan kembali.

1. **Anda butuh UX kustom yang tidak terjangkau tema platform.** Konfigurator interaktif, penampil produk 3D, tata letak storytelling yang sarat konten. Membangun ulang frontend memang akan terjadi; headless hanya berarti Anda juga bisa mengendalikan aliran data commerce.
2. **Distribusi multisaluran dari satu katalog.** Situs web + aplikasi seluler + kios di toko + antarmuka suara/chat. API commerce bersama yang menggerakkan semuanya benar-benar sulit dilakukan secara tradisional.
3. **Skala di mana platform tradisional menjadi hambatan.** Shopify Plus menangani sebagian besar ini sekarang, tetapi jika Anda di volume Nike/IKEA, API commerce di belakang frontend Anda sendiri memberi kontrol performa yang tidak didapat dari toko bertema.
4. **Tim engineering dengan kapasitas frontend sungguhan.** Jika Anda punya engineer frontend khusus, headless menjadi benar-benar lebih murah dari waktu ke waktu karena Anda berhenti membayar pajak pengembang tema.

Jika Anda tidak masuk ke salah satu dari keempatnya, full headless hampir selalu pertukaran yang lebih buruk daripada memilih platform yang dihosting.

## Pilihan untuk full headless

Untuk tim yang memang butuh full headless, daftar pendek yang realistis di 2026:

- **commercetools**: kelas enterprise, rekayasa Jerman, mahal. Implementasi acuan composable commerce.
- **Saleor**: open-source, self-hosted atau terkelola, API GraphQL yang kuat. Ramah developer.
- **Medusa**: open-source, native JavaScript, ekosistem yang tumbuh. Lebih dekat ke bentuk "Shopify sebagai API".
- **BigCommerce Headless**: pakai BigCommerce sebagai backend, bawa frontend Anda sendiri. Opsi "migrasi tanpa membangun ulang backend" yang paling bersih.
- **Shopify Storefront API**: pakai commerce Shopify di balik frontend kustom. Hosting + kompleksitas pengembangan jadi tanggungan Anda; inventaris / pesanan / pembayaran tetap di Shopify.
- **Shoprocket lewat SDK `@shoprocket/core`**: produk, keranjang, dan sesi sepenuhnya programatik ([shoprocket-js](https://github.com/shoprocket/shoprocket-js)). Lewati widget, render UI Anda sendiri, bicara langsung ke API kami. Lihat bagian "Posisi Shoprocket" di bawah untuk catatannya.

Peringkat kasar menurut ergonomi pengembang: Medusa > Saleor > Shopify Storefront API > BigCommerce > commercetools. Peringkat kasar menurut keandalan enterprise: commercetools > Shopify > BigCommerce > Saleor > Medusa. Pilih berdasarkan apa yang Anda optimalkan.

## Opsi widget tersemat (kategori yang sebenarnya diinginkan kebanyakan orang)

Kebanyakan bisnis yang mengaku menginginkan "headless" sebenarnya menginginkan ini: situs pemasaran atau konten yang sudah mereka punya, plus commerce yang tinggal dicolokkan tanpa memaksa pembangunan ulang.

Shoprocket, Snipcart, dan Ecwid semuanya ada di sini. Anda mempertahankan situs Anda (Webflow, WordPress, HTML statis, Astro, Framer), menempelkan satu tag script, commerce tampil di dalamnya. Terpisah tetapi tidak diimplementasikan ulang.

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

API-nya juga tersedia jika Anda ingin melangkah lebih jauh (kartu produk kustom dengan markup Anda sendiri, mengambil data dari API kami). Kontrol programatik penuh ada di SDK JS ([shoprocket-js](https://github.com/shoprocket/shoprocket-js)) untuk event, manipulasi keranjang, dan UI kustom.

**Kapan tingkat ini mengalahkan full headless:**

- Anda sudah punya situs yang Anda sukai (tidak mau membangun ulang frontend)
- Anda tidak punya engineer frontend khusus
- Kebutuhan UX Anda cocok dengan yang dirender widget
- Anda ingin commerce rilis dalam hitungan minggu, bukan kuartal

**Kapan naik ke full headless:**

- Widget tidak bisa mencapai UX yang Anda butuhkan
- Anda perlu merender produk di konteks yang tidak dicakup widget (aplikasi seluler native, kios, TV)
- Anda punya tim engineering untuk mendukungnya

## Cara tahu tingkat mana yang Anda butuhkan

Tanyakan dua pertanyaan pada diri Anda:

1. **Apakah kebutuhan UX saya muat di dalam satu bagian persegi panjang pada situs web saya yang sudah ada?** Jika ya, widget tersemat sudah cukup. Jika tidak, Anda berada di wilayah full headless.
2. **Apakah saya punya engineer frontend khusus untuk 18 bulan ke depan?** Jika tidak, lewati full headless apa pun yang Anda kira Anda butuhkan.

Pertanyaan kedua itu penentunya. Full headless tanpa engineer frontend adalah tumpukan utang teknis yang menunggu terjadi. Vendor platform commerce akan membantu, tetapi tidak bisa menggantikan seseorang yang memiliki frontend kustom Anda.

## Bagaimana dengan "composable commerce"

Gagasan yang sama, dikemas ulang untuk siklus pembelian enterprise. "Composable" = pilih yang terbaik di kelasnya untuk setiap fungsi (CMS, pencarian, PIM, keranjang, checkout, pajak) dan sambungkan lewat API. Berhasil jika Anda punya tim untuk menyambungkannya. Menjadi beban pemeliharaan jika tidak.

Untuk toko dengan pendapatan di bawah ~$10 juta/tahun, composable hampir selalu kesalahan. Permukaan integrasinya masif dan setiap pergantian vendor merusak sesuatu.

## Posisi Shoprocket

Kami mencakup tingkat 1 dan 2, dan kami jujur tentang mana yang sebaiknya Anda pilih.

**Tingkat 2 (widget tersemat), bawaan untuk 95% pelanggan kami.** Tempelkan satu tag script, widget tampil di dalam situs Anda yang sudah ada. Katalog, keranjang, checkout, pencarian, varian, pembayaran, semuanya tertangani. Langganan tetap mulai $29/bln, biaya transaksi 0%. Ini jalur cepat dan yang tepat untuk kebanyakan toko.

**Tingkat 1 (full headless), didukung secara teknis, jarang direkomendasikan.** SDK `@shoprocket/core` ([shoprocket-js](https://github.com/shoprocket/shoprocket-js)) mengekspos produk, status keranjang, dan sesi secara programatik. Anda bisa merender setiap piksel sendiri dan bicara langsung ke API kami. Langganan tetap yang sama menopangnya.

**Mengapa kami tidak mendorong tingkat 1 padahal bisa:** menutup setiap kasus tepi di frontend kustom (status memuat, keranjang kosong, UI pemilihan varian, alur checkout, penanganan error, aksesibilitas, viewport ponsel, i18n di 21 lokal) adalah pekerjaan rekayasa yang besar. Widget sudah memiliki semuanya, teruji di ribuan toko. Anda mengimplementasikan ulang masalah yang sudah terpecahkan kecuali Anda punya alasan UX spesifik untuk tidak melakukannya.

Jika Anda punya alasan UX spesifik itu dan kapasitas engineering khusus, SDK inti tersedia. Jika tidak: tempel widget dan lanjutkan.

> **Tips:** Jika vendor menyebut dirinya "headless" tetapi tidak bisa menjawab "framework frontend apa yang Anda rekomendasikan?", kemungkinan mereka widget tersemat. Itu tidak masalah; cukup ketahui apa yang Anda beli.

## TL;DR

- **Headless penuh:** commercetools, Saleor, Medusa, Shopify Storefront API, BigCommerce Headless. Hanya sepadan dengan kebutuhan UX spesifik, multisaluran, skala, atau tim pengembang khusus.
- **Widget tersemat:** Shoprocket, Snipcart, Ecwid. Jawaban yang tepat untuk kebanyakan toko yang "ingin headless". Shoprocket juga mendukung full headless lewat SDK inti untuk kasus langka saat Anda membutuhkannya.
- **Tradisional:** Shopify + tema, BigCommerce + tema. Tetap jalur tercepat jika Anda belum punya situs.

Kebanyakan bisnis yang meminta headless sebenarnya menginginkan tingkat widget tersemat. [Mulai uji coba gratis Shoprocket](https://app-v3.shoprocket.io/signup) jika itu terdengar seperti Anda. 14 hari, tanpa kartu. [Harga](https://v3.shoprocket.io/id/harga.md) mulai $29.

---

- HTML version: https://v3.shoprocket.io/id/blog/headless-commerce-tiga-tingkatan-pilihan-nyata-dan-mana-yang-anda-butuhkan
- Language: Bahasa Indonesia (id)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Deutsch](https://v3.shoprocket.io/de/blog/headless-commerce-drei-stufen-optionen-entscheidung.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [English](https://v3.shoprocket.io/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Español](https://v3.shoprocket.io/es/blog/headless-commerce-tres-niveles-opciones-reales.md), [Français](https://v3.shoprocket.io/fr/blog/commerce-headless-trois-niveaux-quelle-option-choisir.md), [עברית](https://v3.shoprocket.io/he/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Italiano](https://v3.shoprocket.io/it/blog/headless-commerce-tre-livelli-opzioni-reali-quale-scegliere.md), [日本語](https://v3.shoprocket.io/ja/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/headless-prekyba-trys-lygiai-ir-kuris-jums-tinka.md), [Norsk](https://v3.shoprocket.io/nb/blogg/headless-commerce-tre-nivaer-reelle-alternativer-og-hva-du-trenger.md), [Nederlands](https://v3.shoprocket.io/nl/blog/headless-commerce-drie-niveaus-welke-past-bij-jou.md), [Polski](https://v3.shoprocket.io/pl/blog/headless-commerce-trzy-poziomy-realne-opcje-co-wybrac.md), [Português](https://v3.shoprocket.io/pt/blog/headless-commerce-tres-niveis-opcoes-reais-e-qual-voce-provavelmente-quer.md), [Română](https://v3.shoprocket.io/ro/blog/headless-commerce-cele-trei-niveluri-si-care-ti-trebuie.md), [Русский](https://v3.shoprocket.io/ru/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [ไทย](https://v3.shoprocket.io/th/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Türkçe](https://v3.shoprocket.io/tr/blog/headless-ticaret-uc-kademe-gercek-secenekler-ve-hangisini-istiyorsunuz.md), [中文](https://v3.shoprocket.io/zh/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md)