כיצד להשתמש בפעולות שרת Next.js

מהדורת 13.4 של Next.js הגיעה עם נתב אפליקציה יציב ויכולת לבצע מוטציות בנתונים עם פעולות שרת. תכונה זו היא מחליף משחק מוחלט מכיוון שהיא מאפשרת לך לבצע מוטציות נתונים לחלוטין מרכיבי שרת. זה מביא לשורה של יתרונות בתחומים כמו מהירות, אבטחה וביצועים כלליים של האפליקציה.

למד מה הן פעולות שרת וכיצד להשתמש בתכונה החדשה הזו ביישום Next.js שלך.

מהן פעולות שרת?

פעולות שרת מאפשרות לך לכתוב פונקציות חד פעמיות בצד השרת לצד רכיבי השרת שלך. זה עצום כי אינך צריך עוד לכתוב מסלולי API בעת שליחת טפסים או ביצוע כל סוג אחר של מוטציה בנתונים, כולל מוטציות בנתוני GraphQL.

יכולות להיות לך פונקציות הפועלות בשרת שלך, ואז תוכל לקרוא להן מרכיבי לקוח או שרת. זוהי תכונת אלפא ב-Next.js 13.4, והיא בנויה על גבי React Actions. שימוש בפעולות שרת מוביל לצמצום JavaScript בצד הלקוח, ויכול לעזור לך ליצור טפסים משופרים בהדרגה.

דוגמה לפעולות שרת

עם פעולות שרת, אתה יכול לבצע מוטציות בתוך Next.js, בשרת. תסתכל על תכונה חדשה זו עם דף Next.js לדוגמה שמציג טופס המאפשר לך ליצור פוסט.

להלן היבוא:

יְבוּא קישור מ"הבא/קישור"
יְבוּא FormGroup מ"@/components/FormGroup"
יְבוּא { revalidateTag } מ"הבא/מטמון"
יְבוּא { הפניה מחדש } מ"הבא/ניווט"

עכשיו לקוד ליצירת הפוסט. פונקציה זו היא פעולת שרת; הוא פועל על השרת ושולח את כותרת הפוסט וגוף ה-API (שיוצר את הפוסט במסד הנתונים):

אסינכרוןפוּנקצִיָהcreatePost(נתונים) {
"השתמש בשרת"
const title = data.get("כותרת")
const body = data.get("גוּף")
לְהַמתִין לְהָבִיא(" http://127.0.0.1/posts", {
 כותרת: {"סוג תוכן": "application/json"},
 שיטה: POST,
 גוּף: JSON.stringify({title, body})
 })
 revalidateTag("פוסטים")
 הפניה מחדש("/")
}

פונקציה זו מקבלת את הכותרת והגוף של הפוסט שאותם היא שולחת אל /posts נקודת קצה באמצעות בקשת POST. לאחר מכן הוא מאלץ את המטמון לרענן תוכן המשויך לתג "פוסטים", ומפנה חזרה לדף הבית.

להלן טופס לאיסוף כותרת וגוף הפוסט החדשים:

