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

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

מיליקה מיהאג'ליג'ה

מה נלמד?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השליפה מראש (prefetch) מתבצעת בתוך ה-hook של useEffect. אם המאפיין prefetch ב-<MyLink> מוגדר ל-true, תתבצע שליפה מראש (prefetch) של הנתיב שצוין בנכס 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:

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

סיכום

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