פעולות שרת ב-Next.js 14: שליטה בשיטות עבודה מומלצות לטיפול בטפסים

גרסה 14 של Next.js מציגה תכונות עוצמתיות לבניית יישומי אינטרנט ביצועיסטיים וידידותיים למשתמש. בין אלה, פעולות שרת (Server Actions) בולטות כדרך מהפכנית לטפל בהגשת טפסים ובשינויי נתונים (mutations) ישירות בשרת. מדריך זה מספק סקירה מקיפה של פעולות שרת ב-Next.js 14, תוך התמקדות בשיטות עבודה מומלצות לטיפול בטפסים, אימות נתונים, אבטחה וטכניקות מתקדמות. נחקור דוגמאות מעשיות ונספק תובנות שימושיות שיעזרו לכם לבנות יישומים חזקים וניתנים להרחבה.

מהן פעולות שרת (Server Actions) ב-Next.js?

פעולות שרת הן פונקציות אסינכרוניות שרצות בשרת וניתן להפעילן ישירות מרכיבי React. הן מבטלות את הצורך בנתיבי API מסורתיים לטיפול בהגשות טפסים ושינויי נתונים, מה שמוביל לקוד פשוט יותר, אבטחה משופרת וביצועים משופרים. פעולות שרת הן רכיבי שרת של React (RSCs), כלומר הן מבוצעות בשרת, מה שמוביל לטעינת עמודים ראשונית מהירה יותר ו-SEO משופר.

היתרונות המרכזיים של פעולות שרת:

• קוד פשוט יותר: צמצום קוד boilerplate על ידי ביטול הצורך בנתיבי API נפרדים.
• אבטחה משופרת: הרצה בצד השרת ממזערת פגיעויות בצד הלקוח.
• ביצועים משופרים: ביצוע שינויי נתונים ישירות בשרת לזמני תגובה מהירים יותר.
• SEO אופטימלי: מינוף רינדור בצד השרת לאינדוקס טוב יותר במנועי חיפוש.
• בטיחות טיפוסים (Type Safety): תיהנו מבטיחות טיפוסים מקצה לקצה עם TypeScript.

הגדרת פרויקט Next.js 14

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

npx create-next-app@latest my-next-app

ודאו שהפרויקט שלכם משתמש במבנה התיקיות app כדי לנצל באופן מלא את רכיבי השרת והפעולות.

טיפול בסיסי בטפסים עם פעולות שרת

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

דוגמה: יצירת פריט חדש

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

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    await createItem(formData);
    setIsSubmitting(false);
  }

  return (
    

      שם הפריט:
      
      
        {isSubmitting ? 'יוצר...' : 'צור פריט'}
      
    
  );
}

הסבר:

• ההנחיה 'use client' מציינת שזהו רכיב לקוח.
• הפונקציה createItem מסומנת בהנחיה 'use server', המציינת שזוהי פעולת שרת.
• הפונקציה handleSubmit היא פונקציה בצד הלקוח הקוראת לפעולת השרת. היא גם מנהלת את מצב הממשק המשתמש, כמו השבתת הכפתור במהלך השליחה.
• המאפיין action של אלמנט ה-<form> מוגדר לפונקציה handleSubmit.
• המתודה formData.get('name') מאחזרת את הערך של שדה הקלט 'name'.
• הביטוי await new Promise מדמה פעולה מול מסד נתונים ומוסיף השהיה.

אימות נתונים

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

דוגמה: אימות נתוני קלט

