Partial Hydration untuk Web Components: Membangun UI Interaktif yang Efisien Setelah SSR

1. Pendahuluan

Di era aplikasi web modern, kita sering dihadapkan pada dilema: bagaimana mencapai waktu loading halaman yang super cepat sekaligus menyediakan interaktivitas yang kaya? Server-Side Rendering (SSR) adalah jawaban populer untuk performa loading awal dan SEO, karena browser langsung menerima HTML yang sudah jadi. Namun, SSR memiliki tantangannya sendiri, terutama dalam proses “hydration”.

Hydration adalah proses di mana JavaScript sisi klien mengambil alih HTML yang sudah dirender server, menempelkan event listener, dan mengaktifkan fungsionalitas interaktif. Jika seluruh halaman di-hydrate secara bersamaan (full hydration), proses ini bisa memakan waktu dan sumber daya, terutama untuk aplikasi besar dengan banyak JavaScript. Akibatnya, meskipun halaman terlihat cepat, waktu untuk menjadi sepenuhnya interaktif (Time To Interactive - TTI) bisa jadi lambat. 🐢

Di sinilah Partial Hydration datang sebagai solusi cerdas. Bayangkan Anda membangun sebuah rumah. SSR itu seperti membangun kerangka rumah yang kokoh dan indah dalam sekejap. Tapi, Anda tidak perlu memasang listrik dan air di setiap ruangan secara bersamaan. Partial Hydration memungkinkan Anda untuk hanya memasang listrik dan air (mengaktifkan JavaScript) di ruangan atau area tertentu yang benar-benar membutuhkannya, dan hanya saat diperlukan.

Kenapa Web Components? Web Components, dengan sifatnya yang terenkapsulasi dan framework-agnostic, adalah fondasi yang ideal untuk mengimplementasikan strategi Partial Hydration. Mereka memungkinkan kita untuk memecah UI menjadi blok-blok modular yang mandiri, sehingga kita bisa memutuskan secara granular kapan dan bagaimana setiap blok harus dihidrasi.

Dalam artikel ini, kita akan menyelami konsep Partial Hydration, mengapa Web Components adalah pasangan yang sempurna untuk strategi ini, dan bagaimana Anda bisa mengimplementasikannya untuk membangun aplikasi web yang cepat, efisien, dan interaktif.

2. Memahami Partial Hydration dan Tantangannya

Partial Hydration adalah teknik optimasi frontend di mana Anda hanya mengaktifkan JavaScript untuk bagian-bagian tertentu dari halaman yang dirender server, bukan seluruh halaman. Tujuannya adalah mengurangi jumlah JavaScript yang perlu diunduh, di-parse, dan dieksekusi oleh browser, sehingga meningkatkan TTI dan responsivitas aplikasi.

Analogi rumah modular kita bisa diperluas:

• SSR: Kerangka rumah sudah berdiri, dinding sudah dicat, furnitur dasar sudah ada. Pengunjung bisa langsung melihat dan masuk.
• Full Hydration: Anda memasang instalasi listrik, air, dan sistem pintar di seluruh rumah sekaligus. Ini butuh waktu dan tenaga yang besar, dan selama proses itu, mungkin ada bagian yang belum bisa digunakan secara penuh.
• Partial Hydration: Anda hanya memasang instalasi listrik di dapur dan kamar mandi utama terlebih dahulu (karena paling kritis), lalu sisanya nanti saat ada yang benar-benar mau menggunakan kamar tidur atau ruang tamu.

Manfaat Utama Partial Hydration:

• Performa Lebih Baik ✅: Mengurangi JavaScript yang dieksekusi di main thread, yang berarti browser lebih cepat bebas untuk tugas rendering dan interaksi lainnya. Ini berdampak positif pada Core Web Vitals seperti Interaction to Next Paint (INP).
• TTI Lebih Cepat ✅: Pengguna bisa berinteraksi dengan bagian-bagian kritis halaman lebih cepat.
• Pengalaman Pengguna Lebih Mulus ✅: Mengurangi “jank” atau lag yang terjadi saat hydration penuh.
• Sumber Daya Lebih Hemat ✅: Baik di sisi klien (baterai, CPU) maupun di sisi server (jika JS di-bundle lebih kecil).

Tantangan Partial Hydration:

Meskipun menjanjikan, Partial Hydration juga memiliki tantangan:

• Kompleksitas Implementasi ⚠️: Menentukan bagian mana yang perlu dihidrasi dan kapan bisa jadi rumit.
• Manajemen State ⚠️: Bagaimana jika komponen yang tidak dihidrasi perlu berinteraksi dengan komponen yang sudah dihidrasi atau state global?
• Kompatibilitas ⚠️: Tidak semua framework atau library mendukung Partial Hydration secara native tanpa konfigurasi tambahan.

