מדריך Next.js 13 | בניית Cache חדש לפי דרישה (On-Demand Revalidation)
בגרסה האחרונה של Next.js, גרסה 13, נוספה תכונה חדשה בשם “בניית Cache חדש לפי דרישה” או בעברית “On-Demand Revalidation”.
זו תכונה שמאפשרת לך לשדרג דפים בצורה דינמית בהתאם לדרישות המשתמשים. תהליך זה יכול לשפר את ביצועי האתר ולהפחית את עלות השרתים.
איך זה עובד?
כאשר משתמש מבקש לטעון דף מסוים, השרת מבצע בדיקה כדי לראות האם יש שינויים בנתונים. אם אין שינויים, השרת ימסור את הדף מהמטמון ולא ינגיש לשרתים שירות חדש.
אם יש שינויים, השרת יעביר את הבקשה לשירותים הגרפיים וישלח מחדש את הנתונים.
באמצעות התכונה החדשה שנוספה ל-Next.js 13, אפשר להגדיר איזה דפים ישמשו כדפים בהם נרצה לבצע איתור וניתוח מחדש של השרתים.
איך להוסיף את זה לפרויקט שלנו?
כדי להוסיף את התכונה החדשה לפרויקט שלך, עליך להוסיף את המילה revalidate לפונקציה המייצגת את הדף בקובץ של הדף הרלוונטי.
למשל, אם רוצים להפעיל את התכונה על דף הבית, נוסיף את המשתנה revalidate לפונקציה שייצג את דף הבית.
ניתן להוסיף את הפרמטר ״revalidate״ גם לפונקציית העיבוד החצונית (getStaticProps) למעקב אחר הנתונים שלך.
מקורות
בעמוד הרשמי של Next.js ניתן למצוא את ההוראות המפורטות והדוקומנטציה על התכונה החדשה של בניית Cache חדש לפי דרישה (On-Demand Revalidation).
מסביר ממש טוב. אלוף👏
למה revalidate נמצאת בתיקיית pages? כל הקומפוננטות שהן pages אמורות להיות בתיקיית pages לא?
היי, עשיתי בדיוק כמוך בסרטון וה- revalidate באמת עובד אבל אחרי ה alert כשאני מועבר חזרה לעמוד posts (בעזרת push) מופיע לי ה cache הקודם של העמוד ורק אחרי שאני עושה refresh בדפדפן אני מקבל את ה cache החדש