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