Data Fetching في Next.js

أي موقع محتاج يجيب بيانات من مكان معين عشان يعرضها لليوزر البيانات دي ممكن تكون من API او Database أو ملف JSON متخزن عندك… هنا بقا بييجي دور ال Data Fetching اللي هو ببساطة إزاي الموقع بتاعك يتعامل مع البيانات ويجيبها ويعرضها.

هنتكلم سوا دلوقتي عن الـ Data Fetching Methods الأساسية في Next.js…

1. الطريقه الاولي: getStaticProps

export async function getStaticProps() {<br /> const res = await fetch('https://api.example.com/data');<br /> const data = await res.json();<br /> return {<br /> props: { data },<br /> };<br /> }

إمتى تستخدمها؟

لما يكون عندك بيانات بتتغير بسرعة أو محتاجة Authentication زي Dashboard أو صفحة Profile.

مثال عملي عشان يوضحلك الدنيا:

export async function getServerSideProps() {<br /> const res = await fetch('https://api.example.com/data');<br /> const data = await res.json();<br /> return {<br /> props: { data },<br /> };<br /> }

كل طلب جديد هيعمل Fetch للبيانات في الوقت نفسه.

3. الطريقه الثالثه: Incremental Static Regeneration (ISR) 

دي بقا مزيج بين الطريقتين اللي فاتوا تقدر تعمل صفحات ثابتة والبيانات تتحدث بشكل تلقائي كل فترة عادي

إمتى تستخدمها؟

لما تكون عايز تستفيد من سرعة الصفحات الثابتة مع تحديث البيانات باستمرار، زي مواقع الأخبار أو المنتجات.

مثال عملي عشان يوضحلك الدنيا:

export async function getStaticProps() {<br /> const res = await fetch('https://api.example.com/data');<br /> const data = await res.json();<br /> return {<br /> props: { data },<br /> revalidate: 60, // بيتحدث كل دقيقة<br /> };<br /> }

هنا الصفحة هتتحدث كل 60 ثانية لو في بيانات جديدة.

وبكده نكون خلصنا شرحنا عن الData Fetching . لو عندك سؤال أو استفسار، اكتب في الكومنتات.