נתונה קומפוננטת ריאקט:

function ItemData() {
    const { id } = useParams();
    const { data, error, isLoading } = useSWR('/api/user', fetcher);

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error</p>;

    return <ItemView item={data} />
}

הקומפוננטה לוקחת את הפרמטר id מהגדרות הנתיב, פונה לשרת כדי למשוך את המידע על הפריט ואז מציגה את המידע ב ItemView. התצוגה בקומפוננטה נפרדת כדי שאפשר יהיה לבדוק אותה בלי קשר למשיכת המידע וגם זה יותר נוח לתחזק ככה את הקוד, אבל למה לפנות לשרת רק אחרי שהקומפוננטה מתרנדרת כדי למשוך את המידע?

1. תשובה 1 - כי זה הכי מהיר

פניה שניה לשרת? מה פתאום, פניתי לשרת רק פעם אחת. ה HTML וה JavaScript שמגיעים ללקוח נשלחים מ CDN ולא מהשרת שלי. רק אחרי טעינת העמוד המערכת פונה לשרת שלי כדי למשוך את כל המידע הרלוונטי ולהציג את העמוד.

מה אפשר לעשות אחרת? האמת שטוב ששאלת. אם רשימת הפריטים ידועה מראש אפשר היה לבנות ב Offline עמודי HTML שונים עבור כל id ולשמור את הכל ב CDN, וכך הדפדפן היה יכול להציג את המידע הכי מהר - מיד איך שהוא מקבל את העמוד אפילו בלי להריץ קוד ריאקט. תכל'ס נקסט יודע לעשות את זה אוטומטית.

אם הרשימה דינמית אפשר להשתמש ב Server Components כדי למשוך את כל המידע מבסיס הנתונים לפני ששולחים את העמוד ללקוח וכך לצמצם קריאות. באצת יהיה מעניין לבדוק מבחינת ביצועים איזה גישה נותנת תוצאות טובות יותר.

2. תשובה 2 - כי זה לא היה מספיק חשוב

פניה שניה לשרת? נו בסדר יש לי עוד 5 מאיפה שזאת באה. למי אכפת כמה פניות לשרת אתה שולח בשביל להציג את התוכן? אני שומר ב DB סטטיסטיקה שמראה של 95% מהלקוחות העמוד נטען תוך פחות משניה וזה כל מה שחשוב. כל עוד אנחנו לא חורגים מתקציב הביצועים שלנו עדיף להתמקד בפיצ'רים ולא באופטימיזציות.

3. תשובה 3 - כי זה מה שהיה כתוב בתיעוד

כל מי שכותב ריאקט יודע ש react-query ו swr הן הדרך הכי טובה למשוך מידע מהשרת. מה רצית שאכתוב useEffect שם? חוץ מזה הכל עובד אז לא נוגעים.

תשובה טובה ל"למה בנית את זה ככה" צריכה לפתוח דיון. צריכה לחשוף עוד אופציות ואת מערך השיקולים שהוביל לבחירה בדרך מסוימת. אם אין לכם עדיין תשובה טובה זה אולי זמן טוב להתחיל לחפש.