Next.js هل لا يتم تحديث البيانات الوصفية؟ وهنا لماذا

تقوم بتحديث generateMetadata، وإعادة النشر، وسيظل العنوان أو الصورة القديمة تظهر عند مشاركة الرابط. فيما يلي كيفية معرفة ما إذا كانت طبقة تخزين مؤقت أو خطأ في التعليمات البرمجية.

مثال قابل للتكرار

يبدو هذا صحيحًا ولكنه سيستمر في عرض البيانات الوصفية القديمة بعد تغيير المحتوى:

export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());

  return {
    title: post.title,
    openGraph: {
      images: [post.image],
    },
  };
}

يتم تخزين المكالمة fetch هنا مؤقتًا بواسطة ذاكرة التخزين المؤقت لبيانات Next.js بشكل افتراضي. إذا تغير post.title أو post.image في CMS، فلن ترى هذه الوظيفة القيمة الجديدة حتى يتم إعادة التحقق من صحة ذاكرة التخزين المؤقت. مع عدم وجود استراتيجية واضحة، قد يعني ذلك أنه لن يتم ذلك حتى البناء الكامل التالي.

لماذا لا يتم تحديث البيانات الوصفية الخاصة بك

يتم تخزين الجلب الأساسي مؤقتًا

افتراضيًا، يتم تخزين fetch() بالداخل generateMetadata مؤقتًا إلى أجل غير مسمى في جهاز توجيه التطبيق. قم بالإصلاح عن طريق تعيين نافذة إعادة التحقق الصريحة:

const post = await fetch(url, { next: { revalidate: 60 } }).then(r => r.json());

أو قم بإلغاء الاشتراك في التخزين المؤقت بالكامل لهذا الطلب:

const post = await fetch(url, { cache: "no-store" }).then(r => r.json());

يتم إنشاء المسار بشكل ثابت

إذا كان المسار يستخدم generateStaticParams مع عدم تكوين إعادة التحقق، فسيتم دمج المسار بالكامل، بما في ذلك البيانات التعريفية، في وقت الإنشاء. تؤدي إضافة export const revalidate = 3600; على مستوى الصفحة إلى فرض التجديد الدوري.

تخدم ذاكرة التخزين المؤقت CDN أو الحافة HTML القديم

حتى لو كان الإصدار الخاص بك صحيحًا، يمكن لشبكة Vercel's Edge Network أو Cloudflare أو CDN أخرى أمام تطبيقك تقديم استجابة HTML مخبأة تسبق الإصلاح. التحقق من رؤوس الاستجابة:

curl -I https://yoursite.com/blog/post-slug

ابحث عن x-vercel-cache: HIT أو رأس CDN مشابه. يعني HIT أنك تنظر إلى نسخة مخبأة، وليس إلى أحدث عملية نشر.

opengraph-image.ts لا يلتقط بيانات جديدة

إذا كنت تستخدم اصطلاح opengraph-image.ts القائم على الملف، فإن Next.js يُنشئ صورة ثابتة في وقت الإنشاء بشكل افتراضي. يخضع المحتوى الديناميكي بداخله لنفس قواعد التخزين المؤقت كأي مكون خادم آخر، لذا قم بإضافة إعادة التحقق الصريحة إذا كان بحاجة إلى البقاء محدثًا.

إنها في الواقع ذاكرة التخزين المؤقت للنظام الأساسي، وليست ملكك

الإنذار الكاذب الأكثر شيوعاً. يمكن أن يقدم تطبيقك بيانات وصفية جديدة تمامًا بينما لا تزال Facebook أو LinkedIn أو Slack تعرض معاينة تم تخزينها مؤقتًا منذ أيام. قم بتأكيد ما يرسله خادمك قبل لمس أي رمز Next.js. راجع دليلنا لمسح ذاكرة التخزين المؤقت لـ OG على كل منصة.

دليل الإصلاح خطوة بخطوة

1. تشغيل curl -s https://yoursite.com/page | grep -i "og:" لمعرفة ما يرسله خادمك بالفعل
2. تحقق من وجود رأس CDN مخبأ HIT مع curl -I https://yoursite.com/page
3. أضف تحقق صريح أو ذاكرة تخزين مؤقت: "no-store" لجلب الداخل generateMetadata
4. فرض عملية نشر جديدة لاستبعاد ذاكرة التخزين المؤقت للإنشاء التي لا معنى لها
5. التحقق من النتيجة المباشرة مع Proovd

Next.js مقابل الأطر الأخرى

قائمة مراجعة الإصلاح السريع

الأسئلة المتداولة