
הטופס החדש של Next.js 15 – שימושי, אבל כמעט.
הטופס החדש של Next.js 15, שימושי - כמעט. 🙄
הקדמה: 😎
קומפוננטת הטופס החדשה Form - שימושית כמו פיל במרק ירקות אבל בואו נסקור ותחליטו אתם.
למה זה נועד? 😎
כאשר הטופס נועד לשלוח את הלקוח לדף עם searchParams (לדוגמא בחיפוש סינון או מיון או כל התשובות נכונות).
למה זה לא שימושי? 👎
בדרך כלל מבחינה uxית ברוב המקרים אנחנו נעשה את החיפושים תוך כדי הקלדה ולא בלחיצה על שלח.
אז למה גיא מראה לנו את זה? 👍
כי יש מקרים של סינונים מרובים וכדומה (כמו באתרי e-commerce) שאנחנו כן נעדיף שבן האנוש יסיים להחליט מה הוא מחפש לפני שאנחנו מתעללים בDB שלנו לחסוך עלויות.
השיטה הישנה: 🚀
טופס קליינטי (שמתרנדר בצד לקוח כמו react הרגיל) ששואב ובועט את הלקוח בעזרת נתונים מהsearchParams בעזרת הוקים יעודיים - מצורף למטה דוגמא.
השיטה החדשה: 🚀
טופס סרברי שבaction אנחנו נותנים לו את הכתובת בקליינט של הדף שבו אנחנו משבצים את החיפוש בsearchParams והוא יעשה את השאר.
עוד קצת רנדור בסרבר, פחות כתיבה. ומה דעתכם? (הנעה לפעולה) * הדפים נכתבו עם Shadcn מטעמי עצלות ברורים. * במקור מוסיפים Suspense ואיזה חיווי טעינה בזמן שהשרת מביא את הנתונים - אבל בואו לא נעיק - רק השניה הנשמה היתרה יצאה ואין חשק להוציא גם את המקורית.
שבוע משובח, קורן, מלא אור, ממון, שפע, זוגיות, טלפונים מאריאלה, שמחת חיים, חברות תעופה שחוזרות לטוס ובריאות. 👻



Yosefus Flavius
כותב הבלוג