Daripada PreReact kepada React dan Next.js Perjalanan Melalui Perenderan Web dan Pengoptimuman Prestasi

Dalam artikel ini, kami akan meneroka asal usul React, apakah masalah yang diselesaikannya dan

mengapa Next.js dicipta. Walaupun diketahui secara meluas bahawa Next.js menawarkan SSR (perenderan bahagian pelayan), kami akan menyelami lebih mendalam apa sebenarnya SSR dan mengapa ia mungkin lebih baik daripada CSR (klien- pemaparan sisi) dalam kes tertentu.

Sejarah Ringkas: Sebelum React.js

Sebelum React.js mempopulerkan konsep CSR (penyelesaian sisi klien), kebanyakan aplikasi mengikuti model MPA (aplikasi berbilang halaman) tradisional. Dalam MPA, pelayan mengendalikan pemaparan HTML, satu proses yang akan kita lihat mempunyai kedua-dua kelebihan dan kelemahan.

Seperti yang kita lihat, memaparkan halaman adalah mudah. Anda menghantar permintaan kepada pelayan, ia mengambil sedikit masa untuk menyediakan HTML yang diperlukan, menghantarnya semula dan yay halaman dimuatkan.

Jadi, apa masalahnya? Pada peringkat ini, tidak ada satu pun. Malah, pendekatan ini kelihatan lebih cekap daripada cara React.js mengendalikan pemuatan halaman—sekurang-kurangnya pada mulanya. Namun, masalah timbul apabila pengguna mula berinteraksi dengan halaman. Mari kita jalani senario hipotetikal:

• Anda memasuki halaman.
• Anda log masuk (pelanggan -> pelayan (untuk pengesahan) -> DB (semak pengguna)) dan kembali. Tiada masalah di sini.
• Anda menavigasi ke, katakan, halaman siaran (pelanggan -> pelayan -> DB (dapatkan siaran)) dan kembali dengan data siaran. Tiada masalah di sini.
• Buat siaran baharu (klien -> pelayan (dengan siaran baharu) -> DB (tambah siaran baharu)) dan kembali dengan HTML baharu sepenuhnya. Di sinilah masalah timbul. Apabila anda menambah siaran baharu—atau membuat sebarang perubahan pada halaman—pelayan perlu memaparkan semula keseluruhan HTML dari awal. Ini mengakibatkan paparan semula halaman penuh, yang boleh menjadi tidak cekap. Paparan semula penuh ini berlaku pada bila-bila masa anda mengemas kini atau menukar apa-apa pada halaman.

itulah yang cuba dibetulkan oleh reaksi

Sekarang Masukkan React.js

Bagaimana React menyelesaikan masalah?

React memperkenalkan konsep revolusioner bagi pemaparan sisi pelanggan (CSR). Daripada memaparkan HTML pada pelayan, CSR memaparkannya pada penyemak imbas pelanggan.
Tetapi bagaimanakah ini berfungsi?, memandangkan apabila anda mula-mula memuatkan halaman, pelayan masih perlu menyediakan HTML?

Inilah yang berlaku: pelayan menghantar rangka HTML awal, tetapi ia tidak mengandungi kandungan sebenar. Sebaliknya, ia termasuk teg yang memaut ke kod JavaScript yang digabungkan. Apabila HTML dimuatkan—yang berlaku dengan cepat kerana kebanyakannya kosong—React mengambil alih, memberikan kandungan sebenar pada klien. Walau bagaimanapun, kandungannya tidak tersedia dengan serta-merta. React terlebih dahulu perlu membuat permintaan berasingan kepada pelayan untuk mengambil data yang diperlukan. Hanya selepas proses ini selesai anda akan melihat halaman penuh.

