כותרות Cache-Control

בכל פעם שהדפדפן שלכם טוען משאב, הוא שואל את אותה שאלה: האם כבר יש לי את זה?

אם כן — הוא יכול לדלג לגמרי על הרשת: אין חביון, אין רוחב פס, תגובה מיידית. אם לא — הוא מחכה. ההבדל בין טעינת דף של 100 מילישניות לבין טעינה של 3 שניות תלוי לעיתים קרובות בכמה טוב עניתם לשאלה הזו מראש.

Cache-Control הוא הדרך שבה עונים עליה.

הרעיון המרכזי

מטמון הוא הימור על זמן. כשאתם מגדירים max-age=3600, אתם אומרים: "תגובה זו תישאר נכונה בשעה הקרובה. סמכו עליה." כשאתם מגדירים max-age=31536000, אתם אומרים: "זה יהיה נכון למשך שנה."

כל ערך max-age הוא הימור: כמה זמן האמת הזו תישאר אמת?

תצדקו — והאפליקציה שלכם תרגיש מיידית. תטעו — ומשתמשים יראו נתונים ישנים. או גרוע מכך — תבזבזו רוחב פס בטעינה מחדש של תוכן שלא השתנה.

התחביר

Cache-Control מופיע בתגובות HTTP (ולעיתים בבקשות). כמה דירקטיבות מצטרפות בפסיקים:

Cache-Control: public, max-age=86400, immutable

כל דירקטיבה עונה על שאלה שונה לגבי אופן המטמון.

מי יכול לשמור במטמון? (public לעומת private)

public: כל אחד יכול לשמור במטמון — דפדפנים, CDNs, פרוקסי ארגוניים, ספק האינטרנט שלכם.

Cache-Control: public, max-age=86400

השתמשו עבור תוכן שזהה לכל המשתמשים: תמונות, גיליונות סגנון, JavaScript, גופנים.

private: רק דפדפן המשתמש הסופי יכול לשמור במטמון. מטמונים משותפים אינם רשאים לאחסן זאת.

Cache-Control: private, max-age=3600

השתמשו עבור תוכן ייחודי למשתמש: לוחות מחוונים, עמודי חשבון, תגובות API מותאמות אישית.

ההבחנה חשובה לאבטחה. CDN שמאחסן את הנתונים האישיים של המשתמש שלכם ומגיש אותם למישהו אחר — זו פרצת אבטחה. private מונע זאת.

כמה זמן? (max-age ו-s-maxage)

max-age מגדיר את משך הרעננות בשניות:

Cache-Control: max-age=3600

ערכים נפוצים:

• 60 — דקה אחת (תוכן המשתנה במהירות)
• 3600 — שעה אחת (דינמי במידה בינונית)
• 86400 — יום אחד (עדכונים יומיים)
• 604800 — שבוע אחד
• 31536000 — שנה אחת (נכסים סטטיים עם גרסאות)

s-maxage דורס את max-age עבור מטמונים משותפים בלבד:

Cache-Control: max-age=60, s-maxage=3600

דפדפנים מאחסנים למשך דקה; CDNs מאחסנים למשך שעה. שימושי כשרוצים יעילות CDN אבל רעננות בדפדפן.

הדירקטיבות עם השמות המבלבלים

no-cache לא אומר "אל תאחסן במטמון." זה אומר "אחסן, אבל בדוק איתי לפני שאתה משתמש."

Cache-Control: no-cache

המטמון שומר את התגובה אך מאמת מול השרת לפני הגשתה. אם לא השתנה, השרת משיב "304 Not Modified" והמטמון מגיש את העותק שלו. אם השתנה, מגיע תוכן טרי.

זה מעניק לכם ערבויות רעננות תוך כדי הנאה ממטמון כשלא קרה שינוי.

no-store אומר באמת אל תאחסן:

Cache-Control: no-store

שום דבר לא נשמר. כל בקשה מגיעה ישירות לשרת המקור. השתמשו עבור נתונים רגישים: עסקאות בנקאיות, רשומות רפואיות, סיסמאות.

דירקטיבות אימות מחדש

must-revalidate: ברגע שמשהו מיושן, יש לאמת מחדש תמיד. אל תגישו תוכן ישן גם אם השרת אינו נגיש.

Cache-Control: max-age=3600, must-revalidate

ללא זה, חלק מהמטמונים עלולים להגיש תוכן ישן כשלא ניתן להגיע לשרת המקור. עם זה, הם מחזירים שגיאה במקום.

immutable: תוכן זה לעולם לא ישתנה. אין צורך לאמת מחדש, לעולם.

Cache-Control: max-age=31536000, immutable

מושלם לנכסים עם גרסאות כמו app.v2.4.1.js. שם הקובץ משתנה כשהתוכן משתנה, ולכן ה-URL משמש בפועל ככתובת תוכן. דפדפנים יכולים לדלג על אימות מחדש לחלוטין, אפילו בעת רענון.

כיצד עובד האימות

כאשר תוכן מאוחסן הופך לישן, הדפדפן שואל: "האם זה עדיין תקין?"

שני מנגנונים מייעלים את התהליך הזה:

ETags הם חותמות תוכן:

