היום נדבר על חוית המשתמש בזמן שיש נתונים שנטענים לאט - סדרת הNext. 😍 דרגת קושי 5/10. 😌 כאשר יש נתונים שנטענים לאט - לדוגמא 5 שניות תמימות עד שהדף הקשיש מושך מידע מ18 מקורות שונים. מה שהמשתמש יראה בSsr (בהפשטה: קומפוננט שיוצר html בזמן ריצה) הוא את הדף הקודם למשך 5 שניות גורליות שבהם הוא יהרהר האם הלחיצה שלו בכלל עבדה, על מהות החיים, והאם להיות או לא להיות. 😪 רע! 😬 הפיתרון הוא דף Loading.tsx שבו נשים סקלטון - שלדון - שלדונון או מה שלא יהיה התרגום העברי של זה כי שלד פשוט נשמע גרוע. במשך ה5 שניות הלקוח עכשיו יראה - את loading.tsx.

הNext משתמש מאחורי הקלעים בStreaming שמחלק את האתר לצ'אנקים (חתכות) ושולח כל פעם את החלק שמוכן. 🙄

בעזרת Suspense המובנה של React (למי שמכיר) - הloading נכנס בעצם לfallback עד שהצ'אנק האיטי יגיע. 😤 מה שאומר בעצם שאם יש רק חלק אחד פצפון בדף שהוא הבעייתי האיטי והנחשל - אנחנו נעדיף לעטוף רק אותו בSuspense באופן ידני ולא את כל הדף - כדי לקבל חוית משתמש יותר עליזה וחלקה. 🤠 כמובן שנצטרך ליצור בעצמנו שלדונון רק לקומפוננטה האיטית כדי שהטעינה תהיה חלקה ללא קפיצות, ולהכניס אותה ידנית לfallback. הגיוני? 😚