Server-Side Composition untuk Micro-Frontends: Menggabungkan UI di Edge dan Backend

1. Pendahuluan

Pernahkah Anda merasa frustrasi dengan lambatnya loading halaman web, terutama di aplikasi yang kompleks? Atau, sebagai developer, Anda kesulitan mengelola sebuah monolit frontend yang terus membengkak dan sulit dipecah? Jika ya, Anda tidak sendirian. Konsep Micro-Frontends hadir sebagai solusi untuk memecah monolit frontend menjadi bagian-bagian yang lebih kecil, mandiri, dan dapat dikembangkan oleh tim yang berbeda. Namun, tantangan baru muncul: bagaimana cara menggabungkan bagian-bagian UI yang terpisah ini menjadi satu halaman web yang kohesif dan berperforma tinggi di browser?

Di sinilah Server-Side Composition (SSC) berperan penting. SSC adalah strategi di mana berbagai fragmen UI dari Micro-Frontends yang berbeda digabungkan di sisi server atau di “edge” (dekat dengan pengguna) sebelum dikirimkan ke browser. Bayangkan Anda memesan pizza, dan setiap topping datang dari restoran yang berbeda. Daripada Anda harus menunggu dan menggabungkan semua topping itu sendiri di rumah (client-side composition), restoran utama sudah merakitnya menjadi satu pizza utuh sebelum dikirimkan ke Anda (server-side composition). Hasilnya? Anda mendapatkan pizza yang sudah siap santap, lebih cepat, dan dengan pengalaman yang lebih mulus.

Artikel ini akan membawa Anda menyelami Server-Side Composition, mengapa ini krusial untuk Micro-Frontends skala besar, bagaimana cara kerjanya, serta kapan dan bagaimana Anda bisa mengimplementasikannya dalam proyek web Anda. Mari kita mulai!

2. Mengapa Server-Side Composition Penting untuk Micro-Frontends?

Ketika kita berbicara tentang Micro-Frontends, salah satu tantangan utamanya adalah bagaimana mengorkestrasi (menggabungkan) berbagai bagian UI yang dikembangkan secara independen. Ada beberapa cara untuk melakukan ini, termasuk Client-Side Composition (menggabungkan di browser menggunakan JavaScript) dan Build-Time Composition (menggabungkan saat proses build). Namun, SSC menawarkan keunggulan unik, terutama dalam konteks performa dan pengalaman pengguna:

✅ Performa Waktu Muat (Load Performance)

HTML Pertama yang Cepat: Dengan SSC, browser menerima HTML yang sudah lengkap, bukan hanya template kosong yang perlu diisi JavaScript. Ini memungkinkan browser untuk segera merender konten, menghasilkan Largest Contentful Paint (LCP) yang lebih baik dan Time to Interactive (TTI) yang lebih singkat.
Meminimalkan Waterfall Request: Daripada browser harus membuat banyak permintaan ke berbagai Micro-Frontend secara terpisah, SSC mengurangi jumlah round-trip ke server, karena semua fragmen sudah disatukan.
Offloading Komputasi ke Server/Edge: Proses penggabungan UI yang mungkin intensif JavaScript di sisi klien dapat dipindahkan ke server atau edge, membebaskan browser pengguna dari beban komputasi tambahan.

✅ Pengalaman Pengguna (User Experience) yang Lebih Baik

Persepsi Kecepatan: Pengguna akan merasakan halaman dimuat lebih cepat karena konten utama langsung terlihat. Ini mengurangi “blank screen” atau “loading spinner” yang mengganggu.
SEO Friendly: Search engine crawler lebih mudah mengindeks konten yang sudah dirender di server, karena mereka mendapatkan HTML yang lengkap.

✅ Kemudahan Pengembangan dan Operasional

Isolasi yang Jelas: Setiap Micro-Frontend tetap independen, namun cara mereka digabungkan didefinisikan secara eksplisit di server, mengurangi risiko konflik antar tim.
Kontrol Versi: SSC memungkinkan kontrol versi yang lebih baik untuk setiap fragmen. Anda bisa mengganti versi Micro-Frontend di server tanpa perlu mengubah kode klien.
A/B Testing dan Personalisasi di Edge: Dengan melakukan komposisi di edge, Anda bisa dengan mudah mengimplementasikan A/B testing atau personalisasi konten berdasarkan lokasi, perangkat, atau preferensi pengguna sebelum konten sampai ke browser.

❌ Tantangan SSC

Tentu saja, SSC juga memiliki tantangannya:

Kompleksitas Infrastruktur: Membutuhkan layer orkestrasi tambahan di server atau edge.
Debugging yang Lebih Sulit: Melacak masalah yang terjadi selama proses komposisi bisa lebih menantang.
Potensi Latensi Server: Jika server komposisi jauh dari pengguna, ini bisa menambah latensi. Namun, ini bisa diatasi dengan Edge Computing.

