Server-Side Rendering (SSR) untuk Web Components: Membangun UI yang Cepat dan Interaktif dengan Declarative Shadow DOM

1. Pendahuluan

Di era aplikasi web modern yang menuntut performa tinggi dan pengalaman pengguna yang instan, Server-Side Rendering (SSR) telah menjadi strategi penting. SSR memungkinkan browser menerima halaman HTML yang sudah dirender sepenuhnya dari server, menghasilkan First Contentful Paint (FCP) yang cepat dan Largest Contentful Paint (LCP) yang lebih baik. Ini sangat krusial untuk SEO dan pengguna yang memiliki koneksi internet lambat.

Di sisi lain, Web Components menawarkan cara yang kuat untuk membangun komponen UI yang reusable, terenkapsulasi, dan framework-agnostic. Dengan Custom Elements dan Shadow DOM, kita bisa membuat elemen HTML baru dengan logika dan styling-nya sendiri, terisolasi dari sisa halaman.

Namun, menggabungkan SSR dengan Web Components seringkali menjadi tantangan. Web Components secara fundamental dirancang untuk bekerja di sisi klien (browser). Lalu, bagaimana kita bisa mendapatkan manfaat SSR (performa awal yang cepat) sambil tetap memanfaatkan kekuatan enkapsulasi Web Components?

Artikel ini akan membawa Anda menyelami bagaimana kita bisa mencapai hal tersebut, terutama dengan fitur modern Declarative Shadow DOM (DSD). Kita akan memahami masalahnya, solusinya, dan bagaimana mengimplementasikannya dalam praktik untuk membangun UI yang tidak hanya cepat dimuat, tetapi juga tetap interaktif dan terenkapsulasi. 🎯

2. Tantangan SSR Tradisional dengan Web Components

Secara default, Web Components, khususnya Shadow DOM, adalah teknologi sisi klien. Ketika sebuah Custom Element didefinisikan, ia akan membuat Shadow DOM-nya dan melampirkan markup serta styling internalnya saat JavaScript Custom Element tersebut dieksekusi di browser.

Pertimbangkan komponen sederhana seperti <my-card>:

<!-- HTML yang diterima browser dari server (tanpa SSR Web Component) -->
<my-card title="Judul Artikel" content="Isi singkat artikel..."></my-card>

Ketika HTML ini diterima dari server, browser akan melihat <my-card> sebagai elemen HTML biasa yang tidak dikenal. Ia akan menampilkannya apa adanya. Baru setelah JavaScript yang mendefinisikan MyCard Custom Element diunduh, di-parse, dan dieksekusi, komponen tersebut akan “hidup”:

1. Shadow DOM akan dibuat.
2. Markup internal (misal: <h2>, <p>) akan dimasukkan ke Shadow DOM.
3. Styling internal akan diterapkan.

Masalahnya di sini adalah: ❌ Flash of Unstyled Content (FOUC) atau Flash of Unrendered Content (FOURC): Pengguna akan melihat <my-card> kosong atau tidak ber-style selama beberapa waktu sebelum JavaScript komponen dimuat. Ini merusak pengalaman pengguna dan terlihat tidak profesional. ❌ SEO: Meskipun mesin pencari modern cukup pintar untuk mengeksekusi JavaScript, rendering awal yang kosong dapat memengaruhi bagaimana konten diindeks atau seberapa cepat ia dianggap relevan. ❌ Performa Awal: Waktu First Contentful Paint (FCP) dan Largest Contentful Paint (LCP) akan tertunda karena harus menunggu JavaScript komponen.

Secara singkat, SSR tradisional yang hanya mengirimkan placeholder Custom Element tidak memberikan manfaat performa yang diharapkan dari SSR. Kita perlu cara agar markup dan styling internal Shadow DOM bisa ikut dirender di server dan dikirimkan bersama HTML utama.

3. Memperkenalkan Declarative Shadow DOM (DSD)

Inilah saatnya Declarative Shadow DOM (DSD) datang sebagai penyelamat! DSD adalah fitur web standar yang memungkinkan Shadow DOM dirender di server sebagai bagian dari HTML awal. Ini berarti markup dan styling internal Shadow DOM sudah ada di HTML yang diterima browser, tanpa perlu menunggu JavaScript Custom Element dieksekusi.

📌 Bagaimana cara kerjanya? Alih-alih membuat Shadow DOM secara imperatif dengan JavaScript (menggunakan attachShadow()), kita bisa mendeklarasikannya langsung di HTML menggunakan elemen <template> dengan atribut shadowroot (atau shadowrootmode).

Contoh sintaks DSD:

<my-card>
  <template shadowroot="open">
    <style>
      :host {
        display: block;
        border: 1px solid #ccc;
        padding: 16px;
        border-radius: 8px;
        font-family: sans-serif;
      }
      h2 {
        color: #333;
      }
      p {
        color: #666;
      }
    </style>
    <h2>Judul Artikel dari DSD</h2>
    <p>Isi singkat artikel dari DSD...</p>
  </template>
  <!-- Ini adalah slot untuk konten Light DOM jika ada -->
  <p slot="footer">Dibuat oleh Admin</p>
</my-card>

Ketika browser menerima HTML ini:

1. Ia akan melihat elemen <template shadowroot="open"> di dalam <my-card>.
2. Browser secara otomatis akan mengubah isi <template> tersebut menjadi Shadow DOM untuk <my-card>, bahkan sebelum JavaScript Custom Element-nya dimuat.
3. Konten di dalam Shadow DOM (judul, paragraf, dan style) akan langsung dirender.
4. Setelah JavaScript Custom Element dimuat dan attachShadow() dipanggil (jika masih diperlukan untuk logika lain), Shadow DOM yang sudah ada akan digunakan kembali (proses yang disebut hydration), tanpa perlu membuat ulang atau merender ulang.

✅ Manfaat utama DSD:

• Performa Awal Cepat: Konten penting langsung terlihat, meningkatkan FCP dan LCP.
• Tidak ada FOUC/FOURC: Pengguna melihat UI yang lengkap dan ber-style sejak awal.
• SEO Ramah: Konten utama dapat diindeks oleh mesin pencari langsung dari HTML.
• Mendukung Enkapsulasi: Meskipun dirender di server, Shadow DOM tetap mempertahankan sifat enkapsulasinya.

4. Implementasi DSD dalam Praktik

Mari kita lihat contoh yang lebih konkret. Misalkan kita memiliki Custom Element my-button yang memiliki Shadow DOM dengan style dan teks internal.

1. Definisi Custom Element (sisi klien):

