שלדונון ב-Next.js: טעינה חכמה וחוויית משתמש חלקה
כאשר יש מידע איטי, לא משאירים את המשתמש לבד מול דף קפוא! בואו נלמד איך להשתמש ב־Loading.tsx, סטרימינג חכם ו-Suspense כדי לייצר חווית טעינה חלקה ואלגנטית ב-Next.js.
היום נדבר על חוית המשתמש בזמן שיש נתונים שנטענים לאט - סדרת הNext. 😍 דרגת קושי 5/10. 😌 כאשר יש נתונים שנטענים לאט - לדוגמא 5 שניות תמימות עד שהדף הקשיש מושך מידע מ18 מקורות שונים. מה שהמשתמש יראה בSsr (בהפשטה: קומפוננט שיוצר html בזמן ריצה) הוא את הדף הקודם למשך 5 שניות גורליות שבהם הוא יהרהר האם הלחיצה שלו בכלל עבדה, על מהות החיים, והאם להיות או לא להיות. 😪 רע! 😬 הפיתרון הוא דף Loading.tsx שבו נשים סקלטון - שלדון - שלדונון או מה שלא יהיה התרגום העברי של זה כי שלד פשוט נשמע גרוע. במשך ה5 שניות הלקוח עכשיו יראה - את loading.tsx.
אבל איך זה עובד? 😎
הNext משתמש מאחורי הקלעים בStreaming שמחלק את האתר לצ'אנקים (חתכות) ושולח כל פעם את החלק שמוכן. 🙄
איך?
בעזרת Suspense המובנה של React (למי שמכיר) - הloading נכנס בעצם לfallback עד שהצ'אנק האיטי יגיע. 😤 מה שאומר בעצם שאם יש רק חלק אחד פצפון בדף שהוא הבעייתי האיטי והנחשל - אנחנו נעדיף לעטוף רק אותו בSuspense באופן ידני ולא את כל הדף - כדי לקבל חוית משתמש יותר עליזה וחלקה. 🤠 כמובן שנצטרך ליצור בעצמנו שלדונון רק לקומפוננטה האיטית כדי שהטעינה תהיה חלקה ללא קפיצות, ולהכניס אותה ידנית לfallback. הגיוני? 😚
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם