Use Cache In Nextjs

من مشكلة أداء إلى موقع أسرع بمرتين!

كنت شغال على مشروع بـ Next.js والموقع كان بيجيب بيانات من API خارجي.
كل حاجة كانت تمام في البداية، لحد ما عدد المستخدمين زاد… والموقع بدأ يبطّأ جدًا 😩
كل مرة كان بيعمل fetch لنفس البيانات بدون داعي!

بدأت أدور على حل يخلي الأداء أسرع من غير ما أغير في الكود كله.
لحد ما اكتشفت ميزة اسمها 'use cache' في Next.js ⚡

💡 الفكرة ببساطة:

'use cache' بتقول لـ Next.js:

“النتيجة اللي راجعة من الـ function أو الـ route مش بتتغير كتير، فخزنها مؤقتًا في الكاش عشان لما أطلبها تاني، ترجعلي فورًا من غير ما أعمل fetch تاني.”

🧠 إزاي استخدمتها:

1️⃣ أول حاجة فعلت الكاش في ملف الإعدادات:

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
cacheComponents: true,
}

export default nextConfig

2️⃣ بعد كده استخدمتها جوه Route Handler بالشكل ده:

'use cache'

export async function GET() {
const data = await fetch('https://api.example.com/posts')
return Response.json(data)
}

ولما البيانات تتغير، بعمل revalidation باستخدام:

revalidateTag('TagName')

⚙️ النتيجة؟

الموقع بقى أسرع بوضوح 💨

استجابة السيرفر قلت جدًا

والأداء العام اتحسّن بدون ما أغير الكود الأساسي 🔥

🧭 الدرس اللي اتعلمته:

أحيانًا الحل مش إنك تكتب كود جديد،
لكن إنك تفكر في تحسين اللي عندك.

Nextjs #WebDevelopment #Performance #Caching #LearningByDoing #Frontend