3. Cara Kerja Server-Side Composition

Secara garis besar, SSC melibatkan sebuah “komposer” atau “orkestrator” di sisi server (atau edge) yang bertanggung jawab untuk mengambil fragmen-fragmen UI dari berbagai Micro-Frontends dan menyatukannya menjadi satu halaman HTML utuh.

📌 Alur Kerja Umum:

Permintaan Pengguna: Browser mengirimkan permintaan ke URL aplikasi utama.
Edge/Backend Komposer Menerima Permintaan: Permintaan ini tidak langsung ke Micro-Frontend spesifik, tetapi ke sebuah layer komposer.
Identifikasi Fragmen: Komposer menganalisis permintaan dan menentukan Micro-Frontends mana yang perlu digabungkan untuk halaman tersebut. Ini bisa ditentukan oleh konfigurasi, rute URL, atau bahkan data spesifik pengguna.
Permintaan Fragmen: Komposer membuat permintaan internal ke masing-masing Micro-Frontend yang relevan. Setiap Micro-Frontend merespons dengan fragmen HTML, CSS, dan JavaScript yang menjadi bagiannya.
Penggabungan (Composition): Komposer menerima semua fragmen dan menyatukannya menjadi satu dokumen HTML yang lengkap. Proses ini bisa melibatkan:
- HTML Include: Menggunakan tag khusus (misalnya <esi:include>, <ssi:include>, atau custom tags) untuk menyisipkan HTML dari Micro-Frontend lain.
- Templating Engine: Menggunakan server-side templating engine (seperti Handlebars, Nunjucks, Pug) untuk merakit bagian-bagian.
- HTML Streaming: Mengirimkan bagian-bagian HTML saat sudah siap, tanpa menunggu seluruh halaman selesai digabungkan. Ini sangat efektif untuk perceived performance.
Respons ke Browser: Dokumen HTML yang sudah lengkap dikirimkan kembali ke browser pengguna.
Hidrasi (Hydration) Opsional: Setelah HTML diterima, browser mungkin masih perlu menjalankan JavaScript dari masing-masing Micro-Frontend untuk membuat UI interaktif (proses hidrasi).

💡 Analogi Gerbang Tol Otomatis: Bayangkan Anda ingin masuk ke sebuah kota besar (aplikasi web). Ada banyak pintu masuk (Micro-Frontends) yang masing-masing mengelola bagian kota yang berbeda. Daripada Anda harus mengumpulkan izin dari setiap pintu masuk secara terpisah, ada sebuah Gerbang Utama (Komposer) yang sudah mengumpulkan semua izin dan menyatukannya menjadi satu tiket masuk. Anda hanya perlu melewati satu gerbang, dan semua sudah beres.

4. Teknik-teknik Implementasi Server-Side Composition

Ada beberapa teknik populer untuk mengimplementasikan SSC, masing-masing dengan kelebihan dan kekurangannya:

4.1. Edge-Side Includes (ESI)

ESI adalah markup language yang memungkinkan Anda menyisipkan konten dari URL lain ke dalam halaman HTML pada level edge cache (CDN seperti Akamai, Cloudflare, Fastly).

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi Utama</title>
</head>
<body>
    <header>
        <esi:include src="https://header.microfrontend.com/"/>
    </header>
    <main>
        <h1>Selamat Datang!</h1>
        <esi:include src="https://product-list.microfrontend.com/"/>
    </main>
    <footer>
        <esi:include src="https://footer.microfrontend.com/"/>
    </footer>
</body>
</html>

Kelebihan: Sangat cepat karena dilakukan di edge, mengurangi beban pada origin server. Ideal untuk fragmen yang sering berubah atau bersifat personalisasi ringan.
Kekurangan: Terbatas pada penyedia CDN yang mendukung ESI. Kurang fleksibel untuk logika komposisi yang kompleks.

4.2. Server-Side Includes (SSI)

Mirip ESI, tetapi SSI biasanya diimplementasikan di web server (Apache, Nginx).

Contoh (untuk Nginx):

location / {
    ssi on;
    # ...
}

<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi Utama</title>
</head>
<body>
    <!--#include virtual="/mf/header" -->
    <main>
        <h1>Selamat Datang!</h1>
        <!--#include virtual="/mf/product-list" -->
    </main>
    <!--#include virtual="/mf/footer" -->
</body>
</html>

Kelebihan: Kontrol penuh karena diimplementasikan di server Anda sendiri. Mudah diatur untuk fragmen statis atau semi-dinamis.
Kekurangan: Dilakukan di origin server, bisa menambah beban. Kurang canggih dibanding solusi custom.

4.3. Custom Node.js/Go/PHP/Python Composer

Membangun layer komposer khusus menggunakan bahasa backend favorit Anda. Layer ini akan bertanggung jawab untuk:

Menerima permintaan dari browser.
Membuat HTTP request ke setiap Micro-Frontend yang dibutuhkan.
Menerima respons HTML/JSON dari Micro-Frontend.
Menggabungkan semua respons ini menjadi satu HTML.
Mengirimkan HTML yang sudah digabungkan ke browser.

Contoh (pseudo-code dengan Node.js dan HTML Streaming):

// server.js (Komposer Utama)
const express = require('express');
const axios = require('axios'); // Untuk fetching Micro-Frontend

const app = express();

app.get('/', async (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/html',
        'Transfer-Encoding': 'chunked' // Mengaktifkan HTML Streaming
    });

    res.write('<!DOCTYPE html><html><head><title>My App</title></head><body>');
    res.write('<header>');
    
    // Fetch Header Micro-Frontend
    try {
        const headerResponse = await axios.get('http://microfrontend-header:3001');
        res.write(headerResponse.data);
    } catch (error) {
        res.write('<!-- Header failed to load -->');
    }
    res.write('</header><main>');

    // Fetch Product List Micro-Frontend
    try {
        const productListResponse = await axios.get('http://microfrontend-products:3002');
        res.write(productListResponse.data);
    } catch (error) {
        res.write('<!-- Product List failed to load -->');
    }
    res.write('</main><footer>');

    // Fetch Footer Micro-Frontend
    try {
        const footerResponse = await axios.get('http://microfrontend-footer:3003');
        res.write(footerResponse.data);
    } catch (error) {
        res.write('<!-- Footer failed to load -->');
    }
    res.write('</footer></body></html>');
    res.end(); // Akhiri respons
});

app.listen(3000, () => console.log('Composer listening on port 3000'));

Kelebihan: Sangat fleksibel, bisa mengimplementasikan logika komposisi yang kompleks, error handling yang canggih, dan HTML Streaming. Memberikan kontrol penuh atas proses.
Kekurangan: Membutuhkan usaha pengembangan dan pemeliharaan yang lebih besar.

4.4. Library/Framework Khusus (misalnya Project Mosaic, Piral)

Beberapa library atau framework dirancang khusus untuk membantu komposisi Micro-Frontends, baik client-side maupun server-side.

Kelebihan: Solusi siap pakai, mengurangi boilerplate, dan seringkali dilengkapi dengan fitur-fitur seperti isolasi CSS, manajemen state, dan routing.
Kekurangan: Ketergantungan pada ekosistem framework tersebut, mungkin tidak sefleksibel solusi custom.

5. Best Practices untuk Server-Side Composition

🎯 Untuk memaksimalkan manfaat SSC, pertimbangkan praktik terbaik ini:

Gunakan HTML Streaming: Ini adalah kunci untuk perceived performance. Kirimkan bagian-bagian halaman segera setelah siap, memungkinkan browser untuk mulai merender.
Isolasi yang Kuat: Pastikan setiap Micro-Frontend benar-benar independen dalam hal styling (gunakan Shadow DOM atau CSS-in-JS dengan scope), JavaScript, dan data.
Error Handling yang Robust: Apa yang terjadi jika satu Micro-Frontend gagal merespons? Komposer harus bisa menangani ini dengan graceful degradation (misalnya, menampilkan placeholder atau pesan error) tanpa merusak seluruh halaman.
Caching yang Cerdas: Manfaatkan caching di level komposer atau CDN untuk fragmen yang tidak sering berubah, guna mengurangi beban pada Micro-Frontends origin.
Monitoring dan Observabilitas: Implementasikan logging, metrik, dan tracing di layer komposer untuk memantau performa dan mendeteksi masalah dengan cepat. OpenTelemetry adalah pilihan yang bagus.
Desain API Komposisi yang Jelas: Tentukan kontrak yang jelas antara komposer dan Micro-Frontends mengenai bagaimana fragmen akan diminta dan dikirimkan.
Progressive Enhancement: Pastikan halaman tetap fungsional bahkan jika JavaScript dari beberapa Micro-Frontend gagal dimuat.

Kesimpulan

Server-Side Composition adalah strategi yang sangat ampuh untuk membangun aplikasi Micro-Frontends yang berperforma tinggi dan tangguh. Dengan menggeser beban penggabungan UI dari browser ke server atau edge, kita dapat secara signifikan meningkatkan waktu muat, pengalaman pengguna, dan bahkan fleksibilitas pengembangan. Meskipun ada tantangan dalam hal kompleksitas infrastruktur, manfaat yang ditawarkan SSC menjadikannya pilihan yang menarik untuk aplikasi web skala besar yang mengutamakan kecepatan dan keandalan.

Memilih teknik SSC yang tepat akan sangat tergantung pada kebutuhan spesifik proyek Anda, infrastruktur yang tersedia, dan tingkat kontrol yang Anda inginkan. Namun, satu hal yang pasti: menguasai SSC akan memberi Anda senjata baru yang kuat dalam arsenal arsitektur web modern Anda.