Bagaimanakah saya boleh Mengambil Data dengan Cekap dalam Next.js 13 untuk Mengelak Data Tidak Ditakrifkan?

Halangan Pengambilan Data dalam Next.js: Menyelesaikan Data Tidak Ditakrifkan

Next.js menawarkan beberapa kaedah untuk pengambilan data sebelah pelayan, termasuk getStaticProps dan getServerSideProps. Walau bagaimanapun, kaedah ini bertujuan terutamanya untuk komponen halaman dalam folder halaman. Dalam Next.js 13, konsep baharu yang dikenali sebagai Komponen Pelayan muncul, membenarkan pengambilan data terus dalam badan komponen.

Komponen Pelayan: Penyelesaian Komprehensif

Komponen Pelayan menyediakan pendekatan yang lebih fleksibel kepada pengambilan data, membolehkan pembangun untuk:

• Ambil data pada pelayan dengan pilihan untuk cache keputusan, serupa dengan getStaticProps.
• Ambil data pada setiap permintaan, serupa dengan getServerSideProps.
• Nyatakan strategi pengesahan semula tersuai.

Untuk menggunakan Komponen Pelayan, tentukan komponen anda sebagai eksport lalai fail dalam direktori apl. Pengambilan data boleh dilakukan dalam badan komponen menggunakan kaedah berikut:

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

Pendekatan Alternatif

Selain Komponen Pelayan, anda juga boleh mengambil data menggunakan perpustakaan atau berinteraksi secara langsung dengan pangkalan data menggunakan ORM. Dalam senario sedemikian, anda boleh memanfaatkan Konfigurasi Segmen Laluan:

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

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

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

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

Dengan menggunakan Komponen Pelayan atau pendekatan alternatif, anda boleh mengambil data pada pelayan dengan cekap dalam Next.js, menangani isu data tidak ditentukan yang dihadapi apabila bergantung hanya pada getStaticProps.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Mengambil Data dengan Cekap dalam Next.js 13 untuk Mengelak Data Tidak Ditakrifkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!