// my-button.js
class MyButton extends HTMLElement {
  constructor() {
    super();
    // Jika DSD tidak ada, kita akan membuat Shadow DOM di sini
    // Jika DSD sudah ada, browser akan 'menggunakan kembali' DSD ini
    if (!this.shadowRoot) { // Hanya buat jika belum ada (misal: di client-only app)
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <style>
          button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
          }
          button:hover {
            background-color: #0056b3;
          }
        </style>
        <button><slot></slot></button>
      `;
    }
  }

  connectedCallback() {
    console.log('MyButton connected!');
    // Logika interaktif lainnya
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      alert('Tombol diklik!');
    });
  }
}

customElements.define('my-button', MyButton);

2. HTML yang Dirender dari Server (dengan DSD): Server Anda (misal: Node.js dengan Express, PHP, Go, dll.) akan merender HTML berikut dan mengirimkannya ke browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSR Web Components dengan DSD</title>
    <!-- Link ke JavaScript Custom Element Anda -->
    <script type="module" src="/my-button.js"></script>
</head>
<body>
    <h1>Selamat Datang di Aplikasi Saya</h1>

    <my-button>
        <template shadowroot="open">
            <style>
                button {
                    background-color: #007bff;
                    color: white;
                    padding: 10px 20px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    font-size: 16px;
                }
                button:hover {
                    background-color: #0056b3;
                }
            </style>
            <button><slot></slot></button>
        </template>
        Klik Saya
    </my-button>

    <p>Ini adalah konten lain di halaman.</p>
</body>
</html>

Ketika browser menerima HTML ini:

1. Browser akan segera merender <my-button> dengan Shadow DOM yang sudah ada di dalam <template shadowroot="open">. Pengguna langsung melihat tombol yang ber-style dan berlabel “Klik Saya”.
2. Secara paralel, my-button.js akan diunduh.
3. Setelah my-button.js dieksekusi, customElements.define('my-button', MyButton) akan berjalan. Instans MyButton akan di-upgrade dari elemen HTML biasa menjadi Custom Element.
4. Dalam constructor MyButton, this.shadowRoot sudah ada karena DSD. Jadi this.attachShadow() tidak perlu dipanggil lagi (atau jika dipanggil, ia akan “mengadopsi” Shadow DOM yang ada).
5. connectedCallback() akan dipanggil, dan event listener untuk klik akan ditambahkan. Tombol pun menjadi interaktif.

Ini adalah proses hydration yang mulus: konten yang dirender server dihidupkan dengan JavaScript sisi klien tanpa mengganggu tampilan awal.

⚠️ Penting: Pastikan konten di dalam <template shadowroot="open"> (termasuk <style>) sama persis dengan apa yang akan dibuat oleh Custom Element Anda di sisi klien. Perbedaan bisa menyebabkan hydration mismatch atau perubahan visual yang tidak diinginkan.

5. Integrasi DSD dengan Framework/Library Web Components

Meskipun DSD bisa digunakan dengan Vanilla JavaScript Custom Elements, banyak developer menggunakan library seperti Lit atau Stencil untuk menyederhanakan pengembangan Web Components. Berita baiknya adalah, library-library ini sudah mulai atau akan mendukung DSD secara native atau melalui plugin.

• Lit: Lit memiliki integrasi yang kuat dengan SSR dan DSD. Anda bisa menggunakan @lit-labs/ssr untuk merender komponen Lit di server dan secara otomatis menghasilkan HTML dengan DSD. Ini menyederhanakan proses penulisan markup DSD secara manual. Lit akan memastikan bahwa Shadow DOM yang dihasilkan server cocok dengan apa yang akan dibuat oleh komponen di browser.
• Stencil: Stencil juga mendukung SSR untuk komponennya dan dapat memanfaatkan DSD untuk initial render yang lebih cepat.

💡 Tips: Jika Anda menggunakan library, selalu periksa dokumentasi mereka untuk panduan SSR dan DSD terbaik. Mereka seringkali menyediakan API atau tooling yang mengotomatisasi banyak detail kompleks.

6. Tips dan Best Practices untuk SSR Web Components

Mengimplementasikan SSR dengan DSD membutuhkan perhatian pada beberapa detail:

• Pastikan Output DSD Konsisten: Seperti yang disebutkan, pastikan HTML dan CSS di dalam <template shadowroot="open"> identik dengan apa yang akan dihasilkan oleh Custom Element di sisi klien. Gunakan rendering engine yang sama di server dan klien jika memungkinkan, atau shared code untuk template.
• CSS Critical Path: Untuk performa terbaik, pertimbangkan untuk mengekstrak CSS yang relevan untuk initial render dan menyertakannya secara inline di <head> dokumen atau langsung di dalam <template shadowroot="open"> seperti contoh di atas. Ini mengurangi render-blocking resources.
• JavaScript Loading Strategi:
  • Gunakan type="module" untuk skrip Custom Element Anda.
  • Pertimbangkan defer atau async untuk skrip yang tidak kritis agar tidak memblokir parsing HTML.
  • Jika komponen Anda tidak memerlukan interaktivitas segera, Anda bisa menunda loading JavaScript-nya hingga setelah initial render.
• Penanganan Slots: DSD secara otomatis akan menangani elemen <slot> yang dideklarasikan di Shadow DOM, mengisi mereka dengan Light DOM yang sesuai. Pastikan struktur Light DOM Anda cocok dengan slot yang diharapkan oleh komponen.
• Hydration yang Efisien: Jika Anda memiliki banyak komponen atau komponen kompleks, proses hydration bisa memakan waktu. Pertimbangkan strategi partial hydration di mana hanya komponen yang benar-benar memerlukan interaktivitas yang dihidrasi, atau progressive hydration yang menghidrasi komponen secara bertahap.
• Server-Side Styling: Pastikan semua CSS yang dibutuhkan untuk Shadow DOM juga tersedia di server saat rendering. Ini bisa berarti menggunakan CSS-in-JS yang dapat diekstrak atau tooling yang mendukung server-side CSS extraction.
• Error Handling: Siapkan mekanisme untuk menangani hydration mismatch jika ada perbedaan antara output server dan ekspektasi klien. Beberapa library Web Components menyediakan hook untuk ini.

Kesimpulan

Menggabungkan Server-Side Rendering dengan Web Components adalah langkah maju yang signifikan untuk membangun aplikasi web berperforma tinggi dan modular. Declarative Shadow DOM (DSD) menghilangkan hambatan utama dengan memungkinkan Shadow DOM dirender di server, mengatasi masalah FOUC/FOURC, meningkatkan SEO, dan mempercepat waktu loading awal.

Dengan DSD, Anda tidak perlu lagi mengorbankan performa awal demi enkapsulasi Web Components, atau sebaliknya. Anda bisa memiliki yang terbaik dari kedua dunia: halaman yang cepat dimuat dan langsung ber-style, sekaligus memanfaatkan kekuatan modularitas dan reusabilitas Web Components.

Meskipun implementasinya memerlukan perhatian terhadap detail seperti konsistensi markup dan strategi hydration, manfaatnya sangat besar. Mulailah bereksperimen dengan DSD di proyek Anda dan saksikan bagaimana Web Components Anda “hidup” lebih cepat dari sebelumnya! 🚀

🔗 Baca Juga

• Mengatasi Tantangan Aksesibilitas (A11y) dalam Shadow DOM dan Web Components: Panduan Praktis
• Web Components untuk Design System Framework-Agnostic: Fondasi UI yang Konsisten di Berbagai Framework
• Membangun Web Components Modern dengan Lit: Ringan, Cepat, dan Interoperabel
• Web Components: Membangun Komponen UI yang Reusable dan Framework-Agnostic