ניווט חלק ומהיר ב-Next.js: מסע קסום עם Link

חלק נוסף במסע של גיא בארץ התיכונה בממלכת next.js. 🤠 והפעם נציץ לניווט עם next.js. דרגת קושי: 4/10.

הניווט המסורתי ב React: 😎

כמו בפריימוורק שמתהדר בשמו single-page-application, בטעינה הראשונה יורדים ללקוח בוחטות של Js. ומכאן ואילך הניווט בין הדפים עם rrd הוא "מלאכותי" - כלומר ניווט בצד הלקוח, עם הקוד שכבר קיים אצל הלקוח ללא צורך בבקשה נוספת מהשרת. לכן, במקום להשתמש בתגית <a> הרגילה, משתמשים ב-<Link> של Rrd שמבצע את הקסמים שלו מאחורי הקלעים:

החסרונות ברורים: 😥

1. כמות גדולה של JavaScript יורדת בטעינה הראשונית. 2. שגיאה בדף אחד עלולה לחרב את האתר כולו.

ובידידנו Next: 😎

עושה code spliting אוטומטי. ובעברית - מפצל את הדפים לחלקים נפרדים שיורדים רק בעת שמבקשים את הדף (כמעט נכון).

אז אפשר להשתמש בתגית a? 😃

לא!

בעוד שתגית a עושה refresh לדף, אנחנו נעדיף שלא לטעון מחדש את הכל. מה שיכלול לדוגמא את הmeta והlayout הכללי שמכיל את הheader footer וכו' - אז הפתרון של next עם קומפוננטת Link היא למשוך רק את החלקים החדשים שנצרכים.

ומה שמגניב במיוחד הוא: 🤗

כדי למנוע כל פעם שנעבור לדף חדש את הזמן טעינה של הבקשה והתשובה מהשרת. כל פעם שרכיב Link של next.js נכנס לviewport = לתצוגה הנראית של המסך. next ברקע כבר מושך את הדף לדפדפן, כדי שכשהמשתמש ילחץ על הלינק הדף כבר יהיה אצלו כמעט במיידית. מגניב או מה?

לסיכום 🤩 הגישה ההיברידית של Next.js מאפשרת:

1. טעינה מהירה של הדף הראשוני. 2. ניווט חלק בין הדפים ללא רענון מלא. 3. טעינה מקדימה של דפים לחוויית משתמש משופרת. ובגדול המטרה של next בעולם היא לנסות לתת את הטוב מכל העולמות. האם זה עובד להם?