שני סוגי רכיבים

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

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

רכיבי שרת: ברירת המחדל

• הם פועלים פעם אחת, בשרת, לפני שליחת הדף
• הם יכולים להיות async, כך שהם יכולים לבצע await לנתונים ישירות בתוך הרכיב
• הם לא שולחים JavaScript לדפדפן: המשתמש מוריד את התוצאה, לא את הקוד

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

רכיבי לקוח: בחירה להצטרף

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

'use client';

כך הקובץ מסומן כרכיב לקוח, ורק רכיבי לקוח יכולים להשתמש ב:

• Hooks: useState, useEffect ועוד
• מטפלי אירועים: onClick, onChange, …
• ממשקי API של הדפדפן: window, localStorage

שימו לב לוויתור. רכיב שרת מהיר ושקט, אבל קפוא. רכיב לקוח חי, אבל צריך להוריד את הקוד שלו ולהריץ אותו בדפדפן.

לכן השאלה שתשאלו מעכשיו על כל רכיב היא לא "איזה מהם אני אוהב?" אלא "האם החלק המסוים הזה צריך להגיב למשתמש?" אם התשובה היא לא (וכך בדרך כלל), השאירו אותו בשרת.