שמרו על חלקי הלקוח קטנים

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

כשעמוד זקוק לכפתור אינטראקטיבי אחד, יש קיצור דרך מפתה: להוסיף 'use client' בראש העמוד ולהמשיך הלאה. זה עובד. זו גם הדרך הנפוצה ביותר לוותר על כל מה ש-Next.js נתנה לך.

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

ההרגל שמתקן את זה הוא קטן ומכני:

העבר את 'use client' כלפי מטה אל העלים.

חלצו את החלק האינטראקטיבי לקובץ קטן משלו, סמנו את הקובץ הזה, והשאירו את הדף בשרת:

// app/page.jsx - עדיין רכיב שרת
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

שני דברים שכדאי לשים לב אליהם. ראשית, רכיב שרת יכול לרנדר רכיב לקוח: הכיוון הזה רגיל לחלוטין. שנית, צורת הדף לא השתנתה; רק חלק קטן אחד זז.

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

אתגר

קל

בדף הזה יש onClick על כפתור בתוך רכיב שרת, ולכן האפליקציה לא תוצג כלל.

תקן את זה בלי לסמן את הדף כרכיב לקוח:

ב־components/LikeButton.jsx, כתוב רכיב לקוח ('use client' בשורה 1) שמחזיק את מספר הלייקים במצב ומציג כפתור עם id="like". הטקסט שלו חייב להיות Likes: ואחריו המספר.
ב־app/page.jsx, מחק את הכפתור התקול והצג במקומו את <LikeButton />. ייבא אותו מתוך '../components/LikeButton'.
השאר את הכותרת ואת שורת התיאור בדיוק כפי שהן: הדף חייב להישאר רכיב שרת.

נסו בעצמכם

import './globals.css';

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

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