ניתוב מראש ב-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. כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).

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

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

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

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

כשמטענים את index.js, בכרטיסייה Network מוצג שהקובץ margherita.js הורד גם הוא:

איך פועל האחזור המוקדם האוטומטי

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

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

הימנעות משימוש מיותר בהאצה מראש

כדי להימנע מהורדת תוכן מיותר, אפשר להשבית את השליפה מראש (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, בכרטיסייה Network של DevTools מוצג שהקובץ margherita.js הועלה, אבל הקובץ pineapple-pizza.js לא הועלה:

אחזור מראש באמצעות ניתוב מותאם אישית

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

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

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

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

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

כשלוחצים על הקישור, הניתוב מתבצע ב-handleClick. ההודעה תתחבר למסוף, וה-method 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, בכרטיסייה Network מוצג שהקובץ margherita.js הורדה והקובץ pineapple-pizza.js לא הורדה:

כשלוחצים על אחד מהקישורים, במסוף מתועדת ההודעה "Having fun with Next.js" (כיף לעבוד עם Next.js) והמערכת עוברת לנתיב החדש:

סיכום

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