Bagaimana untuk Mengambil Sisi Pelayan Data dalam Next.js dengan Komponen Pelayan dan Selain itu?

Pengambilan Data Sisi Pelayan Next.js Menggunakan getStaticProps and Beyond

Isu:
Dalam Seterusnya Aplikasi .js menggunakan Rangka Kerja Django Rest, pengambilan data daripada REST API menghasilkan undefined nilai dan ralat masa jalan semasa memetakan data.

Penjelasan:
Kaedah Next.js seperti getStaticProps direka khusus untuk pengambilan data sebelah pelayan dan hanya berfungsi dengan berkesan dalam direktori halaman. Walau bagaimanapun, dalam versi terbaharu Next.js, data boleh diambil terus dalam komponen pelayan yang terletak di dalam direktori apl.

Penyelesaian:
Untuk menyelesaikan isu ini dan melaksanakan pelayan- pengambilan data sisi dalam Next.js terkini, pertimbangkan pilihan berikut:

Menggunakan Pelayan Komponen:

• Laksanakan pengambilan data sebelah pelayan dalam badan komponen, seperti yang dilihat dalam coretan kod.
• Pendekatan ini membolehkan akses terus kepada pengepala dan kuki untuk pengambilan data .

Menggunakan Konfigurasi Segmen Laluan (untuk Pangkalan Data Interaksi):

• Konfigurasikan segmen laluan ke cache data dengan jangka hayat yang diingini (cth., 10 saat) atau lumpuhkan caching sama sekali.
• Kaedah ini membolehkan fleksibiliti dalam pengambilan data dan strategi caching, termasuk interaksi langsung dengan pangkalan data menggunakan ORM.

Coretan Kod (Komponen Pelayan):

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

Coretan Kod (Konfigurasi Segmen Laluan):

// layout.js OR page.js OR route.js
export const revalidate = 10;

// ...
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

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

Dengan melaksanakan penyelesaian ini, anda boleh ambil data daripada pelayan dan kendalikan strategi caching dalam Next.js, walaupun semasa bekerja dengan komponen pelayan.

Atas ialah kandungan terperinci Bagaimana untuk Mengambil Sisi Pelayan Data dalam Next.js dengan Komponen Pelayan dan Selain itu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!