ניתוב מראש ב-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. פותחים את כלי הפיתוח ל-Chrome.
2. לוחצים על הכרטיסייה רשת.
3. מסמנים את תיבת הסימון השבתת המטמון.
4. טוענים מחדש את הדף.

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

איך פועל אחזור מראש אוטומטי

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

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

הימנעות מאחזור מראש מיותר

כדי להימנע מהורדה של תוכן מיותר, אפשר להשבית את האחזור מראש של דפים שביקרו בהם לעיתים רחוקות. לשם כך, מגדירים את המאפיין 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 לא:

טעינה מראש עם ניתוב מותאם אישית

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

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

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

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

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

סיכום

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