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.
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.
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 tagMenggunakan 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.
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.