Belajar Microfrontend - single-spa: Framework-Agnostic Microfrontend

#Pendahuluan

Di episode 10 kita membahas Module Federation yang berorientasi satu framework (kebanyakan React). Tetapi bagaimana organisasi yang punya React lama + Vue baru + Angular legacy harus hidup berdampingan dalam satu halaman? Di sinilah single-spa masuk sebagai pendekatan framework-agnostic.

Mengapa penting? Karena tidak semua organisasi bisa (atau mau) menyeragamkan framework. Polyglot adalah realita di banyak perusahaan yang bertransisi bertahap. Episode ini membahas kapan single-spa tepat, dan bagaimana ia berbeda dari Module Federation.

#Konsep single-spa

Single-spa adalah microfrontend framework-level: ia memuat aplikasi lengkap (bukan module), masing-masing sebagai aplikasi React/Vue/Angular yang independen. Setiap aplikasi mendefinisikan lifecycle:

• bootstrap — inisialisasi sekali (setup aplikasi).
• mount — dipanggil saat aplikasi aktif (render ke DOM).
• unmount — dipanggil saat aplikasi non-aktif (bersihkan DOM/resources).

import { bootstrapApplication } from 'single-spa-react'
 
const lifecycles = bootstrapApplication({
  loadRootComponent: () => import('./root.component'),
})
 
export const bootstrap = lifecycles.bootstrap
export const mount = lifecycles.mount
export const unmount = lifecycles.unmount

Satu root config mendaftarkan semua aplikasi beserta route prefix-nya.

#Registrasi & Router

Aplikasi didaftarkan di root config dengan route prefix. single-spa menangani routing: saat URL berubah, ia me-mount aplikasi yang aktif dan me-unmount yang tidak.

import { registerApplication, start } from 'single-spa'
 
registerApplication({
  name: '@tokoku/catalog',
  app: () => import('@tokoku/catalog'),
  activeWhen: (location) => location.pathname.startsWith('/catalog'),
})
 
registerApplication({
  name: '@tokoku/cart',
  app: () => import('@tokoku/cart'),
  activeWhen: (location) => location.pathname.startsWith('/cart'),
})
 
start()

Saat user ke /catalog, single-spa me-mount @tokoku/catalog dan me-unmount yang aktif sebelumnya.

#Kapan single-spa (vs Module Federation)

Kapan single-spa: ketika organisasi benar-benar polyglot — misal React lama + Vue baru harus hidup berdampingan, dan menyeragamkan framework tidak realistis.

Kapan MF2: untuk 80% kasus — satu framework, type-safe, shared deps otomatis. Module Federation lebih sederhana dan powerfull untuk mayoritas tim.

#Kombinasi: single-spa + Module Federation (Hybrid)

Keduanya tidak saling meniadakan. Pola umum di 2026: single-spa sebagai router + Module Federation sebagai loader module. Single-spa menentukan aplikasi mana yang aktif berdasarkan route; di dalam aplikasi yang sama framework, Module Federation memuat remote module efisien dengan shared deps.

Contoh: root config single-spa mengelola aplikasi lintas framework; aplikasi React itu sendiri menggunakan Module Federation untuk memecah remote-react internalnya.

#Trade-off

Trade-off single-spa yang perlu disadari:

• Overhead setup tinggi — root config, lifecycle, konfigurasi tiap framework.
• Shared dependency manual — tidak ada otomasi seperti MF2; kalian harus mengatur sendiri cara berbagi library.
• Tanpa type-safety otomatis — kontrak antar aplikasi lebih rentan error.

Namun untuk polyglot yang besar, trade-off ini sepadan.

#Penutup

Pada episode 11 ini, kalian telah memahami single-spa sebagai pendekatan framework-agnostic.

Inti yang harus dibawa pulang:

• single-spa memuat aplikasi via lifecycle bootstrap/mount/unmount; satu root config + registry.
• single-spa mengelola route (mount/unmount) berdasarkan prefix.
• Pakai single-spa bila polyglot; MF2 untuk 80% kasus satu-framework yang lebih sederhana.
• Pola hybrid: single-spa sebagai router + Module Federation sebagai loader module.
• Trade-off: overhead tinggi, shared deps manual, tanpa type-safety otomatis.

Di episode 12 selanjutnya, kita akan membahas performance: lazy load & core web vitals — tingkat pemuatan remote, preload saat idle/hover, shared chunks, bundle analysis, dan dampaknya ke LCP. Pastikan strategi arsitektur kalian sudah jelas!