שנו את פעולת השרת createItem כך שתכלול לוגיקת אימות.

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  if (!name || name.length < 3) {
    throw new Error('שם הפריט חייב להכיל לפחות 3 תווים.');
  }

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'אירעה שגיאה.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        שם הפריט:
        
        
          {isSubmitting ? 'יוצר...' : 'צור פריט'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

הסבר:

• הפונקציה createItem בודקת כעת אם ה-name תקין (באורך של 3 תווים לפחות).
• אם האימות נכשל, נזרקת שגיאה.
• הפונקציה handleSubmit מעודכנת כדי לתפוס שגיאות שנזרקו על ידי פעולת השרת ולהציג הודעת שגיאה למשתמש.

שימוש בספריות אימות

לתרחישי אימות מורכבים יותר, שקלו להשתמש בספריות אימות כמו:

• Zod: ספריית הצהרת סכמות ואימות נתונים מבוססת TypeScript.
• Yup: בונה סכמות JavaScript לניתוח, אימות והמרת ערכים.

הנה דוגמה המשתמשת ב-Zod:

// app/utils/validation.ts
import { z } from 'zod';

export const CreateItemSchema = z.object({
  name: z.string().min(3, 'שם הפריט חייב להכיל לפחות 3 תווים.'),
});

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { CreateItemSchema } from '../utils/validation';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  const validatedFields = CreateItemSchema.safeParse({ name });

  if (!validatedFields.success) {
    return { errors: validatedFields.error.flatten().fieldErrors };
  }

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'אירעה שגיאה.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        שם הפריט:
        
        
          {isSubmitting ? 'יוצר...' : 'צור פריט'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

הסבר:

• ה-CreateItemSchema מגדיר את כללי האימות עבור השדה name באמצעות Zod.
• המתודה safeParse מנסה לאמת את נתוני הקלט. אם האימות נכשל, היא מחזירה אובייקט עם השגיאות.
• האובייקט errors מכיל מידע מפורט על כשלונות האימות.

שיקולי אבטחה

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

מניעת זיוף בקשות בין אתרים (CSRF)

התקפות CSRF מנצלות את האמון שיש לאתר בדפדפן של המשתמש. כדי למנוע התקפות CSRF, יש ליישם מנגנוני הגנה מפני CSRF.

Next.js מטפל אוטומטית בהגנת CSRF בעת שימוש בפעולות שרת. הפריימוורק יוצר ומאמת אסימון CSRF עבור כל שליחת טופס, ומבטיח שהבקשה מגיעה מהיישום שלכם.

טיפול באימות והרשאות משתמשים

ודאו שרק משתמשים מורשים יכולים לבצע פעולות מסוימות. יש ליישם מנגנוני אימות והרשאות כדי להגן על נתונים ופונקציונליות רגישים.

הנה דוגמה המשתמשת ב-NextAuth.js להגנה על פעולת שרת:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { getServerSession } from 'next-auth';
import { authOptions } from '../../app/api/auth/[...nextauth]/route';

async function createItem(formData: FormData) {
  'use server'

  const session = await getServerSession(authOptions);

  if (!session) {
    throw new Error('לא מורשה');
  }

  const name = formData.get('name') as string;

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Creating item:', name, 'by user:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  console.log('Item created successfully!');
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'אירעה שגיאה.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        שם הפריט:
        
        
          {isSubmitting ? 'יוצר...' : 'צור פריט'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

הסבר:

• הפונקציה getServerSession מאחזרת את פרטי הסשן של המשתמש.
• אם המשתמש אינו מאומת (אין סשן), נזרקת שגיאה, המונעת מפעולת השרת להתבצע.

חיטוי נתוני קלט

חטאו את נתוני הקלט כדי למנוע התקפות Cross-Site Scripting (XSS). התקפות XSS מתרחשות כאשר קוד זדוני מוזרק לאתר, ועלול לסכן את נתוני המשתמש או את פונקציונליות היישום.

השתמשו בספריות כמו DOMPurify או sanitize-html כדי לחטא קלט שסופק על ידי המשתמש לפני עיבודו בפעולות השרת שלכם.

טכניקות מתקדמות

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

עדכונים אופטימיים

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

// app/components/UpdateItemForm.tsx
'use client';

import { useState } from 'react';

async function updateItem(id: string, formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Updating item:', id, 'with name:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  // הדמיית כישלון (למטרות הדגמה)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('העדכון נכשל.');
  }

  console.log('Item updated successfully!');
  return { name }; // החזרת השם המעודכן
}

export default function UpdateItemForm({ id, initialName }: { id: string; initialName: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [itemName, setItemName] = useState(initialName);

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);

    // עדכון אופטימי של הממשק המשתמש
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // במקרה של הצלחה, העדכון כבר משתקף בממשק המשתמש דרך setItemName

    } catch (error: any) {
      setErrorMessage(error.message || 'אירעה שגיאה.');
      // החזרת הממשק המשתמש למצבו הקודם במקרה של שגיאה
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      
שם נוכחי: {itemName}
      

        שם פריט חדש:
        
        
          {isSubmitting ? 'מעדכן...' : 'עדכן פריט'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

הסבר:

• לפני הקריאה לפעולת השרת, הממשק המשתמש מתעדכן באופן מיידי עם שם הפריט החדש באמצעות setItemName.
• אם פעולת השרת נכשלת, הממשק המשתמש חוזר לשם הפריט המקורי.

אימות מחדש של נתונים (Revalidation)

לאחר שפעולת שרת משנה נתונים, ייתכן שתצטרכו לאמת מחדש נתונים שנשמרו במטמון (cache) כדי להבטיח שהממשק המשתמש משקף את השינויים האחרונים. Next.js מספק מספר דרכים לאמת נתונים מחדש:

• Revalidate Path: אימות מחדש של המטמון עבור נתיב ספציפי.
• Revalidate Tag: אימות מחדש של המטמון עבור נתונים המשויכים לתג ספציפי.

הנה דוגמה לאימות מחדש של נתיב לאחר יצירת פריט חדש:

// app/components/CreateItemForm.tsx
'use client';

import { useState } from 'react';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server'

  const name = formData.get('name') as string;

  // הדמיית אינטראקציה עם מסד הנתונים
  console.log('Creating item:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // הדמיית השהיה

  console.log('Item created successfully!');

  revalidatePath('/items'); // אימות מחדש של הנתיב /items
}

export default function CreateItemForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  
  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true);
    setErrorMessage(null);
    try {
      await createItem(formData);
    } catch (error: any) {
      setErrorMessage(error.message || 'אירעה שגיאה.');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      

        שם הפריט:
        
        
          {isSubmitting ? 'יוצר...' : 'צור פריט'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

הסבר:

• הפונקציה revalidatePath('/items') מבטלת את תוקף המטמון עבור הנתיב /items, ומבטיחה שהבקשה הבאה לנתיב זה תאחזר את הנתונים העדכניים ביותר.

שיטות עבודה מומלצות עבור פעולות שרת

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

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

מכשולים נפוצים וכיצד להימנע מהם

בעוד שפעולות שרת מציעות יתרונות רבים, ישנם כמה מכשולים נפוצים שכדאי להיות מודעים אליהם:

• פעולות שרת מורכבות מדי: הימנעו מהכנסת יותר מדי לוגיקה לפעולת שרת אחת. פרקו משימות מורכבות לפונקציות קטנות וניתנות לניהול.
• הזנחת טיפול בשגיאות: כללו תמיד טיפול בשגיאות כדי לתפוס שגיאות בלתי צפויות ולספק משוב מועיל למשתמש.
• התעלמות משיטות עבודה מומלצות באבטחה: עקבו אחר שיטות עבודה מומלצות באבטחה כדי להגן על היישום שלכם מפני איומים נפוצים כמו XSS ו-CSRF.
• שכחה לאמת נתונים מחדש: ודאו שאתם מאמתים מחדש נתונים מהמטמון לאחר שפעולת שרת משנה נתונים כדי לשמור על עדכניות הממשק המשתמש.

סיכום

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