عوائق جلب البيانات في Next.js: حل البيانات غير المحددة

يقدم Next.js عدة طرق لجلب البيانات من جانب الخادم، بما في ذلك getStaticProps وgetServerSideProps. ومع ذلك، فإن هذه الطرق مخصصة في المقام الأول لمكونات الصفحة داخل مجلد الصفحات. في Next.js 13، ظهر مفهوم جديد يعرف باسم مكونات الخادم، مما يسمح بجلب البيانات مباشرة داخل جسم المكون.

مكونات الخادم: حل شامل

توفر مكونات الخادم نهجًا أكثر مرونة لجلب البيانات، مما يمكّن المطورين من:

• جلب البيانات على الخادم مع خيار تخزين النتائج مؤقتًا، على غرار getStaticProps.
• جلب البيانات على كل طلب، على غرار getServerSideProps.
• حدد إستراتيجية إعادة التحقق المخصصة.

لاستخدام مكونات الخادم، حدد المكون الخاص بك باعتباره المكون الافتراضي تصدير ملف في دليل التطبيق. يمكن إجراء جلب البيانات داخل نص المكون باستخدام الطرق التالية:

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 } });
}

الأساليب البديلة

بالإضافة إلى مكونات الخادم، يمكنك أيضًا جلب البيانات باستخدام المكتبات أو التفاعل مباشرة مع قاعدة البيانات باستخدام ORM. في مثل هذه السيناريوهات، يمكنك الاستفادة من تكوين مقطع المسار:

// 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();
}

من خلال استخدام مكونات الخادم أو الطرق البديلة، يمكنك جلب البيانات بكفاءة على الخادم في Next.js، ومعالجة مشكلة البيانات غير المحددة التي تتم مواجهتها عند الاعتماد فقط على getStaticProps.