Untungnya, Web Components menawarkan fondasi yang sangat kuat untuk mengatasi sebagian besar tantangan ini.

3. Web Components sebagai Blok Bangunan Ideal

Web Components adalah seperangkat standar web yang memungkinkan Anda membuat tag HTML kustom yang terenkapsulasi dan dapat digunakan kembali. Mereka sangat cocok untuk Partial Hydration karena beberapa alasan:

1. Enkapsulasi (Shadow DOM): Setiap Web Component dapat memiliki Shadow DOM-nya sendiri, yang mengisolasi markup, style, dan perilakunya dari sisa halaman. Ini berarti Anda bisa menghidrasi satu komponen tanpa khawatir memengaruhi komponen lain atau global scope.
2. Siklus Hidup (Custom Elements Lifecycle): Custom Elements memiliki lifecycle callback seperti connectedCallback dan disconnectedCallback. connectedCallback adalah titik masuk yang sempurna untuk memulai proses hidrasi JavaScript komponen saat elemen ditambahkan ke DOM.
3. Framework-Agnostic: Web Components bekerja di semua framework (React, Vue, Angular) atau bahkan tanpa framework sama sekali. Ini memberi Anda fleksibilitas untuk mengadopsi Partial Hydration tanpa terikat pada ekosistem framework tertentu.
4. Deklaratif: Anda mendefinisikan elemen kustom (<my-component>), dan browser yang mengelolanya. Ini sangat cocok dengan pendekatan SSR di mana HTML awal sudah deklaratif.

Contoh Sederhana: Komponen my-counter

Mari kita lihat bagaimana sebuah Web Component bisa dirender server-side dan kemudian dihidrasi secara parsial.

Pertama, definisi Web Component kita:

