Transformasi Digital High-Performance untuk F&B Modern (wasabikitchen.id)

Menyatukan kecepatan frontend masa depan dengan kemudahan manajemen konten tradisional melalui arsitektur Headless CMS yang scalable.

Ringkasan Proyek

Klien: Wasabi Kitchen (PT. Padjadjaran Mitra)
Kategori: Company Profile & Digital Menu
Periode: Q4 2025 (November – Desember)
Peran: Lead Frontend Architect
Status: Live / In Production

Teknologi Utama (Tech Stack)

Frontend Framework: Next.js 14 (App Router & Server Components)
Backend (CMS): WordPress (Headless Mode via WPGraphQL/REST API)
UI System: Tailwind CSS + Framer Motion (Animasi)
Optimization: Next/Image + Incremental Static Regeneration (ISR)
Infrastruktur: Vercel (Frontend) + Hosting Cpanel/VPS (Content Engine)

Tantangan (The Challenge)

Dilema Kecepatan vs Kemudahan Pengelolaan. Dalam industri F&B yang bergerak cepat, Wasabi Kitchen menghadapi dua kebutuhan yang seringkali bertolak belakang dalam pengembangan web tradisional:

Kebutuhan Marketing: Tim pemasaran memerlukan kebebasan penuh untuk mengubah menu, harga, dan artikel promo setiap saat tanpa harus menyentuh kode (coding).
Kebutuhan User Experience: Pengunjung membutuhkan website yang loading-nya instan, visual makanan yang tajam, dan animasi yang mulus—sesuatu yang seringkali memberatkan website WordPress konvensional (monolitik) yang penuh plugin.

Menggunakan tema WordPress biasa membuat situs terasa lambat (bloated), sedangkan membuat website hard-coded dengan React menyulitkan tim non-teknis untuk update konten. Mereka membutuhkan jalan tengah: performa app-like dengan kemudahan dashboard admin.

Solusi (The Solution)

Arsitektur Decoupled: The Best of Both Worlds. Kami menerapkan strategi Headless CMS, di mana kami memisahkan “kepala” (Frontend) dari “tubuh” (Backend).

WordPress hanya digunakan sebagai Content Engine (tempat input data). Kami memangkas semua fungsi tampilan (tema) bawaan WordPress sehingga backend menjadi sangat ringan.
Next.js bertugas mengambil data tersebut dan merendernya menjadi halaman web statis yang sangat cepat.

Pendekatan ini memberikan Wasabi Kitchen sebuah website yang memiliki skor Core Web Vitals hijau sempurna, namun tim admin tetap bisa login ke wp-admin yang familiar untuk mengupdate konten.

Sorotan Teknis Utama

1. Incremental Static Regeneration (ISR) Salah satu tantangan situs statis adalah waktu build. Dengan fitur ISR pada Next.js, Wasabi Kitchen dapat memperbarui harga menu di WordPress, dan perubahan tersebut akan ter-update di website dalam hitungan detik tanpa perlu men-deploy ulang seluruh website. Website tetap statis (cepat), tapi konten tetap dinamis.

2. Optimasi Aset Visual Cerdas F&B sangat bergantung pada visual yang menggugah selera. Kami memanfaatkan komponen next/image untuk secara otomatis mengompresi, mengubah format (WebP/AVIF), dan melakukan lazy-loading pada gambar-gambar resolusi tinggi. Ini mencegah layout bergeser (Cumulative Layout Shift) dan menjaga kecepatan load tetap di bawah 1 detik meski banyak gambar.

3. Keamanan Melalui Pemisahan Karena Frontend dan Backend berada di server yang berbeda, permukaan serangan (attack surface) menjadi jauh lebih kecil. Jika trafik membludak, frontend di Vercel (Edge Network) akan menanganinya tanpa membebani server database WordPress.

Fitur Inti

Dynamic Menu Management: Sinkronisasi kategori makanan dan item menu dari WordPress ke tampilan Next.js secara real-time.
SEO-Ready Architecture: Struktur HTML semantik yang mudah dibaca oleh Google Crawler, berbeda dengan SPA biasa (Client Side Rendering) yang sering bermasalah dengan SEO.
Interactive UI: Transisi halaman yang mulus dan animasi mikro interaktif menggunakan Framer Motion untuk kesan premium.
Testimonial Slider: Integrasi ulasan pelanggan yang dinamis.

Hasil (The Result)

Website Wasabi Kitchen versi Headless ini berhasil diluncurkan dengan peningkatan performa yang signifikan dibandingkan versi sebelumnya.

Lighthouse Score: Mencapai skor 98-100 untuk Performance dan SEO.
Efisiensi: Tim marketing kini dapat merilis promo harian secara mandiri tanpa bantuan developer, sementara pengunjung menikmati pengalaman browsing yang setara dengan aplikasi native.

“Transisi ke Headless adalah investasi terbaik kami. Website terasa sangat ringan dan cepat di HP pelanggan, tapi di belakang layar, kami tetap memakai WordPress yang sudah kami kenal bertahun-tahun.”

— Head of Marketing, Wasabi Kitchen