# תגובה
ETag: "a1b2c3d4"
Cache-Control: max-age=3600

# בקשת אימות מחדש
If-None-Match: "a1b2c3d4"

# אם לא השתנה: 304 Not Modified (ללא גוף)
# אם השתנה: 200 OK עם תוכן חדש ו-ETag חדש

Last-Modified משתמש בחותמות זמן:

# תגובה
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

# בקשת אימות מחדש
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

ETags מדויקים יותר — הם יכולים להתבסס על גיבוב התוכן. Last-Modified בעל רזולוציה של שנייה אחת בלבד ואינו מסוגל לזהות שינויים שמתרחשים תוך פחות משנייה.

אסטרטגיות מעשיות

נכסים סטטיים עם גרסאות

Cache-Control: public, max-age=31536000, immutable

שם קובץ: styles.a8f3b2.css

ניתן לאחסן ללא הגבלת זמן. כשהתוכן משתנה, שם הקובץ משתנה, והדפדפן טוען את ה-URL החדש. זה הסטנדרט הזהב לנכסים סטטיים.

מסמכי HTML

Cache-Control: no-cache

HTML מפנה למשאבים אחרים. אם מאוחסן יותר מדי זמן, משתמשים עלולים לראות HTML ישן המצביע לנכסים ישנים. דרשו אימות כדי להבטיח רעננות.

תגובות API

עבור נתונים שיכולים לסבול עיכוב קצר:

Cache-Control: private, max-age=300

מטמון של חמש דקות מפחית משמעותית את עומס השרת.

עבור נתונים בזמן אמת:

Cache-Control: no-cache

עבור נתונים רגישים:

Cache-Control: no-store

תמונות שהועלו על ידי משתמשים

Cache-Control: public, max-age=604800

מטמון של שבוע עובד היטב עבור תוכן שמשתנה לעיתים נדירות.

טעויות נפוצות

אחסון תגובות שגיאה במטמון: שגיאת 500 מאוחסנת לשעה פירושה שעה שלמה של חוויה שבורה. שגיאות צריכות להשתמש ב-no-store.

שימוש ב-public לתוכן ייחודי למשתמש: הדבר עלול לגרום לדליפת נתונים פרטיים דרך מטמונים משותפים. תמיד השתמשו ב-private לתגובות מותאמות אישית.

מחשבה ש-no-cache מונע מטמון: זה לא. זה דורש אימות. לאי-אחסון במטמון, השתמשו ב-no-store.

ללא Cache-Control כלל: ללא כותרות מפורשות, התנהגות המטמון משתנה בצורה בלתי צפויה בדפדפנים ובפרוקסי שונים. תמיד היו מפורשים.

ניפוי באגים

בכלי הפיתוח של הדפדפן (לשונית Network), עמודת הגודל חושפת את מצב המטמון:

• מספר כמו "45.2 KB": נטען מהרשת
• "(disk cache)": הוגש מהדיסק
• "(memory cache)": הוגש מהזיכרון

לחצו על כל בקשה כדי לבדוק את כותרות Cache-Control שלה.

תיבת הסימון "Disable cache" עוקפת את המטמון בזמן פיתוח — שימושית לבדיקת שינויים מבלי לנקות את המטמון שלכם.

שאלות נפוצות על כותרות Cache-Control

מה ההבדל בין no-cache ל-no-store?

no-cache מאפשר מטמון אבל דורש אימות לפני כל שימוש — המטמון שואל "האם זה עדיין תקין?" לפני הגשה. no-store מונע מטמון לחלוטין. השתמשו ב-no-cache כשרוצים יעילות עם ערבויות רעננות. השתמשו ב-no-store עבור נתונים רגישים שלא צריכים להישמר לעולם.

כיצד אני גורם לדפדפנים לטעון גרסה חדשה של קובץ מאוחסן?

שנו את ה-URL. הגישה האמינה ביותר היא שמות קבצים עם גרסאות: app.v2.js הופך ל-app.v3.js. לחלופין, השתמשו במחרוזות שאילתה: app.js?v=2 הופך ל-app.js?v=3. המטמון מתייחס ל-URLs שונים כמשאבים שונים.

האם להשתמש ב-max-age=0 או ב-no-cache?

הם דומים אך לא זהים. max-age=0 מסמן תוכן כמיושן מיידית, ומחייב אימות מחדש. no-cache דורש אימות ללא קשר לרעננות. בפועל, שניהם מאלצים אימות מחדש, אך no-cache מפורש יותר לגבי הכוונה.

מה קורה כשכותרות Cache-Control ו-Expires מתנגשות?

Cache-Control מנצח. כשניהם קיימים, max-age גובר על Expires. השתמשו ב-Expires רק לצורך תאימות עם לקוחות HTTP/1.0 עתיקים.

כיצד אני מאחסן תגובות API מאומתות בבטחה?

השתמשו ב-Cache-Control: private, max-age=N. הדירקטיבה private מבטיחה שרק דפדפן המשתמש הסופי מאחסן את התגובה — מטמונים משותפים כמו CDNs לא יאחסנו אותה. לעולם אל תשתמשו ב-public לתוכן מאומת.