Headless Commerce: Hal yang Perlu Anda Ketahui (Part 1)

Apakah beralih ke content management system (CMS) headless yang canggih itu sepadan untuk toko online Anda? Mari kita cari tahu dalam seri artikel kami tentang headless commerce.

Di Part 1 ini, kami menjelaskan konsep-konsep dasar dari arsitektur headless, seperti front-end dan back-end, headless CMS, monolithic CMS, dan lainnya.

Apa Itu Headless Commerce?

Headless commerce (atau headless e-commerce) adalah istilah yang digunakan untuk menggambarkan serangkaian praktik dan prinsip dalam membangun toko online sesuai dengan apa yang dikenal sebagai arsitektur headless. Ini adalah pendekatan membangun situs web dengan memisahkan customer experience di sisi front-end dari fungsionalitas di sisi back-end.

Arsitektur headless memungkinkan bisnis menghadirkan pengalaman belanja yang mulus di berbagai platform, mulai dari situs web hingga aplikasi mobile bahkan perangkat pintar. Toko online headless juga memungkinkan para pemilik bisnis menerapkan perubahan dengan lebih cepat dan memilih dari beragam pilihan tools UX yang lebih luas.

• Singkatnya, headless commerce merujuk pada toko online yang menerapkan prinsip arsitektur headless dalam pengembangan antarmuka penggunanya.
• Arsitektur headless, pada gilirannya, adalah jenis arsitektur situs web yang memungkinkan performa lebih tinggi dan fleksibilitas lebih besar dalam pengembangan situs web.

Sebelum kita menyelami bagaimana dan mengapa situs e-commerce mendapat manfaat dari arsitektur headless, mari kita lihat lebih dekat konsepnya sendiri, dan bagaimana kaitannya dengan arsitektur situs web tradisional, atau yang disebut monolithic.

Arsitektur Headless vs. Arsitektur Monolithic: Apa Bedanya?

Saat membahas topik ini, pembahasan pasti akan menjadi cukup teknis, jadi jangan khawatir jika konsepnya tidak langsung Anda pahami. Kita akan membahasnya langkah demi langkah.

Arsitektur headless adalah jenis arsitektur situs web yang muncul ketika situs dibangun dengan headless content management system (CMS).

Ketika sebuah situs web menggunakan CMS "tradisional" (non-headless), back-end dan front-end berada dalam satu infrastruktur yang menyatu. Dengan kata lain, keduanya saling terhubung secara bawaan. Tampilan situs web bergantung pada kemampuan dan keterbatasan back-end, begitu pula sebaliknya.

Untuk lebih memahami cara kerja situs web "tradisional" dengan back-end dan front-end yang menyatu, mari kita lihat sebuah contoh.

Bayangkan Anda mencoba membeli tiket konser di sebuah platform reseller populer seperti Ticketmaster Resale (yang pada dasarnya adalah sebuah toko online). Situs web dan pemilihan kursinya terlihat baik-baik saja pada awalnya. Tapi tiket di keranjang Anda tiba-tiba hilang sebelum Anda sempat checkout.

Apa yang terjadi?

Back-end, yang harus melacak ketersediaan kursi secara real-time (tersimpan di database), tidak kuat menahan tekanan akibat lonjakan trafik yang tiba-tiba. Padahal, front-end situs web tersebut baik-baik saja.

Kedua sisi situs web ini biasanya dikembangkan menggunakan tools, bahasa pemrograman, dan keahlian yang berbeda. Itulah kenapa sulit mengoordinasikan keduanya, terutama dalam situasi mendesak seperti lonjakan trafik.

Situs web yang dibangun di atas monolithic CMS membutuhkan komunikasi yang efektif antara kedua tim dan antar lapisan pengembangan yang berbeda.

Berbeda dengan CMS tradisional, headless CMS memungkinkan developer membangun back-end situs web secara terpisah dari front-end-nya. Alih-alih menyediakan front-end bawaan, headless CMS hanya menyediakan back-end yang menyajikan konten melalui API, sehingga developer bisa menghubungkannya ke front-end atau platform mana pun.

Disebut "headless" (tanpa kepala) karena, sebelumnya, front-end dianggap sebagai "kepala" dari situs web (bagian yang menghadap pengguna).

Dalam situs web headless, developer fokus pada penataan konten, sementara front-end bisa disesuaikan secara fleksibel. Pengaturan ini memungkinkan variasi dalam framework front-end yang digunakan, dan pada gilirannya, memberikan pilihan yang lebih luas tentang cara menyajikan situs web kepada pelanggan.

Tunggu, tapi kedua sisi ini tetap harus terhubung, kan? Mungkin Anda bertanya begitu.

