Pengenalan kepada Rendering Sisi Pelayan (SSR) dengan Next.js

Perenderan sisi pelayan (SSR) ialah teknik yang digunakan dalam pembangunan web di mana kandungan HTML dijana pada pelayan dan bukannya dalam penyemak imbas. Ini meningkatkan masa muat awal, meningkatkan SEO dan menawarkan pengalaman pengguna yang lebih baik. Dalam artikel ini, kita akan menyelami SSR dan cara Next.js memudahkan proses menyediakannya.

Apakah itu Perenderan Sisi Pelayan (SSR)?
Penyampaian sebelah pelayan merujuk kepada proses penyampaian aplikasi JavaScript sebelah klien pada pelayan. Daripada pelanggan menunggu JavaScript untuk memuatkan dan memaparkan halaman, pelayan pra-memaparkan kandungan dan menghantar halaman yang diberikan sepenuhnya kepada penyemak imbas. Ini menghasilkan pemuatan halaman awal yang lebih pantas dan SEO yang dipertingkatkan kerana enjin carian boleh merangkak kandungan pra-diberikan dengan mudah.

Kenapa Guna SSR?

• SEO yang dipertingkatkan: Memandangkan bot enjin carian boleh membaca kandungan HTML dengan mudah, SSR memastikan kandungan itu boleh ditemui, membantu dalam kedudukan.
• Pemuatan Halaman Pertama yang Lebih Pantas: SSR boleh mengurangkan masa yang diambil untuk pengguna melihat sesuatu pada skrin dengan ketara, yang amat penting untuk prestasi.
• Pengalaman Pengguna yang Lebih Baik: Dengan memaparkan kandungan pada pelayan, pengguna mendapat halaman yang terisi penuh tanpa menunggu JavaScript mengambil dan memaparkan kandungan pada klien.

Bagaimana Next.js Memudahkan SSR
Next.js ialah rangka kerja berasaskan React yang membolehkan pelaksanaan SSR dengan mudah. Ia menyediakan beberapa ciri terbina dalam, seperti getServerSideProps, yang menjadikannya mudah untuk mengambil data dan memaparkannya pada pelayan sebelum menghantarnya kepada pelanggan.

Untuk mendayakan SSR dalam Next.js, anda hanya perlu mengeksport fungsi yang dipanggil getServerSideProps daripada komponen halaman. Fungsi ini berjalan pada pelayan untuk setiap permintaan, mengambil data yang diperlukan sebelum memaparkan halaman.

Contoh:

import React from 'react';

function Home({ data }) {
  return (
    <div>
      <h1>Welcome to SSR with Next.js</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default Home;

Dalam contoh ini, fungsi getServerSideProps mengambil data daripada API pada bahagian pelayan sebelum memaparkan halaman.

SSR lwn. Penjanaan Tapak Statik (SSG)
Next.js menyokong kedua-dua SSR dan Penjanaan Tapak Statik (SSG). Semasa SSR memaparkan halaman pada setiap permintaan, SSG membuat pra-memaparkan halaman pada masa binaan. Pilihan antara SSR dan SSG bergantung pada keperluan khusus permohonan anda:

• Gunakan SSR apabila kandungan kerap berubah atau perlu diperibadikan untuk setiap pengguna.

• Gunakan SSG apabila kandungannya statik dan boleh dijana pada masa binaan, menawarkan masa pemuatan yang lebih pantas.
  Bila Menggunakan SSR

• Kandungan dinamik yang kerap berubah berdasarkan data pengguna.

• Halaman berfokus SEO yang memerlukan enjin carian merangkak kandungan dengan berkesan.

• Pengalaman pengguna yang diperibadikan di mana data perlu diambil pada setiap permintaan.

Kesimpulan
Perenderan sisi pelayan dalam Next.js ialah alat yang berkuasa untuk meningkatkan prestasi, SEO dan pengalaman pengguna. Dengan memanfaatkan keupayaan SSR terbina dalam Next.js, anda boleh melaksanakan SSR dengan mudah untuk aplikasi React anda dengan konfigurasi minimum. Ia merupakan pilihan yang bagus untuk aplikasi yang kandungan mesti diambil secara dinamik dan dipaparkan pada setiap permintaan.

Atas ialah kandungan terperinci Pengenalan kepada Rendering Sisi Pelayan (SSR) dengan Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!