Memahami CSR dalam Next.js: Diterangkan Rendering Sisi Pelanggan

CSR (Penyampaian Sebelah Pelanggan) ialah kaedah untuk memaparkan halaman di sebelah pelanggan, bermakna ia tidak dijalankan pada pelayan. CSR pada asasnya adalah sama seperti SPA (Aplikasi Halaman Tunggal), jadi jika anda sudah biasa dengan apa itu SPA dan cara ia berfungsi, anda sudah memahami CSR. Tetapi jika anda tidak pasti apa itu SPA atau cara ia berfungsi, saya akan menerangkannya kepada anda di bawah.

Dalam artikel ini, saya akan menerangkan apa itu SPA dan cara ia berfungsi. Selepas itu, saya akan membandingkannya dengan CSR dalam Next.js dan menunjukkan kepada anda cara melaksanakan CSR dalam projek Next.js anda.

Apa itu SPA?

SPA (Aplikasi Halaman Tunggal) terdiri daripada satu halaman HTML yang menulis semula kandungan secara dinamik mengikut keperluan, bukannya memuatkan halaman HTML baharu untuk setiap interaksi.

Bagaimana MPA Berfungsi?

Sebelum memahami SPA, anda perlu tahu tentang MPA terlebih dahulu. Mari belajar mengenainya:

Sebelum SPA menjadi popular, tapak web dibina menggunakan pendekatan aplikasi berbilang halaman (MPA). Jadi bagaimana MPA berfungsi? Bayangkan anda, sebagai pembangun, ingin membuat tapak web dengan dua halaman: halaman utama ("/") dan halaman tentang ("/tentang"). Untuk membina ini menggunakan kaedah berbilang halaman, anda perlu mencipta dua fail HTML berasingan untuk setiap laluan: main.html untuk "/" dan about.html untuk "/about".

Dalam setiap fail HTML, anda perlu menulis kod HTML, CSS dan JavaScript khusus untuk halaman tersebut. Walau bagaimanapun, beberapa bahagian kod, seperti pengepala dan pengaki, adalah sama merentas kedua-dua halaman. Walaupun pengepala dan pengaki adalah sama, anda, sebagai pembangun, perlu mengulanginya dalam setiap fail HTML.

Apabila projek selesai dan digunakan pada pelayan, pelayan menghantar halaman HTML lengkap bersama semua sumber yang diminta kepada pengguna. Sebagai contoh, apabila pengguna melawat halaman utama untuk kali pertama, pelayan menghantar fail main.html sedia, dan pengguna boleh melihat kandungan itu serta-merta selepas menunggu sebentar. Kaedah ini bagus untuk SEO kerana apabila perangkak enjin carian melawati tapak web anda, ia dapat melihat semua kandungan dalam fail HTML, kerana ia dipaparkan sepenuhnya sebelum ini.

Walau bagaimanapun, apabila pengguna menavigasi ke halaman lain, seperti "/about", proses itu bermula semula. Pelayan menghantar fail about.html bersama-sama dengan semua sumbernya (CSS, JS, dll.). Pengguna perlu menunggu sekali lagi untuk halaman dimuatkan, dan jika sambungan internet mereka perlahan, menunggu lebih lama. Apa yang lebih tidak cekap ialah pengguna mesti memuat turun kod yang sama untuk pengepala dan pengaki sekali lagi, walaupun mereka tidak berubah. Pengulangan kod ini (seperti pengepala dan pengaki) adalah membazir dan tidak cekap dalam amalan pembangunan web hari ini.

Bagaimana SPA Berfungsi?

Sekarang anda memahami cara MPA (Aplikasi Berbilang Halaman) berfungsi, mari kita selami cara SPA berfungsi.

Disebabkan kelewatan dalam memuatkan halaman dengan setiap permintaan, pengulangan kod dan keperluan untuk membina semula keseluruhan DOM setiap kali, SPA telah diperkenalkan untuk menyelesaikan isu ini.

Bayangkan anda seorang pembangun yang mencipta tapak web dengan dua laluan: "/" dan "/about". Dalam rangka kerja SPA, anda hanya mempunyai satu fail HTML yang dipanggil index.html. Daripada membuat fail HTML yang berasingan untuk setiap laluan, anda membuat komponen untuk setiap halaman dan memuatkannya secara dinamik. Sebagai contoh, anda akan membuat tiga komponen—satu untuk setiap laluan dan mengimportnya ke dalam index.html anda.

Dalam SPA, anda juga boleh mengasingkan bahagian boleh guna semula tapak anda (seperti pengepala dan pengaki) ke dalam komponennya sendiri. Daripada menulis kod pengepala dan pengaki yang sama untuk setiap halaman, anda hanya mengimport komponen ini jika perlu, sama seperti cara fungsi berfungsi. Ini mengurangkan pengulangan dan menjadikan pembangunan lebih mudah.

Apabila projek SPA anda digunakan ke pelayan, pelayan tidak lagi memaparkan kandungan halaman tersebut. Sebaliknya, ia menyediakan fail index.html bersama-sama dengan berkas JavaScript yang mengandungi komponen anda. Rendering berlaku di sisi pelanggan, dalam penyemak imbas.

Apabila pengguna melawat tapak anda buat kali pertama, pelayan menghantar fail index.html bersama-sama dengan fail JavaScript yang diperlukan. Ini boleh menyebabkan masa menunggu yang lebih lama berbanding MPA, kerana keseluruhan DOM dibina selepas JavaScript dimuat turun sepenuhnya, dihuraikan dan dilaksanakan.