Betul. Saat beroperasi dalam lingkungan headless, back-end dan front-end terhubung melalui lapisan API (application programming interface) khusus. Pengaturan ini memungkinkan front-end menarik dan mengirim konten dari headless CMS secara real-time, sehingga menghadirkan pengalaman pengguna yang konsisten di berbagai kanal, termasuk web dan mobile.

Mari berhenti sejenak dan lihat bagaimana ini diterapkan dalam kenyataan.

Bayangkan Anda punya satu sistem monolithic (misalnya WordPress) yang menjalankan situs web Anda, dan Anda juga punya aplikasi mobile yang benar-benar terpisah.

Jika Anda ingin memposting pengumuman yang sama (teks dan gambar yang sama) di keduanya, dalam pengaturan monolithic Anda biasanya harus mengelola konten itu khusus untuk situs web di dalam WordPress, lalu memindahkannya secara manual ke aplikasi.

Kenapa? Karena sistem monolithic dirancang terutama untuk satu front-end, yaitu situs web Anda.

Sebaliknya, dalam pengaturan headless, Anda akan menyimpan teks dan gambar pengumuman itu di headless CMS, dan baik situs web maupun aplikasi Anda akan menarik konten yang sama persis melalui API. Anda cukup memperbaruinya sekali di headless CMS, dan berapa pun jumlah front-end (web, aplikasi, atau lainnya) akan diperbarui secara otomatis.

Kenapa Headless Lebih Baik daripada Monolithic?

Belum tentu selalu lebih baik. Bukan berarti monolithic itu seperti telepon rumah dan headless adalah smartphone yang nyaris menggantikannya.

Headless menjadi pemenang ketika Anda membutuhkan fleksibilitas dan kecepatan. Dengan memisahkan back-end dari front-end, Anda bisa secara efisien mengirim konten ke kanal mana pun, entah itu situs web, aplikasi mobile, atau bahkan antarmuka smartwatch (ya, benar!).

"[Dengan WordPress] Anda bisa memulai jauh lebih cepat, tapi begitu Anda ingin membuat sesuatu yang lebih custom, prosesnya jadi sangat menjengkelkan," ujar Niklas Fischer, seorang developer situs web sekaligus pendiri agensi.

Dan siapa pun yang pernah mencoba membangun situs di WordPress pasti bisa merasakan keluhannya!

Di bagian-bagian berikutnya dari seri ini, kita akan membahas lebih detail tentang kelebihan dan keterbatasan headless, serta kasus penggunaan terbaik dan terburuk untuk menerapkannya.

Apa Saja Contoh Monolithic dan Headless CMS?

CMS paling populer di dunia, WordPress, dianggap sebagai platform "monolithic". WordPress menangani pembuatan konten, operasi database, dan rendering front-end, semuanya dalam satu sistem. Contoh monolithic CMS populer lainnya adalah Squarespace.

CMS tradisional pada dasarnya menentukan aturannya sendiri tentang bagaimana front-end dan back-end terhubung. Meski kedengarannya seperti sebuah keterbatasan, justru fitur inilah yang mendemokratisasi pembuatan situs web dengan menghilangkan kebutuhan akan coding. Salah satu kunci kesuksesan WordPress sebagai platform pembuatan situs web adalah karena ia membuat pembangunan situs jadi mudah dan bisa diakses siapa saja, berkat caranya menyatukan front-end dan back-end ke dalam satu sistem.

Sebaliknya, headless CMS, seperti Contentful, Strapi, atau Sanity, memisahkan tempat penyimpanan konten dari lapisan presentasinya.

Apa Manfaatnya untuk E-Commerce?

Arsitektur headless sangat populer di e-commerce karena beberapa alasan berikut:

▶︎ Headless menyederhanakan pengalaman multi-channel. Brand e-commerce sering menjual di berbagai kanal, seperti web, aplikasi mobile, platform media sosial, kios, dan lainnya. Dengan headless, semua front-end ini bisa menarik konten dan data produk dari back-end yang sama melalui API.

E-commerce mobile akan terus bertahan. Ini format belanja yang disambut baik oleh banyak konsumen. Sebagai contoh, destinasi fashion utama Eropa, Zalando, menerima 89% kunjungan ke platform mereka dari perangkat mobile pada tahun 2021, setelah beberapa tahun pertumbuhan di segmen ini. Tren serupa juga sangat terasa di Indonesia, di mana mayoritas transaksi e-commerce kini dilakukan lewat ponsel.

▶︎ Performa dan skalabilitas mudah dikelola. Front-end yang terpisah bisa dioptimalkan untuk kecepatan, menghadirkan pengalaman pelanggan yang lebih cepat sehingga membantu menurunkan bounce rate. Sementara itu, back-end bisa di-scale secara independen seiring bertumbuhnya trafik atau inventaris.

