Menguasai SSG dalam Next.js: Cara Meningkatkan SEO dan Pengalaman Pengguna

SSG (Penjanaan Tapak Statik) ialah kaedah dalam Next.js yang serupa dengan ISR (Penjanaan Semula Statik Inkremental), tetapi ia berjalan hanya pada masa binaan. Setelah tapak dibina, SSG tidak memaparkan halaman sekali lagi sehingga binaan seterusnya. Dalam artikel ini, saya akan menyelami cara SSG berfungsi dalam Next.js, cara ia meningkatkan SEO dan cara ia meningkatkan pengalaman pengguna.

Apa itu SSG?

SSG ialah kaedah dalam Next.js yang berjalan pada pelayan semasa proses binaan. Ia menjana halaman statik bersama-sama dengan CSS, JavaScript dan sumber yang berkaitan, menggabungkan segala-galanya untuk pengalaman statik yang lengkap.

Bagaimana SSG Berfungsi?

Untuk menggunakan SSG dalam projek anda, anda perlu mengeksport kaedah getStaticProps dalam halaman yang anda mahu gunakan SSG. Jika anda menggunakan penghala apl, SSG berjalan secara lalai apabila anda membina projek anda. Walau bagaimanapun, jika anda menggunakan penghala halaman, anda mesti menambah getStaticProps secara manual.

Kaedah ini mencipta halaman statik yang digabungkan, jadi apabila pengguna atau perangkak meminta halaman yang SSG dilaksanakan, Next.js menghantar halaman yang disediakan sepenuhnya dengan semua sumbernya. Ini menghapuskan keperluan untuk memuatkan aset tambahan, meminimumkan kelewatan, yang bagus untuk SEO dan pengalaman pengguna.

Untuk laluan dinamik, seperti halaman butiran blog yang menggunakan slug atau ID, anda memerlukan kaedah lain untuk mengambil data untuk halaman tersebut. Kaedah ini ialah getStaticPaths, yang dijalankan sebelum getStaticProps semasa masa binaan.

Cara Melaksanakan SSG dalam Penghala Apl

SSG dilaksanakan secara lalai dalam Penghala Aplikasi Next.js apabila anda membina projek anda. Semua halaman anda akan digabungkan dan dicache dalam CDN, jadi tidak perlu menambah langkah tambahan untuk laluan statik.

Walau bagaimanapun, untuk laluan dinamik, seperti yang menggunakan slug atau ID, Next.js tidak boleh mengambilnya secara automatik pada masa binaan. Anda perlu mendapatkan senarai ini daripada API atau beberapa sumber lain dalam projek anda. Di sinilah fungsi generateStaticParams masuk. Ia membolehkan anda mengambil senarai slug atau ID untuk laluan dinamik dan mengembalikannya, jadi Next.js boleh menjana halaman statik untuk setiap satu. Perkara penting yang perlu diingat ialah generateStaticParams mesti digunakan dalam komponen pelayan, bukan komponen klien.

ini adalah contoh pelaksanaan dalam fail tsx :

ini ialah contoh pelaksanaan dalam fail jsx :

Cara Melaksanakan SSG dalam Penghala Halaman

Untuk melaksanakan SSG dalam Penghala Halaman, anda perlu mencipta fungsi getStaticProps dan mengeksportnya daripada halaman yang anda mahu melaksanakan SSG. Fungsi ini akan dipanggil secara automatik apabila membina projek.

Jika anda mempunyai laluan dinamik, anda perlu mencipta fungsi lain dan mengeksportnya. Fungsi ini, seperti yang saya nyatakan sebelum ini, dipanggil sebelum getStaticProps, dan anda mesti mengambil data anda daripada API atau mendapatkan senarai ID atau slug daripada fail.

ini adalah contoh pelaksanaan dalam fail tsx :

ini ialah contoh pelaksanaan dalam fail jsx :

Kesimpulan

SSG ialah kaedah yang berguna untuk menghimpun dan mencipta halaman statik. Jika anda ingin memperbaik tapak web anda untuk SEO dan pengalaman pengguna, anda dinasihatkan untuk menggunakan SSG, ISR atau SSR.

Dalam blog ini, saya menulis tentang SSG. Saya juga mempunyai artikel lain tentang ISR yang tersedia di alamat ini: Menguasai ISR ​​dalam Next.js. Saya akan menulis satu lagi artikel mengenai SSR nanti. Sila berasa bebas untuk meninggalkan komen jika anda mempunyai sebarang soalan; Saya di sini untuk membantu. Blog ini mungkin akan dikemas kini kemudian kerana saya ingin berkongsi ilmu yang terbaik dengan anda.

Terima kasih kerana membaca! Jika anda ingin membaca lebih banyak artikel, anda boleh mengikuti laman web saya: Saeed Niyabati. Saya harap anda menikmatinya. Selamat tinggal sekarang!

Atas ialah kandungan terperinci Menguasai SSG dalam Next.js: Cara Meningkatkan SEO dan Pengalaman Pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!