שרת בתוך לקוח

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 21 מתוך 47.

הנה הכלל שכמעט כולם טועים בו, והוא זה שקובע עד כמה אפשר להעמיס על השרת.

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

רכיב לקוח יכול להציג תוכן שרת שמועבר אליו בתור children.

ההבדל הוא מי מבצע את הרינדור. כשדף שרת כותב את זה:

<Panel>
    <Details />
</Panel>

…השרת מרנדר את <Details /> ומעביר את התוצאה המוגמרת אל Panel כ־prop. Panel אף פעם לא מייבא אותו ולא מריץ אותו: הוא רק מחליט היכן למקם אותו. מבחינת רכיב הלקוח, children הוא חלק ממשק משתמש שכבר הושלם.

כך מעטפת אינטראקטיבית קטנה (רצועת לשוניות, חלונית מודאלית, לוח מתקפל) יכולה לעטוף כמויות גדולות של תוכן שזמין רק בשרת, בלי להעביר אותו לדפדפן. החלק האינטראקטיבי נשאר קטן; התוכן נשאר בשרת.

הצורה שכדאי לזכור: מעטפות בצד הלקוח, מילויים בצד השרת.

אתגר

בינוני

components/Panel.jsx הוא רכיב לקוח (נעול, קרא אותו): הוא מציג כפתור החלפה ומציג את children שלו רק כשהוא פתוח.

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

ב־app/page.jsx, העבר את <p id="details"> כך שיופיע בין תגיות <Panel> בתור התוכן של הרכיב.
השאר את הטקסט בדיוק כפי שהוא, והשאר את app/page.jsx כרכיב שרת: ללא הנחיה.

הפסקה עדיין מוצגת בשרת. רכיב הלקוח של הלוח רק קובע אם להציג אותה.

נסו בעצמכם

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}