Dengan software manajemen inventaris BoxHero, Anda bisa:

• Mengotomatiskan pembaruan stok untuk mencegah overselling atau kehabisan stok.
• Melacak data penjualan real-time untuk mengambil keputusan restock yang tepat.
• Menyederhanakan operasional gudang dengan pemindaian barcode dan kategorisasi produk yang intuitif.
• Memungkinkan kolaborasi multi-pengguna agar tim Anda bisa mengelola stok secara efisien.

Yang terpenting, Anda bisa mengintegrasikannya dengan platform e-commerce yang sudah Anda miliki melalui BoxHero API!

Tetap selangkah lebih maju dari permintaan dan optimalkan manajemen inventaris Anda dengan BoxHero hari ini! Daftar untuk uji coba gratis dengan mengklik tombol di bawah.

Coba Gratis

▶︎ Interaksi yang lebih cepat jadi mungkin. Tim bisa memperbarui antarmuka pengguna dengan cepat (misalnya A/B testing desain atau teks baru) tanpa mengganggu operasi inti commerce seperti pembayaran atau manajemen inventaris. Ini juga berpotensi berarti siklus persetujuan yang lebih singkat untuk setiap perubahan dan waktu peluncuran (time-to-market) yang lebih cepat.

▶︎ Headless commerce tahan masa depan (future-proof). Seiring berkembangnya teknologi, entah framework, perangkat, atau kanal baru, pendekatan headless menyederhanakan proses adopsinya. Anda bisa menyambungkan front-end atau kanal baru tanpa perlu merombak logika commerce yang mendasarinya.

Apa Saja Contoh Toko Online yang Dibangun dengan Headless?

Kami ingin menegaskan kembali apa yang sudah kami sebutkan sebelumnya: Headless CMS tidak memiliki front-end, hanya back-end. Tidak ada indikator visual yang jelas dari sebuah situs web yang dibangun dengan headless CMS, karena situs seperti ini bisa memiliki beragam desain dan struktur (yang justru menjadi salah satu alasan utama developer memilih headless sejak awal).

Cara termudah menemukan contoh situs web berbasis headless adalah dengan mengunjungi bagian "Case Studies" di platform headless mana pun. Kami menelusuri studi kasus dari Contentful, Strapi, dan Sanity. Berikut beberapa toko online yang beralih ke headless dengan bantuan platform-platform ini:

1️⃣ Mejuri adalah brand perhiasan halus (fine jewelry) modern yang sudah berkecimpung di pasar sejak 2015. Mejuri memberdayakan pelanggan dengan perhiasan bergaya yang bersumber secara etis, sambil memanfaatkan teknologi mutakhir seperti Sanity, platform manajemen konten headless.

2️⃣ Bash adalah platform belanja dan gaya hidup terkemuka di Afrika Selatan, yang menawarkan pengalaman e-commerce multi-brand yang mulus dengan lebih dari 500 brand dan 40.000 produk. Bash menggunakan Strapi untuk menciptakan satu platform e-commerce yang terkonsolidasi.

3️⃣ On adalah brand pakaian olahraga asal Swiss yang merevolusi alas kaki dan pakaian performa dengan memadukan teknologi mutakhir dan desain yang berkelanjutan. On.com bermigrasi ke Contentful beberapa tahun lalu.

Kesimpulan

Jika Anda pernah memimpikan cara untuk membuat dan mengelola bisnis e-commerce Anda secara fleksibel, tanpa perlu melibatkan tim engineering untuk setiap penyesuaian tombol sekecil apa pun, maka headless commerce mungkin cocok untuk Anda.

Pendekatan ini menerapkan arsitektur situs web headless pada pengembangan e-commerce. Konten disimpan dan dikelola di back-end, sementara front-end terhubung melalui API. Anda tidak hanya bisa memilih framework front-end mana pun untuk menyajikan konten kepada pengguna dan mengkustomisasi UX hingga ke detail terkecil, tapi Anda juga bisa menggunakan kembali konten yang sama di berbagai platform, seperti aplikasi smartphone, situs web, dan aplikasi tablet.

Dalam artikel ini, kami menjelaskan konsep dan mekanisme kunci dari headless commerce. Di artikel-artikel kami berikutnya, kami akan mengeksplorasi manfaat arsitektur headless untuk e-commerce secara lebih detail.

• Apa saja tanda-tanda bahwa situs web headless bisa membawa dampak nyata bagi bisnis Anda?
• Bagaimana cara mengevaluasi biaya transisinya di awal? Adakah cara untuk menyederhanakan proses transisi tersebut?
• Dalam kasus apa migrasi seperti ini justru bisa berpotensi merugikan?

Nantikan jawabannya di blog kami!