Membuka Kekuatan React: Selami Lebih Dalam ReactDOM dan Server-Side Rendering

Dalam ekosistem React yang luas, kita sering berfokus pada komponen, state, dan hooks. Namun, keajaiban yang mengubah komponen deklaratif kita menjadi antarmuka pengguna yang nyata dan interaktif di browser web terjadi melalui sebuah pustaka penting: react-dom. Paket ini adalah jembatan esensial antara Virtual DOM abstrak React dan Document Object Model (DOM) konkret yang dilihat dan diinteraksikan oleh pengguna. Bagi pengembang yang membangun aplikasi untuk audiens global, memahami cara memanfaatkan react-dom secara efektif adalah kunci untuk menciptakan pengalaman berperforma tinggi, mudah diakses, dan ramah mesin pencari.

Panduan komprehensif ini akan membawa Anda menyelami lebih dalam pustaka react-dom. Kita akan mulai dengan dasar-dasar client-side rendering, menjelajahi utilitas canggih seperti portal, dan kemudian mengalihkan fokus kita ke paradigma transformatif Server-Side Rendering (SSR) serta dampaknya pada performa dan SEO di seluruh dunia.

Inti dari Client-Side Rendering (CSR) dengan ReactDOM

Pada intinya, React beroperasi pada prinsip abstraksi. Kita mendeskripsikan seperti apa UI seharusnya terlihat untuk state tertentu, dan React menangani bagaimana caranya. Model client-side rendering (CSR), yang merupakan default untuk aplikasi yang dibuat dengan alat seperti Create React App, mengikuti proses yang jelas:

1. Browser meminta halaman web dan menerima file HTML minimal dengan tautan ke bundel JavaScript yang besar.
2. Browser mengunduh dan menjalankan bundel JavaScript tersebut.
3. React mengambil alih, membangun Virtual DOM di memori, dan kemudian menggunakan react-dom untuk me-render seluruh aplikasi ke dalam elemen DOM tertentu (biasanya <div id="root"></div>).
4. Pengguna sekarang dapat melihat dan berinteraksi dengan aplikasi.

Proses ini diorkestrasi oleh satu titik masuk yang kuat dalam aplikasi React modern.

API Modern: `ReactDOM.createRoot()`

Jika Anda telah bekerja dengan React selama beberapa tahun, Anda mungkin akrab dengan ReactDOM.render(). Namun, dengan dirilisnya React 18, cara resmi dan yang direkomendasikan untuk menginisialisasi aplikasi yang di-render di sisi klien adalah dengan menggunakan ReactDOM.createRoot().

Mengapa ada perubahan? API root yang baru memungkinkan fitur-fitur konkuren React, yang memungkinkan React untuk menyiapkan beberapa versi UI secara bersamaan. Ini adalah fondasi untuk peningkatan performa yang kuat dan fitur-fitur baru seperti transisi. Menggunakan ReactDOM.render() yang lama akan membuat aplikasi Anda tidak bisa menggunakan kemampuan modern ini.

Berikut cara Anda menginisialisasi aplikasi React pada umumnya:

            
// index.js - Titik masuk aplikasi Anda

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 1. Temukan elemen DOM tempat aplikasi React akan dipasang.
const rootElement = document.getElementById('root');

// 2. Buat root untuk elemen tersebut.
const root = ReactDOM.createRoot(rootElement);

// 3. Render komponen App utama Anda ke dalam root.
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

            

              
                Copy
              
            
          

Blok kode yang sederhana dan elegan ini adalah fondasi dari hampir setiap aplikasi React sisi klien. Metode root.render() dapat dipanggil beberapa kali untuk memperbarui UI; React akan secara efisien mengelola pembaruan dengan membandingkan pohon Virtual DOM yang baru dengan yang sebelumnya dan hanya menerapkan perubahan yang diperlukan ke DOM yang sebenarnya.

Lebih dari Sekadar Dasar: Utilitas Penting ReactDOM

Meskipun createRoot adalah titik masuk utama, react-dom menyediakan beberapa utilitas canggih lainnya untuk menangani tantangan UI yang umum namun rumit.

Keluar dari Kotak: `createPortal`

