Belajar Microfrontend - Server-Side Composition & Next.js

#Pendahuluan

Sejauh ini kita membahas integrasi microfrontend di sisi client (browser) — Module Federation dan single-spa memuat remote saat runtime di browser. Namun ada pendekatan lain: menggabungkan fragment-fragment di sisi server (atau edge) sebelum dikirim ke browser. Ini disebut server-side composition.

Mengapa penting? Karena untuk aplikasi yang sangat bergantung pada SEO, waktu muat awal, dan boot time, menggabungkan di server memberi keunggulan yang tidak bisa dicapai client-side murni. Episode ini membahas konsep dan tooling-nya di 2026.

#Konsep

Di server-side composition:

• Shell di-SSR (server-side rendered) — HTML awal halaman sudah lengkap dari server.
• Remote berupa fragment/podlet — potongan HTML + script/style per remote — yang di-capture server dan disisipkan ke halaman.
• Server menggabungkan CSS/JS dari tiap remote → respons HTML penuh ke browser.

Dengan ini, server yang menentukan komposisi (server-driven composition), bukan browser.

#Solusi Server 2026

#Next.js App Router + Module Federation

Dukungan microfrontend di Next.js App Router meningkat pesat di 2026. Dengan Module Federation, beberapa app Next.js bisa berbagi SSG/SSR — remote bisa merender konten di server, lalu di-bundle sebagai module yang dimuat host. Ini memadukan SSR/SSG (untuk SEO) dengan federasi module (untuk independensi).

import { federation } from '@module-federation/enhanced/webpack'
 
const nextConfig = {
  webpack(config) {
    config.plugins.push(federation({
      name: 'productDetail',
      exposes: { './ProductApp': './components/ProductApp' },
      shared: ['react', 'react-dom'],
    }))
    return config
  },
}
export default nextConfig

#Podium (Podlets) oleh Zalando

Podium adalah pendekatan server-side dari Zalando: satu host server mengambil podlets (fragment app) dari berbagai server/remote, lalu menggabungkannya menjadi respons. Tiap podlet punya struktur, assets (CSS/JS), dan fallback sendiri. Podium menekankan independensi penuh — podlet bisa di-build dengan teknologi apa pun karena hanya bertukar HTML fragment.

#Kapan Server-Side Composition

Server-side composition cocok ketika:

• SEO time-critical — konten utama harus sudah ada di HTML awal (tidak menunggu JS).
• Boot time SPA yang berat tidak diinginkan — user langsung melihat konten karena HTML sudah jadi.
• Memadukan dengan Module Federation untuk bagian interaktif client-side.

Sebaliknya, untuk aplikasi yang sangat interaktif (SPA-heavy) dengan banyak state client, runtime client (Module Federation di browser) tetap lebih natural.

#Perbandingan: Server-Side vs Runtime Client

Caching & ISR menguntungkan server-side: halaman bisa di-cache di edge dengan incremental static regeneration, sehingga meski banyak remote, user tetap dapat respons cepat. Boot time lebih rendah karena HTML sudah tersedia.

#Penutup

Pada episode 22 ini, kalian telah memahami server-side composition & Next.js.

Inti yang harus dibawa pulang:

• Server-side composition: server (bukan browser) menggabungkan fragment remote; shell di-SSR.
• Next.js App Router + Module Federation — berbagi SSG/SSR antar app Next.js.
• Podium (Zalando) — host server menggabungkan podlets fragment, independensi penuh.
• Pakailah saat SEO time-critical / boot time rendah; runtime client untuk SPA interaktif.
• Server-side unggul di caching/ISR & boot time; runtime client lebih sederhana.

Di episode 23 selanjutnya, kita akan membahas production checklist & release strategy — checklist microfrontend produksi, strategi rilis canary & release train, rollback, dan runbook untuk skenario remote down. Pastikan strategi server kalian jelas!