Next.js में डेटा फ़ेचिंग बाधा: अपरिभाषित डेटा को हल करना

Next.js सर्वर-साइड डेटा फ़ेचिंग के लिए कई तरीके प्रदान करता है, जिसमें getStaticProps और getServerSideProps शामिल हैं। हालाँकि, ये विधियाँ मुख्य रूप से पेज फ़ोल्डर के भीतर पेज घटकों के लिए हैं। नेक्स्ट.जेएस 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 } });
}

वैकल्पिक दृष्टिकोण

सर्वर घटकों के अलावा, आप पुस्तकालयों का उपयोग करके भी डेटा प्राप्त कर सकते हैं या ओआरएम का उपयोग करके डेटाबेस के साथ सीधे इंटरैक्ट कर सकते हैं। ऐसे परिदृश्यों में, आप रूट सेगमेंट कॉन्फ़िगरेशन का लाभ उठा सकते हैं:

// 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 पर निर्भर होने पर आने वाले अपरिभाषित डेटा की समस्या का समाधान कर सकते हैं।