Pernahkah Anda mencoba membuat modal, tooltip, atau pop-up notifikasi dan mengalami masalah dengan konteks tumpukan CSS (z-index) atau terpotong oleh properti overflow: hidden dari elemen leluhur? Ini adalah masalah UI klasik. Dari perspektif logika komponen, sebuah modal mungkin dimiliki oleh tombol yang berada jauh di dalam pohon komponen Anda. Namun secara visual, ia perlu di-render di tingkat teratas DOM, sering kali sebagai anak langsung dari <body>, untuk lolos dari batasan CSS ini.

Inilah tepatnya yang dipecahkan oleh ReactDOM.createPortal. Ini memungkinkan Anda untuk me-render anak-anak sebuah komponen ke bagian lain dari DOM, di luar hierarki DOM induknya, sambil tetap mempertahankan posisinya di pohon komponen React. Ini berarti event bubbling masih berfungsi seperti yang Anda harapkan—sebuah event yang dipicu dari dalam portal akan merambat ke leluhurnya di pohon React, bahkan jika leluhur tersebut bukan induk langsungnya di DOM.

Contoh: Komponen Modal yang Dapat Digunakan Kembali

            
// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

// Kita asumsikan ada <div id="modal-root"></div> di public/index.html Anda
const modalRoot = document.getElementById('modal-root');

const Modal = ({ children }) => {
  const el = document.createElement('div');

  React.useEffect(() => {
    // Saat mount, tambahkan elemen ke root modal.
    modalRoot.appendChild(el);

    // Saat unmount, bersihkan dengan menghapus elemen.
    return () => {
      modalRoot.removeChild(el);
    };
  }, [el]);

  // Gunakan createPortal untuk me-render children ke dalam node DOM yang terpisah.
  return ReactDOM.createPortal(children, el);
};

export default Modal;

// App.js
import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <h1>Aplikasi Saya</h1>
      <button onClick={() => setShowModal(true)}>Tampilkan Modal</button>
      {showModal && (
        <Modal>
          <div className="modal-content">
            <h2>Ini adalah Modal Portal!</h2>
            <p>Ini di-render di '#modal-root', tetapi state-nya dikelola oleh App.js</p>
            <button onClick={() => setShowModal(false)}>Tutup</button>
          </div>
        </Modal>
      )}
    </div>
  );
}

            

              
                Copy
              
            
          

Memaksa Pembaruan Sinkron: `flushSync`

React sangat cerdas dalam hal performa. Salah satu optimisasi kuncinya adalah pengelompokan state (state batching). Ketika Anda memanggil beberapa fungsi pembaruan state dalam satu event handler, React tidak langsung melakukan re-render setelah masing-masing fungsi. Sebaliknya, ia mengelompokkannya bersama-sama dan melakukan satu re-render yang efisien di akhir. Ini mencegah render perantara yang tidak perlu.

Namun, ada kasus-kasus langka di mana Anda perlu memaksa React untuk menerapkan pembaruan DOM secara sinkron. Misalnya, Anda mungkin perlu membaca ukuran atau posisi elemen DOM segera setelah perubahan state yang memengaruhinya. Di sinilah flushSync berperan.

flushSync adalah jalan keluar darurat. Anda membungkus pembaruan state di dalamnya, dan React akan secara sinkron menjalankan pembaruan dan mengirimkan perubahan ke DOM sebelum menjalankan kode apa pun yang mengikutinya.

Gunakan dengan hati-hati! Penggunaan flushSync yang berlebihan dapat meniadakan manfaat performa dari batching. Biasanya ini hanya diperlukan untuk interoperabilitas dengan pustaka pihak ketiga atau untuk logika animasi dan tata letak yang kompleks.

            
import { flushSync } from 'react-dom';

