Pengenalan kepada Navigasi dalam NextJS

Dalam bahagian buku teks ini, kita akan bercakap tentang cara pautan berfungsi dalam NextJS.

Sebagai permulaan, mari kita bincangkan apa yang istimewa tentang pautan. Mari kita lihat mereka dalam pelbagai pendekatan untuk mencipta laman web.

Laman Web React

Katakan anda mempunyai laman web yang dibina dengan React. Seperti yang diketahui, React ialah SPA - laman web di mana pengguna sentiasa kekal pada satu halaman. Anda boleh menyambungkan React Router dan pengguna akan berfikir bahawa mereka melayari halaman yang berbeza, walaupun secara fizikalnya kekal pada satu fail.

Pada masa yang sama, pengguna akan mengklik pautan, mereka akan merasakan seolah-olah mereka sampai kepada halaman lain, tetapi halaman laman web dalam pelayar tidak akan dimuat semula - React secara dinamik akan membentuk apa yang pengguna lihat pada skrin.

Dalam skim ini, pengguna mendapat layout laman web semasa pertama kali melawat halaman, dan kemudian bahagian laman web hanya berubah melalui JavaScript. Pada masa yang sama, laman web boleh meminta data dari pelayan melalui AJAX.

Pendekatan ini mengurangkan beban pada hosting (sumber yang memerlukan wang kita), dan juga beban pada saluran internet pengguna.

Tetapi pendekatan ini mempunyai kelemahan - masalah dengan SEO. Walaupun laman web mempunyai set pautan, dan dalam bar alamat sesuatu berubah, dan anda juga boleh menghantar pautan ke halaman tertentu laman web melalui pemesejan. Walau bagaimanapun, kandungan halaman dibentuk secara dinamik pada klien dan enjin carian tidak dapat memprosesnya. Oleh itu, laman web sedemikian tidak akan dipromosikan.

Namun, tidak semua laman web bertujuan untuk dipromosikan dalam enjin carian. Dan jika laman web anda tidak bertujuan, maka skim ini agak berfungsi untuk anda.

Laman Web Backend

Katakan laman web anda dibuat dengan salah satu bahasa backend. Contohnya, dengan PHP.

Dalam kes ini, apabila pengguna mengklik pautan, halaman laman web akan dimuat sepenuhnya setiap kali.

Masalahnya ialah sebahagian besar halaman sudah ada pada pengguna. Kerana, seperti yang anda sudah tahu, pada halaman biasanya hanya kandungan dan metadata yang berubah, manakala semua yang lain kekal tidak berubah.

Mengapa kita perlu memuat turun yang lain, jika hanya kandungan yang berubah? Ini mewujudkan peningkatan beban pada pelayan dan saluran internet.

Ada satu lagi masalah. Katakan pada halaman, yang kita terima, dalam kandungan terdapat senarai produk, seperti di kedai dalam talian. Jelas sekali, setiap produk mempunyai susun atur yang sama. Adalah lebih optimum untuk memuat turun hanya data produk, dan templat output produk. Dan kemudian pada klien, output setiap produk dalam templat ini. Tetapi kita memuat turun produk bersama susun atur produk yang berulang.

Kesimpulannya, jika kita mempunyai laman web backend tulen, kami menghantar banyak data yang tidak perlu melalui rangkaian.

Walau bagaimanapun, dalam kes ini kita tidak mempunyai masalah dengan SEO. Untuk URL yang diminta, kandungan statik sentiasa dihantar, yang difahami oleh enjin carian.

Laman Web NextJS

NextJS menggabungkan kedua-dua pendekatan. Apabila pengguna memasukkan URL terus ke dalam bar alamat, mereka menerima kandungan statik halaman sebagai balasan.

Apabila pengguna mula mengklik pautan di laman web kami, halaman laman web tidak dimuat semula sepenuhnya, sebaliknya melalui AJAX, data yang diperlukan oleh pengguna dimuatkan.

Apabila enjin carian melayari laman web kami, ia melihat kandungan statik yang diperlukan. Dan apabila pengguna melayari laman web kami, laman web kami mula berkelakuan seperti SPA.

Dan, yang paling penting, NextJS melakukan semua ini secara automatik! Kita tidak perlu mengambil berat tentangnya - ia akan melakukan semuanya sendiri. Cantik!

Dalam pelajaran seterusnya, kita akan memahami bagaimana untuk membuat NextJS berfungsi seperti yang diterangkan di atas.