Jake Wharton Bagikan Cara Render HTML Server dengan Compose dan kotlinx.html

Pengembang aplikasi Android Jake Wharton membagikan pendekatannya merender halaman HTML langsung dari server dengan memadukan Compose dan kotlinx.html. Dalam tulisan bertanggal 26 Agustus 2026 di situs pribadinya, ia menjelaskan bagaimana keduanya dipakai untuk membangun halaman dasbor admin yang isinya tetap diperbarui tanpa meninggalkan HTML statis.

Wharton berangkat dari pola yang ia pakai berulang kali. Sebuah rute di server Ktor, misalnya get("/users.html"), memanggil call.respondHtml. Di dalamnya, fungsi myLayout dengan judul "Users" membungkus fungsi userList yang menerima daftar pengguna dari db.users.value. Menurut Wharton, myLayout menyediakan kerangka halaman, userList merangkum isi spesifik halaman, dan db.users merupakan StateFlow dari lapisan penyimpanan data.

Pola tersebut bekerja dengan baik sampai halaman dibiarkan terbuka selama satu atau dua menit dan isinya menjadi kedaluwarsa.

Menolak meninggalkan HTML

Di dalam ekosistem, menurut Wharton, sudah ada kerangka kerja sisi klien yang diklaim menyelesaikan persoalan itu, antara lain Compose for HTML atau Compose UI for Web. Ia memisalkan persoalan tersebut dengan pipa bocor di rumah yang "diselesaikan" dengan cara pindah ke rumah baru. Wharton menegaskan tidak akan membawa dirinya meninggalkan HTML, apalagi pengiriman HTML statis di dalam respons.

Ia mencatat upaya untuk mengadaptasi Compose for HTML agar mendukung apa yang disebut isomorphic rendering. Pendekatan itu melibatkan komposisi awal di server untuk menghasilkan HTML statis bagi respons HTTP. Selanjutnya, di sisi klien sebagai JavaScript, kode rendering yang sama dipasang untuk mereproduksi pohon DOM dan memperbaruinya secara inkremental ketika state berubah.

Molecule sebagai jalan pintas

Alih-alih menunggu, Wharton memakai Molecule, yang ia sebut sebagai Compose versi JVM bawaannya sendiri. Perbedaan utamanya, Molecule tidak mengelola pohon antarmuka dari waktu ke waktu, melainkan mengelola satu potongan state sepanjang waktu. State itu dipakai untuk merender fragmen HTML di server sebagai string, lalu mengalirkannya ke klien.

Dalam contohnya, sebuah rute webSocket("/users.ws") memanggil launchMolecule(Immediate). Di dalamnya, nilai pengguna diambil lewat db.users.collectAsState(), lalu createHTML().userList merender daftar tersebut, dan hasilnya dikirim melalui collect(:send). Menurut Wharton, itu saja yang dibutuhkan: Ktor menyediakan web socket, Molecule menjalankan StateFlow yang disalurkan ke sana, dan kotlinx.html merender fragmen HTML dari fungsi konten yang sudah ada.

Menambal DOM di sisi klien

Pada payload HTML awal, sambungan itu perlu dipasang. Wharton mencontohkan skrip yang mengambil elemen dengan ID "content", membuat koneksi WebSocket ke alamat ws:// diikuti host dan jalur /users.ws, lalu menambahkan pendengar pesan yang masih berisi penanda TODO. Di dalam pendengar tersebut, event.data dapat dikirim langsung ke content.innerHTML. Menurutnya, browser sangat baik dalam mem-parsing HTML.

Saat ini, pendengar pesan miliknya memanggil Idiomorph.morph(content, event.data) yang memakai Idiomorph untuk menambal DOM. Cara itu memastikan kolom formulir atau elemen interaktif yang tidak berubah tetap dipertahankan, bukan diganti.

Peringatan untuk situs dengan banyak pengguna

Wharton menegaskan bahwa ia memakai pendekatan ini untuk halaman admin dengan lalu lintas rendah. "Halaman saya bisa membuat satu koneksi web socket atau lima puluh dan tidak akan ada bedanya," tulisnya. Pada situs nyata dengan pengguna nyata, ia mengingatkan perlunya menimbang sejumlah trade-off karena pendekatan itu bisa tanpa sengaja membuat backend mengalami denial-of-service.

Ia lalu menyebut tiga hal yang perlu dipertimbangkan:

• Idealnya hanya ada satu koneksi berumur panjang ke server, dengan pembaruan untuk elemen berbeda dimultipleks. Payload perlu dibingkai dalam sebuah envelope yang menyertakan ID HTML mana yang menjadi target, sehingga JavaScript dapat mengirim setiap payload ke bagian halaman yang sesuai.
• Karena payload sepenuhnya searah, HTTP server-sent events atau SSE kemungkinan lebih cocok daripada web socket. SSE memastikan koneksi dapat dimultipleks bersama koneksi lain melalui satu koneksi TCP HTTP/2, sekaligus menyediakan framing yang diperlukan dengan memisahkan nama event dari payload-nya.
• Perlu diputuskan apakah komposisi berjalan di dalam konteks satu koneksi atau dibagi di luarnya. Hal ini terutama bergantung pada jenis data yang dirender dan apakah data tersebut terikat pada koneksi tertentu, misalnya untuk pengguna yang terautentikasi.

Tergantung pada pilihan terakhir itu, menulis sebuah helper yang membungkus rute statis sekaligus rute dinamis dapat mengurangi duplikasi. "Atau tidak. Kodenya tidak sebanyak itu," tulis Wharton menutup tulisannya.

Sumber: Jake Wharton