Pengantar Navigasi di NextJS

Dalam bagian tutorial ini, kita akan berbicara tentang cara kerja tautan di NextJS.

Pertama-tama, mari kita bahas apa yang spesial dari tautan. Mari kita lihat mereka dalam berbagai pendekatan pembuatan website.

Situs dengan React

Misalkan Anda memiliki situs dengan React. Seperti diketahui, React adalah SPA - situs di mana pengguna selalu berada pada satu halaman. Anda dapat menghubungkan React Router dan pengguna akan mengira bahwa mereka berpindah ke halaman yang berbeda, padahal secara fisik tetap berada pada satu file.

Sementara itu, pengguna akan mengklik tautan, mereka akan merasa seperti masuk ke halaman lain, tetapi halaman situs di browser tidak akan dimuat ulang - React secara dinamis akan membentuk apa yang dilihat pengguna di layar.

Dalam skema seperti ini, pengguna mendapatkan tata letak situs saat pertama kali masuk ke halaman, dan kemudian bagian situs hanya berubah melalui JavaScript. Sementara itu, situs dapat meminta data dari server melalui AJAX.

Pendekatan ini mengurangi beban pada hosting (sumber dayanya yang menghabiskan uang kita), serta beban pada saluran internet pengguna.

Tapi pendekatan ini memiliki kelemahan - masalah dengan SEO. Seolah-olah situs memiliki serangkaian tautan, dan di bilah alamat sesuatu berubah, dan Anda bahkan dapat membagikan tautan ke halaman tertentu situs melalui messenger. Namun, konten halaman dibentuk secara dinamis di sisi klien dan mesin pencari tidak dapat memprosesnya. Oleh karena itu, situs seperti itu tidak akan dapat dipromosikan.

Namun, tidak semua situs dimaksudkan untuk dipromosikan di mesin pencari. Dan jika situs Anda tidak dimaksudkan untuk itu, maka skema ini cukup bekerja untuk Anda.

Situs dengan Backend

Misalkan situs Anda dibuat dengan salah satu bahasa backend. Misalnya, dengan PHP.

Dalam hal ini, ketika pengguna mengklik tautan, halaman situs akan dimuat sepenuhnya setiap kali.

Masalahnya adalah, sebagian besar halaman sudah ada pada pengguna. Seperti yang sudah Anda ketahui, pada halaman biasanya hanya konten dan metadata yang berubah, sedangkan sisanya tetap tidak berubah.

Mengapa kita harus mengunduh sisanya, jika yang berubah hanya konten? Ini menciptakan peningkatan beban pada server dan saluran internet.

Ada masalah lain. Misalkan pada halaman, yang kita dapatkan, di dalam konten terdapat daftar produk, seperti di toko online. Jelas, setiap produk memiliki markup yang sama. Akan lebih optimal jika mengunduh hanya data produk, dan template untuk menampilkan produk. Kemudian di sisi klien menampilkan setiap produk dalam template ini. Tapi kita mengunduh produk bersama dengan markup berulang dari produk tersebut.

Kesimpulannya, jika kita memiliki situs dengan backend murni, kita mengirim banyak data berlebih melalui jaringan.

Namun, dalam hal ini kita tidak memiliki masalah dengan SEO. Untuk URL yang diminta, selalu dikembalikan konten statis yang dipahami oleh mesin pencari.

Situs dengan NextJS

NextJS mengombinasikan kedua pendekatan. Ketika pengguna mengetik URL langsung ke bilah alamat, maka sebagai respons, mereka mendapatkan konten statis dari halaman tersebut.

Namun, ketika pengguna mulai mengklik tautan di situs kami, halaman situs tidak dimuat ulang sepenuhnya, melainkan melalui AJAX dimuat data yang dibutuhkan pengguna.

Ketika mesin pencari menjelajahi situs kami, mereka melihat konten statis yang mereka butuhkan. Dan ketika pengguna menjelajahi situs kami, situs kami mulai berperilaku seperti SPA.

Dan, yang terpenting, NextJS melakukan semua ini secara otomatis! Kita tidak perlu mengkhawatirkannya - dia akan melakukan semuanya sendiri. Indahnya!

Dalam pelajaran berikutnya, kita akan membahas bagaimana membuat NextJS bekerja seperti yang dijelaskan di atas.