יְצוּאבְּרִירַת מֶחדָל NewPostForm() {
לַחֲזוֹר (





"כותרת">כותרת</label>
"טֶקסט" שם="כותרת" id="כותרת" />
 </FormGroup>
 </div>




"כותרת">גוף</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> שמור <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>אתה יכול לראות שהטופס אינו מכיל שום היגיון הקשור ליצירת הפוסט, אלא רק פעולת טופס: הפונקציה <strong>createPost()</strong>. נזכיר שלפונקציה createPost יש את ההנחיה "השתמש בשרת" שמצהירה שכל מה שיש בזה הפונקציה צריכה לפעול בשרת.</p> <p>כל הקוד פועל בשרת, והלקוח שלך לא יודע כלום בנוגע לזה. הסיבה לכך היא שהטופס הוא רכיב שרת ואין שום דבר שמעובד באופן דינמי ב- לקוח.</p> <p>כאשר אתה לוחץ על הלחצן <strong>שמור</strong>, Next.js קורא ל-<strong>createPost()</strong> פוּנקצִיָה. פעולה זו שולחת את הכותרת והגוף כנתוני טופס, שמתפרסמים ב-API המקומי כדי לשמור את המידע.</p> <h2 id="revalidating-the-post"> אימות מחדש של הפוסט </h2> <p>בתחתית הפונקציה <strong>createPost()</strong> נמצאת שורת הקוד הבאה:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>כדי להבין מה הפונקציה הזו עושה, דמיין שיש לך דף פוסטים. בתוך רכיב הפוסטים, תקרא לפונקציה בשם <strong>getPosts()</strong> כדי לקבל את כל הפוסטים ממסד הנתונים שלך ולעבד אותם כדי שהמשתמש יוכל לראות:</p> <pre> <code><span>ייצוא</span> <span>ברירת מחדל</span> <span>אסינכרון</span> <span><span>פונקציה</span> <span>פוסטים</span>()</span> span>{<br> <span>const</span> פוסטים = <span>ממתינים</span> getPosts()</code><p><code> <span>החזר</span> (<br> <div>
<br> {posts.map(<span><span>פוסט</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>הפונקציה <strong>getPosts()</strong> תיראה כך:</p> <pre> <code><span>async</span> <span><span>function</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>wait</span> fetch(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> הבא: {<span>תגים</span>: [<span>"פוסטים"</span>], <span>אימות מחדש</span>: <span>3600</span> <br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>פונקציה זו מעבירה את האפשרות <strong>הבא</strong> לאחזור, ומאפשרת לך להגדיר תקופת אימות מחדש. כברירת מחדל, כל בקשת אחזור בודדת שתבצע בתוך רכיב השרת נשמרת לנצח. מעקב אחר מטמון ורענון בעת ​​הצורך הוא חלק חשוב ב<span>איסוף הנתונים Next.js</span>.</p> <p>הקוד שלעיל אומר ל-Next.js לשמור את נתוני ה<strong>פוסטים</strong> למשך עד שעה אחת (3,600 שניות). לאחר שעה, הנתונים נעשים מיושנים ו-Next.js מרענן אותם כדי לקבל את הנתונים העדכניים ביותר ממסד הנתונים.</p> <p>זכור כי הפונקציה <strong>createPost()</strong> קוראת ל<strong>revalidateTag("posts")</strong> לאחר שהיא מסיימת את שאר עבודתה. זה מאלץ את Next.js לשלוף מחדש את הנתונים שאמורים לכלול את הפוסט החדש שהאפליקציה יצרה זה עתה.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> הוכחה לכך שהקוד שלך פועל בשרת </h2> <p>כדי להיות בטוח שכל הקוד פועל בשרת, אתה יכול להוסיף את הצהרת יומן המסוף הבאה בתוך פונקציה <strong>createPost()</strong>:</p> <pre> <code><span>console</span>.log(<span>"פועל בשרת"</span>)</code> </pre> <p>לאחר מכן, נסה ליצור פוסט חדש על ידי לחיצה על כפתור השליחה. אם הקוד שלך פועל בשרת, הודעת היומן הזו תופיע במסוף שלך. אבל אם זה פועל על הלקוח, אז היומן יופיע במסוף הדפדפן.</p> <p>זה הופך את זה בטוח להציב רגיש מידע כמו משתנים סביבתיים, חיבורי מסד נתונים וסיסמאות בשרת מבלי לחשוש שהוא ייחשף ל- לָקוּחַ. לאחר מכן תוכל <span>לקרוא את המחרוזות מקובץ ה-env שלך</span> באפליקציית Next.js שלך.</p> <p>תוכל רוצה לשמור שימוש בפעולות שרת עבור גרסאות של Next.js מאוחרות מ-13.4, במיוחד ב הפקה. אבל זה עדיין ממש מרגש לראות לאן הפיצ'ר הזה הולך מכיוון שהוא כל הזמן דוחף את מה שאתה יכול לעשות על ידי העברת עוד ועוד דברים לשרת. זה אמור להפוך את יישומי הלקוח שלך לקלים יותר לכתיבה, ואת תהליך הפיתוח שלהם למהנה הרבה יותר.</p> <h2 id="learn-more-about-migrating-to-next-js"> למידע נוסף על מעבר ל- Next .js </h2> <p>מפתחים חזיתיים רבים משתמשים ב-React לפיתוח ממשק משתמש. אבל הודות לתכונות כמו עיבוד בצד השרת ויצירת אתרים סטטיים, הרבה מהמפתחים הללו מעבירים את האפליקציות שלהם לשימוש ב-Next.js. הגירה זו פשוטה מאוד מכיוון ש-React די דומה לתחביר של Next.js.</p> <p>השיפור בביצועים ובאבטחה הנוספים מחייבים את ההעברה אפילו יותר. היכולת להחזיק רכיבים בצד השרת, יחד עם פעולות השרת החדשות שכיסינו זה עתה, הופכות את Next.js לאופציה בטוחה וביצועית יותר בהשוואה ל-React הרגיל. כמפתח React, עליך ללמוד כיצד להעביר את האפליקציה שלך ל-Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>