מה זה hydration בנקסט - מוסבר בפשטות¶
אם למדתם קצת Next.js, בטח נתקלתם במושג "hydration", ואם הייתם כמוני בהתחלה, כנראה שהתעלמתם ממנו כי הוא נשמע כמו משהו מסובך מתחום שאין לכם קשר אליו. זה חבל, כי hydration הוא בעצם רעיון פשוט מאוד, וגם, אם לא מבינים אותו, אחת השגיאות הכי מבלבלות בNext.js פשוט לא תהיה הגיונית.
נתחיל מהבעיה שnext.js פותר¶
בריאקט "רגיל", בלי נקסט, הדפדפן מקבל דף HTML כמעט ריק, וכל ה-DOM נבנה על ידי ג'אווהסקריפט אחרי שהוא נטען ורץ. Next.js, לעומת זאת, בדרך כלל מרנדר את הדף לHTML מלא כבר בשרת, ושולח לדפדפן HTML מוכן שכבר אפשר לראות מיד, בלי לחכות שהג'אווהסקריפט יטען וירוץ. זה טוב לביצועים ול-SEO.
אבל יש כאן בעיה - ה-HTML הזה, שהגיע מהשרת, הוא "מת". הוא נראה נכון, אבל שום כפתור בו לא באמת עובד, כי אין עדיין שום קוד ג'אווהסקריפט רץ שמקשיב ללחיצות. זה בדיוק הרגע שבו hydration נכנס לתמונה.
אז מה זה בעצם hydration¶
Hydration הוא התהליך שבו ריאקט, אחרי שקוד הג'אווהסקריפט נטען בדפדפן, "מתחבר" ל-HTML הסטטי שכבר קיים על המסך, ומחייה אותו - מוסיף את כל מאזיני האירועים, בונה את ה-state הפנימי, והופך אותו מתמונה סטטית לאפליקציה אינטראקטיבית אמיתית. השם עצמו מגיע מהמטאפורה - HTML היבש שהגיע מהשרת "מקבל מים" והופך לחי.
חשוב להבין - ריאקט לא בונה מחדש את כל ה-DOM מאפס בשלב הזה. הוא "מזהה" את ה-HTML הקיים, ומתאים לו את עץ הקומפוננטות שלו, בהנחה שהם תואמים אחד לשני. זה מה שהופך את זה למהיר יחסית - אין צורך לצייר הכל מחדש, רק "לחבר חוטים".
הרצף המלא, שלב אחר שלב¶
כדי שזה יתיישב, הנה סדר האירועים המלא כשמשתמש נכנס לדף ב-Next.js:
- השרת מרנדר את הקומפוננטות לHTML מלא, ושולח אותו לדפדפן.
- הדפדפן מציג את ה-HTML הזה מיד - המשתמש כבר רואה תוכן, גם אם עדיין כלום לא אינטראקטיבי.
- בינתיים, קוד הג'אווהסקריפט של ריאקט נטען ברקע.
- כשהוא מוכן, ריאקט "מהדר" (hydrates) את הדף - מתחבר ל-HTML הקיים ומוסיף לו חיים.
- מהרגע הזה, הדף מתפקד בדיוק כמו אפליקציית ריאקט רגילה - כפתורים עובדים, state מתעדכן, הכל אינטראקטיבי.
התקופה הקצרה שבין שלב 2 לשלב 4, שבה הדף נראה מוכן אבל עדיין לא לגמרי אינטראקטיבי, היא בדיוק הסיבה שCore Web Vitals מודדים מדד כמו INP - כי משתמש שלוחץ על כפתור בדיוק בחלון הזמן הזה עלול להרגיש שהאתר "לא מגיב".
שגיאת ה-hydration mismatch שכולם נתקלים בה¶
אם עבדתם עם Next.js, כנראה ראיתם שגיאה שאומרת בערך "Hydration failed because the server rendered HTML didn't match the client". זה קורה כשה-HTML שהשרת ייצר לא זהה ל-HTML שריאקט "מצפה" לראות כשהוא מתחיל את תהליך ה-hydration בדפדפן.
הסיבות הנפוצות ביותר לזה - שימוש בערכים שתלויים בזמן או במיקום, כמו new Date() או Math.random() ישירות ברינדור, שנותנים תוצאה שונה בשרת מאשר בדפדפן. סיבה נוספה נפוצה - קוד שבודק if (typeof window !== "undefined") כדי להתנהג אחרת בדפדפן לעומת בשרת, מה שיוצר בדיוק את חוסר ההתאמה הזה.
הפתרון הנפוץ ביותר הוא לוודא שהרינדור הראשוני זהה בשני הצדדים, ורק אחרי ה-hydration, בתוך useEffect, לעדכן דברים שתלויים בדפדפן בלבד.
למה חשוב להבין את זה, לא רק לדעת שהמושג קיים¶
hydration הוא לא פרט טכני שולי - הוא בדיוק ההבדל בין להבין למה Next.js מהיר יותר מריאקט "רגיל" ב-SEO ובטעינה ראשונית, לבין לדעת רק "להשתמש בזה" בלי להבין למה. זה גם בדיוק המושג שעומד מאחורי החלוקה בין קומפוננטות שרת לקומפוננטות לקוח ב-Next.js המודרני, שהיא אחת התוספות המשמעותיות ביותר בגרסאות האחרונות.
בקורס צד לקוח הפרק על Next.js מסביר את זה לעומק, אחרי שכבר בניתם בסיס מוצק בריאקט, כדי שהמושגים האלה יתחברו בצורה טבעית ולא יישארו מילים ריקות.
לסיכום¶
Hydration הוא התהליך שבו ריאקט מחבר קוד אינטראקטיבי ל-HTML סטטי שכבר הגיע מהשרת, במקום לבנות הכל מאפס. הבנה שלו מסבירה גם למה Next.js כל כך יעיל, וגם למה שגיאות hydration mismatch קורות, ואיך למנוע אותן מראש.
נתקלתם בשגיאת hydration ולא מבינים למה? תשתפו את הקוד בדיסקורד.