React Server Components (RSC): Masa depan React – Beragampengetahuan

React Server Components (RSC) mewakili perubahan paradigma dalam cara aplikasi React disajikan pada hari jadinya yang ke 10. RSC pertama kali diperkenalkan pada akhir tahun 2020, dengan versi stabil pertama dari fitur tersebut diluncurkan sebagai bagian dari React 19 pada tahun 2024. Secara tradisional, aplikasi React dijalankan di klien. Artinya browser akan mendownload bundel JavaScript yang berisi semua kode yang diperlukan untuk menjalankan aplikasi, dan kemudian merender aplikasi tersebut. Walaupun pendekatan ini memiliki beberapa keuntungan, pendekatan ini menghasilkan pemuatan awal yang lambat, bahkan menjadi lebih lambat karena kebutuhan untuk mengambil dan memproses data pada klien. Dengan React Server Components, React sekarang dapat berjalan di server tanpa harus dikirim ke klien, secara mendasar mengubah cara kerja inti React dan cara kami membangun aplikasi dengannya.

Render Sisi Server (SSR)

Untuk memahami React Server Components (RSC), pertama-tama kita perlu memahami cara kerja server-side rendering (SSR). Jika Anda sudah familiar dengan SSR, silakan lewati bagian ini. SSR adalah teknologi pengembangan web yang merender halaman web di server, bukan di browser.

cara kerjanya

1. Memerlukan: Pengguna mengirimkan permintaan halaman web ke server
2. pemrosesan RSK: Server menangani permintaan, termasuk mendapatkan data, menjalankan logika apa pun, kemudian membuat halaman HTML menggunakan mesin template, dan mengirimkan respons kembali ke server.
3. Melembabkan (opsional): Setelah HTML diterima, JavaScript diunduh melalui tag skrip di dalam HTML dan dijalankan di browser untuk menambah interaktivitas ke halaman HTML.

keuntungan

1. Halaman awal dimuat lebih cepat
2. SEO yang lebih baik

Meskipun Komponen Server React dan SSR melibatkan pemrosesan sisi server, RSC memberi kita lebih banyak fleksibilitas, memungkinkan beberapa komponen dirender di server dan beberapa di klien. Berbeda dengan SSR yang seluruh halaman HTML harus dibangun di sisi server.

Sorotan RSC

Ketika aplikasi web menjadi lebih kompleks, lebih banyak fungsi yang didorong ke browser untuk merender visualisasi yang kompleks. RSC memberikan peningkatan kinerja yang sangat besar saat merender aplikasi intensif data yang kompleks.

Mari kita perhatikan contoh umum dalam mengambil data dari API dan menampilkannya di browser.

Komponen React tradisional terlihat seperti ini:

import React, {useState, useEffect} from 'react'

export default function ClientSideReactPage() {
    const [todoList, setTodoList] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [errorMessage, setErrorMessage] = useState(null);

useEffect(()=>{
    const fetchToDoList = async ()=>{
        const response = await fetch('
        const data = await response.json();
        setTodoList(data);
        setIsLoading(false);
    }
    fetchToDoList();
},[]);
  return (
    <ul>{todoList.map(list=><li key={list?.id}>{list?.name}</li>)}</ul>
  )
}

Dalam pendekatan tradisional Anda memiliki keadaan yang Anda gunakan todoList. Lalu, Anda punya useEffect Digunakan untuk mendapatkan data. Setelah mendapatkan data, perbarui todoList menggunakan setTodoListyang menyebabkan komponen dirender ulang dan menampilkan daftar Anda todoList. Meskipun ini terlihat bagus, ini bukanlah cara terbaik lakukan itu.

Pertama, Anda perlu menjaga formulir Anda todoList, isLoading bendera, dan milikmu errorMessage. Maka Anda perlu melacaknya useEffect dan ketergantungannya, yang jika tidak ditangani dengan benar, akan mengakibatkan perenderan ulang yang berlebihan. Ini semua dilakukan setelah browser mengunduh bundel JS awal dan komponen dijalankan terlebih dahulu tanpa data apa pun. waktuSaat mendapatkan data, render ulang komponen menggunakan perintah berikut todoList. Ketika permasalahan menjadi kompleks, maka memerlukan banyak langkah dan memakan banyak waktu. Elemen Peningkatan jumlah atau jumlah komponen tersebut pada halaman web.

Sekarang, mari kita bandingkan ini dengan tampilan React Server Components.

export default async function ServerSideReactPage() {
  const todoList = await fetch(" =>
    res.json()
  );
  return (
    <ul>
      {todoList.map((list) => (
        <li key={list?.id}>{list?.name}</li>
      ))}
    </ul>
  );
}

Ketika membandingkan pendekatan RSC dengan pendekatan tradisional, kita dapat melihat bahwa kita tidak perlu mengelola keadaan atau menggunakan efek apa pun. HTML final dibuat dari data yang dikompilasi dan dikirim ke browser. Ini memerlukan lebih sedikit kode untuk mencapai fungsi yang sama dan lebih cepat karena tidak perlu mengunduh bundel JS terlebih dahulu dan tidak perlu melakukan banyak rendering ulang. RSC juga unggul dalam situasi di mana komputasi yang mahal diperlukan saat merender suatu komponen, fungsi-fungsi mahal ini tidak pernah menjangkau browser tetapi dijalankan di server (yang jauh lebih kuat daripada browser) dan mengembalikan Render HTML akhir ke browser.

sebagai kesimpulan

Secara keseluruhan, RSC adalah alat yang sangat kuat di React yang membantu meningkatkan kinerja, menyederhanakan pengembangan, dan juga berkontribusi pada SEO yang lebih baik. Penting bagi pengembang untuk mengenal fitur baru ini karena ini mewakili masa depan React.