פרק #57 Suspense From Scratch עם גל שלזינגר

בפרק הזה של מדברים פיתוח שצולם בהמולת כנס React Next, 

אירחנו את גל שלזינגר לשיחה טכנולוגית עמוקה על עתיד הרינדור והזרמת הנתונים ברשת.

גל,

מהנדס בחברת Vercel,

שיתף כי הוא אינו מגיע מעולמות הפרונטנד הטהורים, אלא מתמקד בפיתוח מוצרי ה-Compute וה-Deployment של החברה.

בעבודתו הוא עוסק ב-Runtime, קומפילציה, באנדלינג ואופן הרצת פונקציות בצד השרת.

למרות שאינו מגדיר את עצמו כמפתח פרונטנד "קלאסי", הוא בונה את הכלים המשמשים קהילה זו ובוחן את React בעיקר מהזווית של ה-Server-side.

אז על מה דיברנו?

1. המעבר מ-SPA ל-React Server Components (RSC): השיחה נפתחה בהסבר על האבולוציה מה-Single Page Application, שבו המשתמש מקבל HTML ריק וממתין להורדת JS ובקשות נתונים, מה שיוצר אפקט "Waterfall" המעכב את הצגת התוכן.

2. אתגר ה-Latency והמרחק הפיזי: גל הסביר כי בישראל אנו חווים חוויית אינטרנט מאתגרת עקב המרחק הפיזי מהשרתים (למשל בפרנקפורט או ארה"ב), מה שהופך כל בקשת נתונים בשרשרת ה-Waterfall ליקרה ואיטית משמעותית.

3. מבוא ל-HTTP Streaming: הוצג הקונספט של סטרימינג – טכנולוגיה ותיקה (כמו ב-TCP או ביוטיוב) המאפשרת לשלוח נתונים בחלקים מבלי לסגור את הבקשה. גל ציין כי בעבר עבודה עם טמפלייטים גרמה לנו לאבד את היכולת הזו, וכעת אנו מחזירים אותה לאינטרנט כדי לשפר ביצועים.

4. הפילוסופיה של Suspense: סספנס מאפשר למפתחים להגדיר מה "חשוב" (כמו תוכן הפוסט) ומה "פחות חשוב" (כמו תגובות). 

כך ניתן לשלוח את ה-Shell של העמוד מיד ולהזרים את השאר בהמשך, מה שמשפר את ה-Perceived Performance (הביצועים הנתפסים), בדומה לאופן בו טוקנים זורמים ב-ChatGPT.

5. מימוש Suspense From Scratch: גל תיאר כיצד ניתן לממש את המנגנון ללא פריימוורק.

6. מנגנון ה-Hydration וה-Runtime: למרות הרינדור בשרת, קיים Runtime מינימלי של ריאקט בדפדפן שאחראי על החלפת האלמנטים והפיכת הקומפוננטות לאינטראקטיביות. 

השימוש ב-use client הושווה להוספת תגית סקריפט מודרנית המגדירה היכן מתחילה האינטראקטיביות.

7. אחריות וסקיוריטי בעולם השרת: עם הכוח של רינדור בשרת מגיעה אחריות גדולה. גל הזכיר פרצות אבטחה חמורות שהתגלו לאחרונה (CVEs) המדגישות את הצורך בהבנה עמוקה של סביבת השרת ועדכון גרסאות.

8. טיפים מעשיים למפתחים: כעצה לסיום, גל ממליץ למפתחים המעוניינים לשלוט בטכנולוגיה לנסות לבנות פרויקטים בלי use client ככל הניתן כדי למתוח את גבולות ה-Server Components, ולנסות לממש מנגנונים אלו "רמה אחת מתחת" לפריימוורק כדי להבין באמת איך הם עובדים.