השורה 'use client'

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

'use client' נראה כמו מחרוזת מיותרת שמישהו שכח למחוק. היא לא: זו הנחיה, ויש לה שני כללים שכדאי לזכור, כי שניהם נוטים להכשיל אנשים.

כלל 1: היא חייבת להיות השורה הראשונה

לפני הייבואים. לפני הערות שחשובות. הדבר הראשון ביותר בקובץ:

'use client';

import { useState } from 'react';

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

כלל 2: הוא מסמן את הקובץ כולו

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

'use client';

function Row() { … }        // צד הלקוח
export default function Table() { … }   // גם צד הלקוח

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

אתגר

קל

בשורה 'use client' שבקובץ components/Counter.jsx יש בעיה: היא נמצאת במקום הלא נכון. האפליקציה ממילא נכשלת עם שגיאת hook.

העבר את 'use client'; כך שתהיה השורה הראשונה בקובץ components/Counter.jsx, מעל הייבוא.

שני הרכיבים בקובץ הזה, Counter והResetButton שהוא מרנדר, הופכים לרכיבי לקוח בזכות השורה היחידה הזאת. אין צורך בהנחיה שנייה, ולא כדאי להוסיף אחת.

נסו בעצמכם

import './globals.css';

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

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