Bila hendak menggunakan SSR dan SSG dalam Next.js

SSR (Perenderan Sebelah Pelayan):

Berjalan pada setiap permintaan ke pelayan.
Setiap kali pengguna melawat halaman, pelayan mengambil data, memaparkan HTML dan menghantarnya kepada pelanggan.
Ini memastikan kandungan sentiasa segar, tetapi ia boleh menjadi lebih perlahan disebabkan oleh overhed pemprosesan sebelah pelayan.

Contoh Garis Masa untuk SSR:

Permintaan 1: Lawatan Pengguna A → Pelayan mengambil data, menjana halaman secara dinamik dan bertindak balas.

Permintaan 2: Lawatan Pengguna B → Pelayan mengambil data sekali lagi, menjana halaman secara dinamik dan bertindak balas.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG (Penjanaan Tapak Statik):

Berjalan pada masa binaan (apabila anda melaksanakan binaan seterusnya).
HTML dan data pra-diberikan dan disimpan sebagai fail statik. Fail ini disampaikan terus kepada pengguna, menjadikannya sangat pantas.

Pilihan: Jika anda menggunakan pengesahan semula, Next.js akan membina semula halaman di latar belakang selepas selang masa yang ditentukan, memastikan kandungan yang dikemas kini tersedia.
Contoh Garis Masa untuk SSG dengan pengesahan semula: 60:

Masa binaan: Halaman diprapaparkan dengan data yang tersedia pada masa binaan.

Permintaan 1 :(selepas binaan): Pengguna A melawat → HTML statik disediakan.

Penjanaan semula latar belakang (selepas 60 saat): Next.js mengambil data baharu dan menjana semula halaman.

Permintaan 2 : (selepas penjanaan semula): Lawatan Pengguna B → HTML statik yang dikemas kini disediakan.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR: Mengambil data baharu dan menjana halaman pada setiap permintaan.

SSG: Pra-memaparkan halaman sekali pada masa binaan (atau semasa selang pengesahan semula yang dijadualkan), dan menyajikan halaman pra-bina yang sama kepada semua pengguna sehingga ia dijana semula.

Gunakan SSR apabila:

Anda memerlukan kandungan masa nyata dan terkini (cth., papan pemuka, data khusus pengguna).
Kandungan kerap berubah dan tidak boleh dicache dengan berkesan.

Gunakan SSG apabila:

Kandungan tidak selalu berubah (cth., catatan blog, halaman pemasaran).
Kepantasan dan prestasi adalah kritikal.

Atas ialah kandungan terperinci Bila hendak menggunakan SSR dan SSG dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!