// my-counter.js
class MyCounter extends HTMLElement {
  #count = 0;
  #button;
  #span;

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
        button { padding: 8px 12px; cursor: pointer; }
        span { margin-left: 10px; font-weight: bold; }
      </style>
      <button>Increment</button>
      <span>0</span>
    `;
    this.#button = this.shadowRoot.querySelector('button');
    this.#span = this.shadowRoot.querySelector('span');

    // Default: Tidak ada event listener saat konstruktor
    // Event listener akan ditambahkan saat hidrasi
  }

  // Metode untuk mengaktifkan interaktivitas
  activate() {
    if (!this.#button.hasAttribute('data-active')) { // Hindari aktivasi berulang
      this.#button.addEventListener('click', this.#increment);
      this.#button.setAttribute('data-active', 'true');
      console.log('Counter activated!');
    }
  }

  // Metode untuk menonaktifkan interaktivitas (opsional)
  deactivate() {
    if (this.#button.hasAttribute('data-active')) {
      this.#button.removeEventListener('click', this.#increment);
      this.#button.removeAttribute('data-active');
      console.log('Counter deactivated!');
    }
  }

  #increment = () => {
    this.#count++;
    this.#span.textContent = this.#count;
    this.dispatchEvent(new CustomEvent('count-updated', {
      detail: { count: this.#count },
      bubbles: true,
      composed: true
    }));
  };

  connectedCallback() {
    console.log('MyCounter connected to DOM.');
    // Di sini kita akan menambahkan logika hidrasi parsial
  }

  disconnectedCallback() {
    console.log('MyCounter disconnected from DOM.');
    this.deactivate(); // Bersihkan event listener
  }
}

customElements.define('my-counter', MyCounter);

Di sisi server, Anda akan merender komponen ini sebagai HTML statis:

<!-- Rendered by SSR -->
<my-counter>
  #shadow-root (open)
    <style>...</style>
    <button>Increment</button>
    <span>0</span>
</my-counter>

Secara default, tombol “Increment” tidak akan berfungsi karena event listener belum ditambahkan. Kita akan mengontrol kapan activate() dipanggil di sisi klien.

4. Strategi Implementasi Partial Hydration dengan Web Components

Ada beberapa strategi untuk mengimplementasikan Partial Hydration. Pilihan terbaik tergantung pada kebutuhan interaktivitas dan prioritas performa komponen Anda.

Strategi 1: Hydrate on Interaction (Lazy Hydration)

🎯 Ide: Komponen hanya dihidrasi (JavaScript-nya diaktifkan) ketika pengguna berinteraksi dengannya, atau ketika komponen tersebut masuk ke dalam viewport. Ini sangat cocok untuk komponen yang tidak segera memerlukan interaktivitas, seperti komentar, widget yang tersembunyi, atau bagian yang di-scroll-ke-bawah.

Teknik: Intersection Observer dan Event Listener

1. Intersection Observer: Untuk menghidrasi komponen saat masuk ke viewport.
2. Event Listener: Untuk menghidrasi saat terjadi click, mouseover, atau event interaksi lainnya.

// my-counter.js (modifikasi connectedCallback)
// ... (kode sebelumnya)

connectedCallback() {
  console.log('MyCounter connected to DOM.');

  // Check jika sudah di-hydrate dari atribut data-active
  if (this.#button.hasAttribute('data-active')) {
    return; // Sudah aktif, tidak perlu hidrasi ulang
  }

  // Strategi Lazy Hydration: Hydrate saat terlihat
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.activate(); // Aktifkan interaktivitas
        observer.unobserve(this); // Hentikan observasi setelah aktif
      }
    });
  }, { threshold: 0.1 }); // Aktifkan saat 10% komponen terlihat

  observer.observe(this);

  // Strategi Lazy Hydration: Hydrate saat interaksi pertama
  // Jika ingin lebih agresif, bisa juga tambahkan event listener di root komponen
  // Tapi untuk tombol, event listener di #button lebih spesifik.
  // Jika tombol diklik sebelum observer, kita bisa langsung aktifkan.
  this.#button.addEventListener('click', () => {
    if (!this.#button.hasAttribute('data-active')) {
      this.activate();
    }
  }, { once: true }); // Aktifkan hanya sekali
}

// ... (kode lainnya)

Dengan cara ini, JavaScript untuk tombol Increment hanya akan ditambahkan dan diaktifkan ketika my-counter masuk ke viewport atau saat pengguna pertama kali mengkliknya.

Strategi 2: Hydrate on Idle (Progressive Hydration)

🎯 Ide: Komponen dihidrasi ketika browser sedang “idle” atau tidak sibuk dengan tugas rendering kritis. Ini ideal untuk komponen yang perlu interaktif relatif cepat tapi tidak harus segera setelah halaman dimuat.

Teknik: requestIdleCallback

requestIdleCallback menjadwalkan fungsi untuk dijalankan oleh browser saat ada waktu luang.

// my-counter.js (modifikasi connectedCallback)
// ... (kode sebelumnya)

connectedCallback() {
  console.log('MyCounter connected to DOM.');

  if (this.#button.hasAttribute('data-active')) {
    return;
  }

  // Strategi Progressive Hydration: Hydrate saat browser idle
  if ('requestIdleCallback' in window) {
    window.requestIdleCallback(() => {
      this.activate();
    }, { timeout: 2000 }); // Jika tidak idle dalam 2 detik, paksa aktifkan
  } else {
    // Fallback untuk browser lama
    setTimeout(() => this.activate(), 500);
  }
}

// ... (kode lainnya)

⚠️ Perhatian: requestIdleCallback mungkin tidak selalu didukung di semua browser (misalnya, Safari belum mendukungnya secara native). Pastikan untuk menyertakan fallback.

Strategi 3: Hydrate by Criticality (Island-like Architecture)

🎯 Ide: Anda secara eksplisit menandai komponen mana yang harus dihidrasi dan dengan strategi apa, mirip dengan konsep “Islands Architecture”. Komponen yang sangat interaktif dan penting dihidrasi lebih awal (eagerly), sementara yang lain dihidrasi secara lazy atau idle.

Teknik: Atribut Data (data-hydrate)

Anda bisa menambahkan atribut data-hydrate pada elemen HTML yang dirender server untuk mengontrol perilaku hidrasi di sisi klien.

Sisi Server (Contoh Markup):

<!-- Header yang selalu interaktif, hydrate eager -->
<my-header data-hydrate="eager"></my-header>

<!-- Counter yang penting tapi bisa menunggu sebentar, hydrate on idle -->
<my-counter data-hydrate="on-idle"></my-counter>

<!-- Komentar yang hanya interaktif saat terlihat, hydrate on interaction -->
<my-comments data-hydrate="on-interaction"></my-comments>

Sisi Klien (Dalam connectedCallback komponen atau di script terpisah):

// my-counter.js (modifikasi connectedCallback)
// ... (kode sebelumnya)

connectedCallback() {
  console.log('MyCounter connected to DOM.');

  if (this.#button.hasAttribute('data-active')) {
    return;
  }

  const hydrateStrategy = this.getAttribute('data-hydrate');

  switch (hydrateStrategy) {
    case 'eager':
      this.activate(); // Aktifkan segera
      break;
    case 'on-idle':
      if ('requestIdleCallback' in window) {
        window.requestIdleCallback(() => this.activate(), { timeout: 2000 });
      } else {
        setTimeout(() => this.activate(), 500);
      }
      break;
    case 'on-interaction':
    default: // Default juga on-interaction jika tidak ada atau tidak dikenal