Setiap kali saya menyebutkan bahwa saya menggunakan Flutter untuk web di sebuah proyek, reaksinya selalu terbagi dua: ada yang antusias bertanya lebih, ada yang langsung mengangkat alis dengan skeptis.

Skeptisisme itu wajar. Flutter Web memang bukan untuk semua orang dan semua proyek. Tapi setelah menggunakannya di beberapa proyek nyata dan membandingkannya dengan pendekatan tradisional berbasis React, saya bisa memberikan gambaran yang lebih jujur dari sekadar benchmark sintetis.

---

Cara Flutter Web Bekerja: Dua Renderer

Flutter Web bukan mengkompilasi widget Flutter menjadi HTML dan CSS. Ia menggunakan pendekatan yang fundamentally berbeda, dan ini yang menjelaskan sebagian besar tradeoff-nya.

Flutter Web memiliki dua renderer:

CanvasKit renderer merender seluruh UI ke dalam elemen HTML <canvas> menggunakan Skia (via WebAssembly). Hasilnya: tampilan yang pixel-perfect identik dengan aplikasi mobile Flutter. Tidak ada perbedaan rendering antar browser. Kekurangannya: initial load size sekitar 1.5–2 MB untuk WebAssembly binary, dan aksesibilitas terbatas karena tidak ada DOM yang sesungguhnya.

HTML renderer menggunakan kombinasi HTML element, CSS, dan Canvas untuk merender widget. Initial load lebih kecil, SEO lebih baik, tapi rendering kadang sedikit berbeda antar browser dan beberapa widget tidak terrender dengan sempurna.

Anda bisa memilih renderer saat build:

flutter build web --web-renderer canvaskit  # Pixel-perfect, load besar
flutter build web --web-renderer html        # Load kecil, compatibility lebih baik

flutter build web --web-renderer auto        # Canvaskit di desktop, html di mobile

---

Di Mana Flutter Web Unggul

Aplikasi dashboard dan tools internal. Kalau Anda sudah membangun aplikasi mobile Flutter dan klien meminta versi web untuk admin atau monitoring, Flutter Web adalah pilihan yang sangat masuk akal. Satu codebase, logika bisnis yang sama, komponen UI yang bisa di-share. Waktu pengembangan bisa setengah dari membangun React app terpisah.

Aplikasi yang butuh tampilan identik di semua platform. Desainer yang perfeksionis akan menyukai CanvasKit — tidak ada perbedaan rendering antar Chrome, Firefox, dan Safari. Apa yang Anda desain adalah apa yang pengguna lihat.

Aplikasi dengan grafis kustom kompleks. CustomPainter, animasi berbasis Skia, dan rendering canvas — semua berjalan sama baiknya di web. Untuk aplikasi seperti editor grafis atau alat visualisasi data yang butuh rendering kustom, Flutter Web adalah pilihan yang kuat.

Prototyping cepat untuk tim mobile Flutter. Tim yang sudah menguasai Flutter bisa menghasilkan web app yang berfungsi penuh jauh lebih cepat dari harus belajar React atau Vue dari awal.

---

Di Mana React (atau framework berbasis HTML) Lebih Tepat

SEO adalah prioritas utama. Ini adalah kelemahan terbesar Flutter Web, terutama dengan CanvasKit. Search engine tidak bisa mengindex konten yang dirender di canvas. Meskipun ada workaround (server-side rendering, semantic HTML overlay), tidak satupun semudah Next.js atau Nuxt yang sudah dirancang untuk ini.

Aksesibilitas adalah requirement. Aplikasi yang harus memenuhi standar WCAG — misalnya untuk instansi pemerintah atau lembaga pendidikan — akan lebih mudah diimplementasikan dengan HTML tradisional. Screen reader bekerja jauh lebih baik dengan DOM yang sesungguhnya.

Initial load time kritis. Untuk landing page atau aplikasi yang pengunjungnya baru pertama kali datang, menunggu 2 MB WebAssembly download adalah pengalaman yang buruk di koneksi lambat. React dengan code splitting bisa menghasilkan initial load yang jauh lebih kecil.

Tim tidak punya latar belakang Flutter. Ini pragmatis tapi penting. Tidak ada gunanya memilih Flutter Web kalau seluruh tim web developer Anda adalah React developer berpengalaman. Produktivitas lebih penting dari pilihan teknologi yang "lebih baik secara teori".

---

Pengalaman Nyata: Tools Internal dengan Flutter Web

Salah satu proyek yang saya kerjakan adalah dashboard monitoring untuk sebuah toko online kecil. Klien sudah punya aplikasi Flutter untuk kasir (tablet Android), dan meminta dashboard web untuk pemilik toko yang bisa diakses dari laptop mana saja.

Menggunakan Flutter Web di sini masuk akal karena:

• Model data sudah ada di aplikasi mobile — bisa langsung di-share ke proyek web
• Beberapa widget seperti chart dan tabel bisa digunakan kembali dengan sedikit modifikasi
• SEO tidak relevan (dashboard hanya untuk pemilik toko, bukan publik)
• Aksesibilitas bukan requirement yang ketat

Hasilnya: dashboard dengan 12 layar selesai dalam waktu sekitar sepertiga dari estimasi awal jika menggunakan React — karena sebagian besar logika dan komponen sudah ada dari proyek mobile.

---

Performa: Benchmark yang Lebih Jujur

Perbandingan performa Flutter Web vs React yang beredar di internet sering menyesatkan karena membandingkan hal yang tidak apple-to-apple.

Untuk aplikasi CRUD sederhana dengan banyak teks dan form, React dengan Virtual DOM jauh lebih efisien — tidak ada overhead WebAssembly, DOM manipulation langsung oleh browser.

Untuk aplikasi dengan rendering yang kompleks — animasi 60fps, grafis kustom, transisi yang smooth — Flutter Web dengan CanvasKit bisa menghasilkan performa yang lebih konsisten karena rendering di-handle sepenuhnya oleh Skia, tidak bergantung pada implementasi CSS dan DOM browser yang berbeda-beda.

---

Tips Jika Memilih Flutter Web

Kalau sudah memutuskan Flutter Web adalah pilihan yang tepat untuk proyek Anda, beberapa hal yang perlu diperhatikan:

Gunakan lazy loading untuk mengurangi initial bundle. Pisahkan fitur yang jarang digunakan menjadi deferred import:

import 'package:myapp/fitur_laporan.dart' deferred as laporan;

// Nanti saat dibutuhkan:

await laporan.loadLibrary();

laporan.tampilkanLaporan();

Sesuaikan layout untuk pointer device. Pengguna web menggunakan mouse, bukan jari. Hover state, right-click context menu, dan keyboard shortcut adalah ekspektasi yang wajar di web tapi sering diabaikan developer yang latar belakangnya mobile.

Test di berbagai browser dari awal. Terutama jika menggunakan HTML renderer, ada perbedaan kecil antara Chrome, Firefox, dan Safari yang perlu ditangani.

---

Kesimpulan

Flutter Web bukan pengganti React — dan tidak pernah diklaim demikian oleh tim Flutter sendiri. Ia adalah alat yang sangat tepat untuk skenario tertentu, terutama ketika sudah ada investasi besar di ekosistem Flutter dan SEO bukan prioritas.

Pertanyaan yang perlu dijawab sebelum memilih bukan "mana yang lebih baik", tapi "mana yang lebih tepat untuk proyek ini, tim ini, dan pengguna ini". Jawabannya selalu kontekstual.