ניתוב מראש ב-Next.js

איך Next.js מזרז את הניווטים באמצעות אחזור מראש של נתיבים, ואיך להתאים אותו אישית.

Milica Mihajlija

מה תלמדו?

בפוסט הזה נסביר איך פועל הניתוב ב-Next.js, איך הוא מותאם למהירות ואיך להתאים אותו אישית לפי הצרכים שלכם.

הרכיב <Link>

ב-Next.js, אין צורך להגדיר ניתוב באופן ידני. ב-Next.js נעשה שימוש בניתוב מבוסס מערכת קבצים, שמאפשר ליצור רק קבצים ותיקיות בתוך הספרייה ./pages/:

כדי לקשר לדפים שונים, צריך להשתמש באופרטור <Link>, בדומה לאופן שבו להשתמש ברכיב <a> הישן והטוב:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

כשמשתמשים ברכיב <Link> לצורך ניווט, Next.js עושה שימוש מועט יותר עבורך. בדרך כלל, הורדה של דף מתבצעת כשלוחצים על קישור אליו, אבל Next.js מאחזר באופן אוטומטי את ה-JavaScript הנחוץ כדי לעבד את הדף.

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

באפליקציה לדוגמה שלמטה, הדף index.js מקשר אל margherita.js באמצעות <Link>:

אפשר להשתמש בכלי הפיתוח ל-Chrome כדי לוודא שמתבצעת שליפה מראש של margherita.js: 1. כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .

1. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.

2. לוחצים על הכרטיסייה רשתות.

3. מסמנים את התיבה Disable cache (השבתת מטמון).

4. לטעון מחדש את הדף.

כשטוענים את index.js, הכרטיסייה רשת מראה ש-margherita.js גם הורדו:

איך פועלת שליפה אוטומטית מראש (prefetch)

ב-Next.js מתבצע שליפה מראש בלבד של קישורים שמופיעים באזור התצוגה ומשתמשת בצומת Observer API כדי לזהות אותם. היא גם משביתה את השליפה מראש (prefetch) כשהחיבור לרשת איטי או כשלמשתמשים Save-Data מופעלת. על סמך הבדיקות האלה, Next.js מחדיר באופן דינמי תגי <link rel="preload"> כדי להוריד רכיבים עבור בניווטים הבאים.

Next.js רק מאחזר את קוד ה-JavaScript. הוא לא מפעיל אותו. כך אפשר מורידים תוכן נוסף שהדף שנשלף מראש עשוי לבקש, עד שתבקרו על הקישור.

זהירות: הדוגמאות לתקלה פועלות במצב ייצור, כי השליפה מראש (prefetch) תלויה בתנאי הגלישה והיא מופעלת רק בגרסאות build שעברו אופטימיזציה לסביבת הייצור. כדי לעבור למצב פיתוח, צריך לבדוק את README.md בדוגמאות של תקלה.

הערה: מכיוון ש-<link rel="preload"> מבקש משאבים עם עדיפות גבוהה, הדפדפן מצפה שייעשה בהם שימוש באופן מיידי, פעולה שגורמת לאזהרות במסוף. עדיפות האחזור תהיה זמינה ב-Chrome, וכך תאפשר ל-Next.js לציין עדיפות נמוכה יותר למשאבים שאינם נחוצים באופן מיידי ב-<link rel="preload" fetchpriority="low">.

נמנעים משליפה מראש (prefetch) מיותרת

כדי להימנע מהורדת תוכן מיותר, אפשר להשבית את השליפה מראש (prefetch) רק לעיתים רחוקות דפים שביקרו בהם על ידי הגדרת המאפיין prefetch ב-<Link> כ-false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

באפליקציה השנייה לדוגמה הזו, הדף index.js מכיל <Link> כדי pineapple-pizza.js עם prefetch מוגדר ל-false:

כדי לבדוק את הפעילות ברשת, פועלים לפי השלבים מהדוגמה הראשונה. מתי בטעינה של index.js, בכרטיסייה רשת של כלי פיתוח אפשר לראות ש-margherita.js ירד, אבל pineapple-pizza.js לא:

שליפה מראש (prefetch) באמצעות ניתוב בהתאמה אישית

הרכיב <Link> מתאים לרוב תרחישי השימוש, אבל אפשר גם ליצור לביצוע ניתוב. Next.js מאפשר לכם לעשות זאת בקלות ה-API של הנתב זמין ב-next/router. אם רוצים לבצע פעולה כלשהי (למשל, לשלוח טופס) לפני המעבר ניתן להגדיר זאת בקוד הניתוב המותאם אישית.

כשמשתמשים ברכיבים מותאמים אישית לניתוב, אפשר להוסיף גם אליהם שליפה מראש. כדי להטמיע שליפה מראש (prefetch) בקוד הניתוב, צריך להשתמש בשיטה prefetch מ useRouter.

כדאי לראות את components/MyLink.js באפליקציה הזו לדוגמה:

השליפה מראש (prefetch) מתבצעת תוכן מושך useEffect. אם המאפיין prefetch ב-<MyLink> מוגדר ל-true, המסלול שצוין המאפיין href מאוחזר מראש כשמתבצע רינדור של המאפיין <MyLink>:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

כשלוחצים על הקישור, הניתוב מתבצע ב-handleClick. הודעה מקבלת נרשם במסוף, והשיטה push מנווטת למסלול החדש צוין ב-href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

באפליקציה הזו לדוגמה, בדף index.js יש <MyLink> עד margherita.js וגם pineapple-pizza.js הנכס prefetch מוגדר כ-true ב-/margherita ואל false בתאריך /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

כשטוענים את index.js, הכרטיסייה רשת מראה ש-margherita.js הורד ו-pineapple-pizza.js לא:

כשלוחצים על אחד הקישורים, במסוף נרשמים ביומן "כיף עם Next.js". ומנווט למסלול החדש:

סיכום

כשמשתמשים ב-<Link>, Next.js מאחזר באופן אוטומטי את ה-JavaScript שדרוש כדי לעבד את הדף המקושר, וכך לעבור לדפים חדשים מהר יותר. אם אתם באמצעות ניתוב מותאם אישית, תוכלו להשתמש ב-API של הנתב Next.js כדי להטמיע. שאפשר לאחזר מראש. להימנע מהורדת תוכן שלא לצורך על ידי השבתה מראש לדפים שמגיעים אליהם לעיתים רחוקות.