function ListComponent() {
  const [items, setItems] = useState(['A', 'B', 'C']);
  const listRef = React.useRef();

  const handleAddItem = () => {
    // Misalkan kita perlu menggulir ke bawah segera setelah menambahkan item.
    
    flushSync(() => {
      setItems(prev => [...prev, 'D']);
    });
    
    // Pada saat baris ini berjalan, DOM sudah diperbarui. Item baru 'D' sudah di-render.
    // Sekarang kita bisa dengan andal mengukur tinggi baru daftar dan menggulirnya.
    listRef.current.scrollTop = listRef.current.scrollHeight;
  };

  return (
    <div>
      <ul ref={listRef} style={{ height: '100px', overflow: 'auto' }}>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={handleAddItem}>Tambah Item dan Gulir</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Catatan Masa Lalu: `findDOMNode` (Lama)

Di codebase yang lebih tua, Anda mungkin menemukan findDOMNode. Fungsi ini digunakan untuk mendapatkan node DOM browser yang mendasari dari instance komponen kelas. Namun, sekarang ini dianggap lama dan sangat tidak dianjurkan.

Alasan utamanya adalah karena ini merusak abstraksi komponen. Komponen induk seharusnya tidak menjangkau detail implementasi anaknya untuk menemukan node DOM. Ini membuat komponen menjadi rapuh dan sulit untuk di-refactor. Selain itu, dengan munculnya functional component dan hooks, findDOMNode sama sekali tidak berfungsi dengan mereka.

Pendekatan modern dan yang benar adalah menggunakan ref dan ref forwarding. Komponen anak dapat secara eksplisit mengekspos node DOM tertentu kepada induknya melalui forwardRef, mempertahankan kontrak yang jelas dan eksplisit.

Pergeseran Paradigma: Server-Side Rendering (SSR) dengan ReactDOM

Meskipun CSR sangat kuat untuk membangun aplikasi yang kompleks dan interaktif, ia memiliki dua kelemahan signifikan, terutama untuk basis pengguna global:

1. Performa Pemuatan Awal: Pengguna melihat layar putih kosong sampai seluruh bundel JavaScript diunduh, diurai, dan dijalankan. Di jaringan yang lebih lambat atau perangkat yang kurang kuat, yang umum di banyak bagian dunia, ini dapat menyebabkan waktu tunggu yang sangat lama dan membuat frustrasi.
2. Optimisasi Mesin Pencari (SEO): Meskipun crawler mesin pencari telah menjadi lebih baik dalam menjalankan JavaScript, mereka tidak sempurna. Server yang mengirim kembali file HTML yang hampir kosong bergantung pada crawler untuk me-render halaman, yang dapat menyebabkan pengindeksan yang tidak lengkap atau peringkat yang lebih rendah dibandingkan dengan halaman yang menyajikan konten HTML yang terbentuk sepenuhnya dari awal.

Server-Side Rendering (SSR) secara langsung mengatasi masalah-masalah ini. Dengan SSR, rendering awal aplikasi React Anda terjadi di server. Server menghasilkan HTML lengkap untuk halaman yang diminta dan mengirimkannya ke browser. Pengguna segera melihat kontennya—sebuah kemenangan besar untuk performa yang dirasakan dan SEO.

Paket `react-dom/server`

Untuk melakukan keajaiban sisi server ini, React menyediakan paket terpisah: react-dom/server. Paket ini berisi alat yang diperlukan untuk me-render komponen ke lingkungan non-DOM, seperti server Node.js.

Dua metode utamanya adalah:

• renderToString(element): Ini adalah pekerja utama SSR. Ini mengambil elemen React (seperti komponen <App /> Anda) dan me-rendernya menjadi string HTML statis. String ini menyertakan atribut khusus `data-reactroot` yang akan digunakan React di sisi klien untuk proses yang disebut hidrasi.
• renderToStaticMarkup(element): Ini serupa, tetapi menghilangkan atribut `data-reactroot` tambahan. Ini berguna ketika Anda ingin menghasilkan HTML statis murni yang tidak akan dihidrasi di klien. Kasus penggunaan yang bagus adalah menghasilkan HTML untuk template email.

Kepingan Terakhir Puzzle: Hidrasi

HTML yang dihasilkan oleh server hanyalah markup statis. Kelihatannya benar, tetapi tidak interaktif. Tombol-tombolnya tidak berfungsi, dan tidak ada state sisi klien. Proses membuat HTML statis ini menjadi interaktif disebut hidrasi.

Setelah browser menerima HTML yang dirender server, ia juga mengunduh bundel JavaScript yang sama seperti dalam kasus CSR. Tetapi alih-alih membuat ulang seluruh DOM dari awal, React mengambil alih HTML yang ada. Ia menelusuri pohon DOM yang dirender server, melampirkan event listener yang diperlukan (seperti onClick), dan menginisialisasi state aplikasi. Proses ini berjalan mulus dan jauh lebih cepat daripada membangun DOM dari nol.

Untuk mengaktifkan hidrasi di klien, Anda menggunakan ReactDOM.hydrateRoot() alih-alih createRoot().

Contoh Alur SSR Sederhana (menggunakan Express.js di server):

            
// server.js

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './src/App';

const app = express();

app.get('/', (req, res) => {
  // 1. Render komponen Aplikasi React menjadi string HTML.
  const appHtml = ReactDOMServer.renderToString(<App />);

  // 2. Suntikkan HTML yang dirender ke dalam sebuah template.
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Aplikasi React SSR</title>
      </head>
      <body>
        <div id="root">${appHtml}</div>
        <script src="/client.js"></script> <!-- Bundel JS sisi klien -->
      </body>
    </html>
  `;

  // 3. Kirim dokumen HTML lengkap ke klien.
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server berjalan di port 3000');
});

            

              
                Copy
              
            
          

            
// client.js - Titik masuk sisi klien

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');

// 1. Alih-alih createRoot, gunakan hydrateRoot.
// React tidak akan membuat ulang DOM, tetapi akan melampirkan event listener
// ke markup yang sudah dirender oleh server.
ReactDOM.hydrateRoot(
  rootElement,
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

            

              
                Copy
              
            
          

Sangat penting bahwa pohon komponen yang dirender di klien untuk hidrasi identik dengan yang dirender di server. Ketidakcocokan dapat menyebabkan kesalahan hidrasi dan perilaku yang tidak terduga.

Memilih Strategi yang Tepat: CSR vs. SSR

Keputusan antara CSR dan SSR bukan tentang mana yang secara universal "lebih baik", tetapi mana yang lebih baik untuk kebutuhan spesifik aplikasi Anda. Framework seperti Next.js dan Remix telah membuat SSR jauh lebih mudah diakses, tetapi masih penting untuk memahami pertukarannya.

Kapan Memilih Client-Side Rendering (CSR):

• Dasbor dan Panel Admin yang Sangat Interaktif: Untuk aplikasi di balik halaman login di mana SEO tidak relevan dan pengguna menggunakan koneksi yang stabil dan cepat, kesederhanaan CSR sering kali lebih disukai.
• Alat Internal: Ketika performa untuk pemuatan halaman pertama kurang kritis dibandingkan kecepatan dan kesederhanaan pengembangan.
• Proof of Concept dan MVP: CSR biasanya lebih cepat untuk diatur dan di-deploy, menjadikannya ideal untuk prototipe cepat.

Kapan Memilih Server-Side Rendering (SSR):

• Situs Web Konten yang Menghadap Publik: Untuk blog, situs berita, halaman pemasaran, dan situs apa pun di mana kemudahan ditemukan oleh mesin pencari adalah yang terpenting.
• Platform E-commerce: Halaman produk harus dimuat dengan cepat dan dapat diindeks dengan sempurna oleh mesin pencari dan crawler media sosial untuk mendorong penjualan.
• Aplikasi yang Menargetkan Audiens Global: Ketika pengguna Anda mungkin memiliki koneksi internet yang lebih lambat atau perangkat yang kurang kuat, mengirimkan HTML yang sudah di-render sebelumnya secara signifikan meningkatkan pengalaman pengguna awal.

Perlu juga dicatat adanya pendekatan hibrida seperti Static Site Generation (SSG), di mana halaman di-render sebelumnya menjadi HTML pada saat build, dan Incremental Static Regeneration (ISR), yang memungkinkan halaman statis diperbarui secara berkala setelah deployment. Ini menawarkan manfaat performa SSR dengan biaya server yang lebih rendah.

Kesimpulan: Jembatan Serbaguna Menuju DOM

Paket react-dom jauh lebih dari sekadar alat rendering sederhana; ini adalah pustaka canggih yang memberi pengembang kontrol yang terperinci atas bagaimana aplikasi React mereka berinteraksi dengan browser. Dari createRoot yang fundamental untuk aplikasi sisi klien hingga utilitas canggih seperti createPortal untuk UI yang kompleks, ia menyediakan alat yang diperlukan untuk pengembangan web modern.

Yang paling penting, dengan menyediakan mekanisme server-side rendering dan hidrasi yang kuat melalui react-dom/server dan hydrateRoot, React memberdayakan pengembang untuk membangun aplikasi yang tidak hanya interaktif dan dinamis tetapi juga berperforma tinggi dan ramah SEO untuk audiens global yang beragam. Memahami strategi rendering ini dan memilih yang tepat untuk proyek Anda adalah ciri khas dari pengembang React yang terampil, memungkinkan Anda untuk memberikan pengalaman terbaik kepada setiap pengguna, di mana pun mereka berada atau perangkat apa pun yang mereka gunakan.