Walau bagaimanapun, setelah halaman awal dimuatkan, menavigasi antara halaman adalah lebih pantas dalam SPA. Contohnya, jika pengguna menavigasi dari / ke / tentang, penyemak imbas tidak perlu memuatkan semula keseluruhan halaman. Memandangkan elemen biasa seperti pengepala dan pengaki sudah dimuatkan, penyemak imbas hanya mengambil JavaScript untuk kandungan tertentu yang berubah (mis., kandungan halaman /tentang). DOM dikemas kini secara dinamik tanpa muat semula halaman penuh, menjadikan pengguna berasa seperti mereka berinteraksi dengan apl dan bukannya tapak web tradisional. Ini memberikan pengalaman yang lebih lancar dan lebih "seperti aplikasi".

Walau bagaimanapun, terdapat kelemahan kepada SPA, terutamanya apabila ia berkaitan dengan SEO. Memandangkan fail index.html awal mengandungi kandungan minimum (dengan kebanyakan data dimuatkan melalui JavaScript), perangkak enjin carian mungkin melihat halaman kosong dan mengalami kesukaran mengindeks kandungan. Inilah sebabnya mengapa SEO dalam SPA boleh mencabar berbanding dengan MPA tradisional.

Adakah CSR Sama dengan Kaedah SPA?

Ya, CSR (Penyebaran Sisi Pelanggan) ialah kaedah pemaparan, yang bermaksud proses menukar komponen kepada format yang boleh dipaparkan dalam penyemak imbas, membolehkan pengguna melihat halaman tersebut. Perkara utama yang perlu difahami ialah CSR berlaku sepenuhnya dalam penyemak imbas. Untuk kedua-dua React dan Next.js, CSR berfungsi dengan cara yang sama, tiada perbezaan antara kedua-duanya apabila ia berkaitan dengan pemaparan sebelah pelanggan.

Sebagai contoh, dalam CSR, apabila anda melawat tapak web buat kali pertama, pelayan menghantar fail index.html dengan kandungan minimum. Tetapi inilah tangkapannya—fail ini belum mempunyai kandungan penuh lagi. Kandungan sebenar dipaparkan dalam penyemak imbas selepas semua fail komponen yang diperlukan (JavaScript, CSS, dll.) telah dimuat turun. Kemudian, React membina pepohon DOM (Model Objek Dokumen), diikuti dengan mencipta DOM maya, yang seperti salinan ringan DOM sebenar.

Setelah DOM dan DOM maya disediakan, pengguna boleh melihat halaman tersebut. Proses pemaparan ini berlaku dalam penyemak imbas, menukar semua komponen kepada halaman yang boleh dipaparkan.

Kini, apabila pengguna menavigasi dari satu halaman ke halaman yang lain (katakan dari / ke /tentang), React membina DOM maya baharu untuk halaman baharu. Ia membandingkan DOM maya lama dengan yang baharu, mencari perbezaan dan menggunakan perubahan tersebut pada DOM sebenar. Proses membandingkan dan mengemas kini DOM ini berlaku dengan cekap, dan semuanya berlaku dalam penyemak imbas.

Jadi, secara ringkasnya, CSR berfungsi dengan cara yang sama dalam React dan Next.js. Paparan berlaku dalam penyemak imbas dan React mengendalikan kemas kini DOM dengan cekap menggunakan DOM maya, menjadikan pengalaman pengguna lancar dan pantas.

Bagaimana untuk Melaksanakan CSR dalam Next.js?

Jika anda menggunakan kaedah pihak klien seperti useEffect dalam komponen anda, dan bukannya kaedah sisi pelayan seperti getStaticProps atau getServerSideProps, halaman anda akan dipaparkan pada klien, mengikut kaedah CSR (Penyediaan Bahagian Pelanggan). Ini bermakna penyemak imbas mengendalikan pemaparan selepas HTML awal dimuatkan.

Selain itu, menggunakan perpustakaan seperti SWR atau TanStack Query juga mendayakan CSR, kerana perpustakaan ini mengendalikan pengambilan data dalam klien selepas halaman dimuatkan. Dengan cara ini, komponen anda dipaparkan dalam penyemak imbas dan sebarang kemas kini kepada data berlaku dengan lancar pada bahagian klien tanpa penglibatan bahagian pelayan.

Kesimpulan

CSR ialah kaedah untuk memaparkan projek kami dalam klien, dan ia pada asasnya sama dengan takrifan SPA (Single Page Application). React menggunakan CSR untuk pemaparan, dan ini adalah salah satu perbezaan utama antara MPA (Aplikasi Berbilang Halaman) dan SPA. Next.js juga menggunakan CSR kerana ia dibina pada React, tetapi untuk meningkatkan SEO dan meningkatkan pengalaman pengguna, Next.js telah menambahkan SSG, ISR dan SSR. Anda boleh membaca tentang SSR, ISR dan SSG. Jika anda ingin sentiasa dikemas kini dengan artikel terbaru saya, ikuti tapak web saya di https://saeed-niyabati.ir .Terima kasih kerana membaca! Selamat tinggal sekarang!

Atas ialah kandungan terperinci Memahami CSR dalam Next.js: Diterangkan Rendering Sisi Pelanggan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!