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 או edge משרת את ה-HTML הישן

גם אם המבנה שלך נכון, רשת Edge של Vercel, 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. הוסף מטמון revalidate או : "no-store" לאחזורים בתוך generateMetadata
4. כפה על פריסה חדשה כדי לשלול מטמון בנייה מיושן
5. אמת את התוצאה החיה עם Proovd

Next.js לעומת מסגרות אחרות

רשימת רשימת תיקון מהירה

שאלות נפוצות