מהי פעולת שרת

עכשיו אפשר לקרוא נתונים מהשרת. הגיע הזמן לחצי השני: לשנות אותם.

עד לאחרונה, שמירת שורת טקסט אחת דרשה טקס מפתיע בהיקפו. כתבת נקודת קצה:

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…ואז קראנו לה מהדפדפן:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

שני קבצים, כתובת URL, מתודה, כותרות ו-JSON בשני הכיוונים, כדי להעביר מחרוזת אחת מטופס למסד נתונים.

פעולת שרת מוחקת את כל זה. כתבו פונקציה אסינכרונית בקובץ שהשורה הראשונה בו היא 'use server':

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…ולהעביר את הפונקציה הזאת לטופס:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

זה כל העניין. כדאי לציין שלושה פרטים:

• 'use server' חייבת להיות השורה הראשונה בקובץ: סמן מאותו סוג כמו 'use client', אבל בכיוון ההפוך. הוא מציין שכל מה שמיוצא מכאן רץ בשרת.
• גוף הפונקציה לעולם לא מגיע לדפדפן. פרטי הכניסה למסד הנתונים שלך בטוחים בתוכה: הדפדפן מקבל רק הפניה שאפשר לקרוא לה.
• לא כתבת כתובת URL. Next.js יוצרת עבורך את נקודת הקצה; action={addItem} הוא החיבור.

הבדל אחד לעומת Fundamentals: שדות הקלט האלה הם לא מבוקרים. אין useState, אין value, אין onChange: הדפדפן שומר את הטקסט, והמאפיין name הוא האופן שבו הפעולה מוצאת אותו בעת השליחה.