Apakah perbezaan antara Komponen Pelayan Bertindak balas (RSC) dan Rendering Sisi Pelayan (SSR)?
P粉588152636
P粉588152636 2024-01-16 11:09:44
0
1
628

Dengan kemunculan React 18, RSC dilahirkan. Saya tertanya-tanya bagaimana ia berbeza daripada SSR dalam NextJS.

P粉588152636
P粉588152636

membalas semua(1)
P粉378890106

Dalam kedua-dua kes, kod React Javascript dilaksanakan oleh Node.js (atau Deno, atau apa sahaja yang anda gunakan). Tetapi mereka menghasilkan perkara yang berbeza.

Perenderan sisi pelayan

Perenderan sisi pelayan ialah apabila React menggunakan kaedah ReactDom renderToString() dan menghantar rentetan HTML itu kepada klien, sama seperti mana-mana pelayan yang menghantar HTML statik.

Kemudian, biasanya melalui persediaan SSR, React dijalankan semula pada bahagian klien, berjalan pada HTML yang diberikan yang sama dan melakukan perkara seperti menyambungkan pengendali klik dan menambah interaktiviti. Ini memerlukan pelayan dan klien mempunyai data yang sama untuk diberikan. Ini dilakukan dengan mensirikan data pada pelayan ke dalam tag Menggunakan React pada kedua-dua pelayan dan pelanggan, beban halaman awal boleh menjadi SSR dan kemudian beban halaman seterusnya boleh menjadi bahagian pelanggan. Untuk pemuatan halaman awal, SSR jauh lebih pantas daripada pemaparan sisi klien, yang lebih pantas lagi setelah semua sumber Javascript dimuat turun. Next.js menguatkuasakan strategi ini secara lalai apabila anda menggunakan SSR.

Komponen pelayan

Komponen pelayan tidak dipaparkan sebagai rentetan HTML.

React "komponen" ialah fungsi atau kelas yang mengembalikan "elemen" React. "elemen" React ialah perwakilan objek bagi pokok yang akan diberikan. Dalam mod pengendalian biasa, ReactDOM mengambil objek elemen ini dan menjadikannya kepada DOM.

Komponen pelayan akan bertindak balas

elemen kembali kepada pelanggan. Pada pelayan, komponen menjalankan dan menjana elemen, yang dihantar kepada klien (pada asasnya sebagai JSON). Elemen ini kemudiannya dipaparkan pada pelanggan dan diletakkan ke dalam DOM.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan