Bagaimanakah anda Mengambil Sisi Pelayan Data dalam Next.js 13 dan Seterusnya?

Mengambil Sebelah Pelayan Data dalam Next.js

Mengambil Data Sebelah Pelayan dalam Next.js 13 dan Seterusnya

Dalam versi terbaru Next.js, kaedah "getStaticProps" dan "getServerSideProps" telah ditamatkan secara berperingkat, menyebabkan pembangun tertanya-tanya bagaimana untuk mengambil bahagian pelayan data dalam aplikasi Next.js moden.

Memperkenalkan Komponen Pelayan

Dengan Next.js 13 dan ke atas, pengenalan Komponen Pelayan menawarkan cara baharu untuk mengambil bahagian pelayan data. Tidak seperti komponen halaman tradisional, Komponen Pelayan boleh terus mengakses logik pengambilan data dalam badan komponen.

Contoh dalam Komponen Pelayan

Coretan kod berikut menggambarkan cara mengambil data bahagian pelayan dalam Komponen Pelayan:

export default async function Component() {
  // Fetch server-side data with caching options
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });

  return "...";
}

Segmen Laluan Konfigurasi

Selain Komponen Pelayan, Next.js menyediakan Konfigurasi Segmen Laluan. Ini membolehkan pembangun mengawal gelagat caching untuk laluan atau halaman tertentu, walaupun semasa pengambilan data sebelah pelayan.

Contoh dalam Konfigurasi Segmen Laluan

Contoh ini menunjukkan cara mengkonfigurasi cache khusus laluan menggunakan Konfigurasi Segmen Laluan:

// layout.js OR page.js OR route.js ??

export const revalidate = 10; // Revalidate every 10s
// ...

export default async function Page() {
  const posts = await getPosts();
  // ...
}

Atas ialah kandungan terperinci Bagaimanakah anda Mengambil Sisi Pelayan Data dalam Next.js 13 dan Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!