SSR Penstriman dari Pinggir

Apabila pelayan menstrim HTML, pelayar menerima dan memaparkan kandungan secara berperingkat dan bukannya menunggu dokumen lengkap. Ini bermakna pengguna boleh melihat dan berinteraksi dengan bahagian halaman yang kelihatan — pengepala, navigasi dan bahagian utama — sementara bahagian yang bergantung pada data dan lebih perlahan masih dimuatkan.

Menghantar bootstrapScripts kepada renderToReadableStream memberitahu React lokasi himpunan JS sisi klien. React memasukkan tag skrip pada penghujung strim supaya pelayar memuatkan himpunan itu dan memanggil hydrateRoot, lalu menjadikan halaman interaktif apabila setiap bahagian selesai distrimkan.

Penstriman React bergantung pada sempadan Suspense untuk membahagikan pepohon komponen kepada bahagian yang boleh distrimkan secara berasingan. Komponen di dalam sempadan Suspense yang sedang menunggu data (melalui Promise yang dilemparkan) distrimkan sebagai ruang letak terlebih dahulu, kemudian diselesaikan dan kandungan sebenar distrimkan selepas itu.

Panggilan balik onShellReady dicetuskan apabila shell HTML yang tidak ditangguhkan — segala-galanya di luar sempadan Suspense — sedia untuk distrimkan. Inilah masa yang tepat untuk menetapkan kod status HTTP dan pengepala tindak balas, kemudian memanggil pipe(res) atau mula membaca daripada ReadableStream.

Kod status dan pengepala HTTP mesti dihantar sebelum isi tindak balas bermula. Oleh sebab penstriman bermula dengan onShellReady, sebarang logik pengendalian ralat (menetapkan status 500 atau mengubah hala) mesti berlaku sebelum shell mula mengalir — sebaik sahaja penstriman bermula, kod status tidak lagi boleh diubah.

onShellError dicetuskan apabila ralat maut berlaku sebelum shell sedia — contohnya, ralat dalam komponen peringkat teratas di luar mana-mana sempadan Suspense. Dalam keadaan ini, shell tidak pernah distrimkan dan Anda harus memberikan respons dengan halaman ralat statik atau mengubah hala ke laluan ralat.

onError dicetuskan untuk ralat yang boleh dipulihkan dalam sempadan Suspense. React masih boleh menstrim seluruh halaman; sempadan yang mengalami ralat memaparkan antara muka pengguna sandaran ralatnya. Gunakan onError untuk pengelogan: tangkap ralat itu kepada platform pemerhatian Anda tanpa menghentikan strim.

Jika data sempadan Suspense mengambil masa terlalu lama, strimkan rangka juga dan biarkan sempadan itu dihidratkan pada klien. Laksanakan tamat masa: selepas 5 saat, panggil abort() pada strim jika sempadan itu belum diselesaikan, dan klien akan mendapatkan data itu sendiri melalui useEffect.

Persekitaran masa jalan Workers meneruskan ReadableStream secara terus sebagai badan Response. Infrastruktur Cloudflare memajukan setiap cebisan ke pelayar pengguna apabila React menghasilkannya, tanpa menyimpan keseluruhan dokumen dalam penimbal. Ini bermakna bait pertama HTML meninggalkan PoP pinggir dalam masa beberapa milisaat selepas permintaan tiba.

renderToReadableStream mengembalikan fungsi pengawal pembatalan. Jika permintaan dibatalkan (pengguna beralih dari halaman), memanggil abort() menghentikan React daripada meneruskan pemaparan dan pemprosesan data. Ini mengelakkan pengiraan yang dibazirkan untuk permintaan yatim dan memastikan penggunaan CPU Workers kekal terkawal.

Dengan penstriman di pinggir, rantaian penuh kependaman kelihatan begini: 5ms (permintaan ke PoP terdekat) + 2ms (permulaan sejuk Worker) + 8ms (pemaparan rangka) = 15ms hingga bait pertama. Pelayar pengguna memaparkan elemen LCP daripada rangka sementara bahagian halaman yang selebihnya terus distrim di latar belakang.

SSR penstriman dari pinggir menghantar HTML dalam cebisan, lalu meningkatkan FCP dan LCP dengan menghantar rangka serta-merta. Sempadan Suspense membahagikan pepohon kepada bahagian yang boleh distrim secara berasingan. onShellReady ialah isyarat untuk mula menyalurkan data — tetapkan kod status sebelum memanggilnya. onShellError mengendalikan kegagalan kritikal, onError mengendalikan kegagalan yang boleh dipulihkan, dan abort() mengelakkan kerja yang dibazirkan pada permintaan yang dibatalkan.