حل مشكلة Next.js API Fetching مرتين

ممكن تكون بتدفع فلوس أكتر في السيرفرات و الـ APIs من غير ما تاخد بالك، والسبب مش دايمًا في البنية التحتية… أحيانًا المشكلة بتكون في طريقة كتابة الكود نفسه.
في مشاريع Next.js فيه مشكلة مشهورة جدًا بتخلي الموقع يطلب البيانات من الـ API مرتين بدل مرة واحدة، حتى لو إنت كاتبها مرة واحدة بس 😅
وده معناه:

• ضغط زيادة على السيرفر
• بطء في الأداء
• تكلفة أعلى على الاستضافة و الـ APIs

---

المشكلة الأساسية في Next.js: ليه الـ API بيتنادى مرتين؟ 🧠​

في سببين أساسيين بيخلوك تشوف سلوك غريب زي ده:

1) React Strict Mode (الفخ الخفي ⚠️)​

في بيئة التطوير (Development)، React بيشغل بعض الأكواد مرتين عمدًا.
ليه ؟ عشان يتأكد إن مفيش مشاكل في الـ side effects.
📌 النتيجة:

• نفس الـ API Request يتنفذ مرتين
• بس ده بيحصل في الـ Development فقط

💡 مهم جدًا: في الإنتاج (Production) غالبًا المشكلة دي بتختفي.

2) غياب الـ Caching (أكبر سبب فعلي 💾)​

هنا المشكلة الحقيقية اللي بتكلفك فلوس:
لو إنت مش محدد:

• البيانات تتخزن إمتى (Cache)
• وتتحدث إمتى (Revalidate)

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

• Requests زيادة
• استهلاك API أعلى
• فاتورة سيرفر أعلى

---

إزاي المشكلة دي بتأثر على مشروعك فعليًا؟ 📉​

لو عندك موقع عليه آلاف الزوار:

• كل زيارة = طلب API إضافي
• كل صفحة = Request جديد
• النتيجة = تضاعف الضغط بدون داعي

💸 يعني ببساطة:
إنت ممكن تكون بتدفع ضعف أو أكتر من اللي المفروض تدفعه.

---

الحل الحقيقي: التحكم في الـ Data Fetching في Next.js 🛠️​

1) استخدام Caching بشكل صحيح​

في Next.js App Router تقدر تتحكم في الكاش كده:

const res = await fetch("https://api.example.com/data", {
  next: { revalidate: 60 }
});

📌 معناها:

• البيانات تتحدث كل 60 ثانية
• وفي باقي الوقت يتم استخدام الكاش

2) استخدام Static Fetching لما ينفع​

لو البيانات مش بتتغير كتير:

const res = await fetch("https://api.example.com/data", {
  cache: "force-cache"
});

📌 ده بيقلل عدد الـ requests بشكل كبير جدًا.

3) استخدام Dynamic Fetching بحذر​

const res = await fetch("https://api.example.com/data", {
  cache: "no-store"
});

📌 ده بيخلي كل طلب يروح للسيرفر مباشرة
⚠️ استخدمه بس لما تكون محتاج بيانات لحظية.

---

إزاي تبني مشروع Next.js ذكي وموفر؟ 💡​

الشغل الصح مش بس إن الموقع يشتغل… لكن إنك تخليه:

🚀 Performance أعلى​

• تحميل أسرع
• Requests أقل
• تجربة مستخدم أفضل

💰 Cost Optimization​

• تقليل استهلاك APIs
• تقليل الضغط على السيرفر
• توفير في الفواتير

🧱 Scalability​

• الموقع يقدر يستحمل زيارات أكبر
• بدون انهيار أو بطء

---

أشهر الأخطاء اللي بتخلي المشكلة أسوأ ❌​

• نسيان تفعيل caching
• استخدام no-store في كل حاجة
• تجاهل React Strict Mode أثناء التطوير
• تكرار fetch داخل components بدون داعي
• عدم استخدام server components بشكل صحيح

---

مثال عملي بسيط يوضح الفرق ⚖️​

❌ كود غير محسّن​

useEffect(() => {
  fetch("/api/data").then(res => res.json());
}, []);

📌 ممكن يتكرر أو يسبب requests زيادة حسب الحالة

✅ كود محسّن​

const res = await fetch("/api/data", {
  next: { revalidate: 120 }
});

📌 هنا:

• Request أقل
• أداء أفضل
• تكلفة أقل

---

الخلاصة 💡​

مشكلة تكرار الـ API Requests في Next.js مش “bug” كبير…
لكنها سوء استخدام للكود والكاش.
لو فهمت:

• Strict Mode بيعمل إيه
• وازاي الكاش بيشتغل

هتقدر توفر: فلوس 💸 وقت ⚡ ومجهود كبير في تحسين الأداء

---

سؤال مهم ليك 👇​

هل سبق ولاحظت إن فاتورة السيرفر أو الـ APIs عندك بتزيد بدون سبب واضح؟
غالبًا السبب مش في السيرفر نفسه… لكن في طريقة كتابة الكود 😉