Penghidratan Berperingkat dengan Penghidratan Terpilih

Penghidratan terpilih ialah ciri React 18 yang membolehkan React mula menghidratkan komponen sebaik sahaja kod JavaScriptnya tiba, tanpa menunggu JavaScript untuk seluruh halaman selesai dimuat turun. Setiap bahagian yang kodnya dipecahkan secara berasingan dihidratkan apabila himpunannya dimuatkan, bukannya semuanya serentak.

Sebelum React 18, penghidratan bersifat "semua atau tiada" — React perlu memuat turun semua JavaScript dan menghidratkan seluruh pokok sebelum mana-mana bahagian halaman menjadi interaktif. React 18 menghapuskan kekangan ini: bahagian pokok dihidratkan secara berasingan apabila kod dan datanya tersedia.

Jika pengguna mengklik atau berinteraksi dengan sempadan Suspense yang belum dihidratkan, React serta-merta mengutamakan penghidratan subpokok itu sebelum sebarang kerja penghidratan tertangguh yang lain. Ini bermakna perkara yang cuba digunakan oleh pengguna menjadi interaktif terlebih dahulu, walaupun perkara itu bukan yang pertama dalam urutan dokumen.

Menggabungkan React.lazy dengan import dinamik dan sempadan Suspense membolehkan penghidratan terpilih untuk komponen yang kodnya dipecahkan. Pelayar memuat turun himpunan JS utama terlebih dahulu dan menghidratkan rangka halaman dengan serta-merta. Setiap komponen yang dimuatkan secara malas dihidratkan apabila bahagiannya dimuat turun — secara berperingkat, apabila pelayar mengambilnya.

Hasilnya, kandungan di atas paparan menjadi interaktif sebelum JavaScript di bawah paparan sempat dimuat turun. Pengguna boleh berinteraksi dengan navigasi dan CTA bahagian utama sementara suapan komen dan komponen cadangan masih memuatkan bahagian JavaScriptnya.

Penghidratan terpilih mengurangkan Jumlah Masa Menyekat (TBT) — metrik utama untuk prestasi penghidratan. Dalam tab Performance Chrome DevTools, tugas panjang (tugas melebihi 50ms) diserlahkan dengan warna merah. Sebelum penghidratan terpilih, anda mungkin melihat satu tugas panjang selama 300ms untuk penghidratan penuh; selepas itu, anda akan melihat beberapa tugas kecil yang tersebar mengikut masa.

Corak anti yang menjejaskan penghidratan terpilih ialah mengimport semua komponen pada peringkat atas aplikasi anda: import Footer from './Footer'. Ini memaksa pelayar memuat turun, menghuraikan dan melaksanakan kod Footer sebelum sebarang penghidratan bermula. Gantikan import peringkat atas bagi komponen di bawah paparan dengan React.lazy dan import dinamik.

Gunakan const Footer = React.lazy(() => import('./Footer')) untuk komponen yang muncul di bawah paparan awal. Bungkus komponen tersebut dalam Suspense dengan kandungan sandaran yang ringkas. Pelayar akan mengurangkan keutamaan pengambilan himpunan Footer sehingga penghidratan bahagian atas paparan selesai, sekali gus meningkatkan TBT secara semula jadi.

Penstriman dan penghidratan terpilih saling melengkapi: penstriman menghantar bahagian HTML untuk meningkatkan FCP dan LCP, manakala penghidratan terpilih memproses bahagian JavaScript untuk meningkatkan TTI dan TBT. Bersama-sama, kedua-duanya menangani aspek prestasi "memaparkan kandungan dengan pantas" dan "menjadikannya interaktif dengan pantas".

Komponen Pelayan React membawa penghidratan terpilih lebih jauh: komponen pelayan tidak menghasilkan sebarang JavaScript untuk klien. Hanya komponen klien (ditandai dengan "use client") perlu dihidratkan. Ini mengurangkan jumlah JavaScript yang perlu dihidratkan, lalu menjadikan penghidratan terpilih lebih berkesan.

Corak praktikal: gunakan renderToPipeableStream untuk menstrim HTML, bungkus halaman dengan panggilan hydrateRoot pada akar halaman (bukannya createRoot) untuk mendayakan mod penghidratan, gunakan React.lazy untuk semua bahagian di bawah paparan dan bungkus setiap bahagian dalam sempadan Suspense. React mengendalikan selebihnya secara automatik.

Penghidratan terpilih membolehkan React menghidratkan subpokok komponen secara berperingkat apabila JavaScriptnya tiba, dan bukannya menunggu himpunan penuh. Interaksi pengguna mengutamakan penghidratan subpokok yang disasarkan. React.lazy dan import dinamik untuk kandungan di bawah paparan, yang digabungkan dengan sempadan Suspense, membolehkan corak berperingkat ini. Penghidratan terpilih dan SSR penstriman ialah teknik yang saling melengkapi, yang bersama-sama menangani prestasi penghantaran kandungan dan interaktiviti.