Seperti yang anda boleh lihat, ini sedikit lebih kompleks daripada pemaparan sisi pelayan tradisional (SSR) dalam aplikasi berbilang halaman (MPA). Malah, ia mungkin kelihatan lebih perlahan pada mulanya kerana ia memerlukan berbilang perjalanan pergi dan balik ke pelayan—mula-mula untuk rangka HTML, kemudian untuk fail JavaScript, dan akhirnya untuk data. Ini adalah salah satu pertukaran React yang diterima untuk keajaiban yang akan datang.

Sekarang, mari kembali ke langkah di mana penyemak imbas memuatkan JavaScript daripada tag dalam HTML awal. Apa yang sebenarnya dilakukan oleh React ialah membuat salinan maya DOM, yang dikenali sebagai DOM Maya (VDOM). React menggunakan VDOM ini untuk menjejaki perubahan dengan cekap. Daripada memaparkan semula keseluruhan halaman HTML daripada pelayan setiap kali sesuatu berubah, React menggunakan proses yang dipanggil rekonsiliasi.

Penyesuaian:

React membandingkan keadaan semasa DOM dengan rakan sejawatan mayanya untuk menentukan dengan tepat di mana perubahan berlaku. Ia kemudian hanya mengemas kini bahagian DOM yang telah berubah, bukannya memuatkan semula keseluruhan halaman.

Sekarang, itu hebat! React telah menyelesaikan masalah dengan membenarkan anda menjejaki perubahan dalam DOM dan hanya mengemas kini bahagian yang telah berubah—semua pada bahagian klien—tanpa perlu membuat beberapa perjalanan ke pelayan.

Walau bagaimanapun, penyelesaian ini disertakan dengan beberapa pertukaran:

1. Penggunaan sumber pihak pelanggan: Komputer pelanggan kini bertanggungjawab untuk memaparkan HTML, mencipta DOM Maya dan mengendalikan proses penyelarasan. Ini boleh memakan masa, terutamanya dengan struktur pokok yang besar.

2. Keterlihatan terhad untuk bot dan perangkak: Bot dan perangkak—seperti yang daripada Facebook, X (dahulunya Twitter) atau Instagram—mungkin mengalami kesukaran menghuraikan kandungan dalam aplikasi yang diberikan oleh pihak pelanggan tulen . Ini berlaku kerana bot ini biasanya tidak melaksanakan JavaScript, bermakna mereka hanya dapat melihat HTML awal yang dihantar oleh pelayan, yang selalunya kosong atau berpenduduk minimum. Ini boleh memberi kesan kepada SEO atau perkongsian media sosial jika kandungan sangat bergantung pada pemaparan sebelah pelanggan.

Cabaran utama di sini ialah mengimbangi interaktiviti bahagian pelanggan dan kecekapan bahagian pelayan. Katakan kita boleh kembali meminta pelayan memaparkan HTML awal (lengkap dengan data yang diperlukan) sambil masih memanfaatkan rekonsiliasi React dan ciri DOM maya untuk kemas kini pihak pelanggan. Dalam kes itu, kita akan mendapat yang terbaik dari kedua-dua dunia.

Kalaulah ada rangka kerja...

Sekarang Masukkan Seterusnya.js

Di sinilah Perenderan Sebelah Pelayan (SSR) dan rangka kerja seperti Next.js berperanan. Next.js membenarkan pembangun untuk memaparkan halaman pada pelayan terlebih dahulu, memastikan HTML awal termasuk semua data yang diperlukan pengguna, meningkatkan prestasi dan SEO. Selepas halaman yang diberikan pelayan awal ini dihantar kepada pelanggan, anda mendapat kandungan HTML penuh, tetapi halaman itu belum lagi interaktif—React belum dimuatkan. Setelah JavaScript dimuatkan, React menjalani proses penghidratan.

Penghidratan ialah apabila React mengambil alih HTML pra-diberikan pada sisi klien, membolehkan interaksi dan kemas kini yang lancar melalui proses Virtual DOM dan rekonsiliasi React .

Atas ialah kandungan terperinci Daripada PreReact kepada React dan Next.js Perjalanan Melalui Perenderan Web dan Pengoptimuman Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!