Next.js 14 സെർവർ ആക്ഷൻസ്: ഫോം കൈകാര്യം ചെയ്യുന്നതിനുള്ള മികച്ച രീതികൾ

Next.js 14, മികച്ച പ്രകടനവും ഉപയോക്തൃ-സൗഹൃദവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ശക്തമായ ഫീച്ചറുകൾ അവതരിപ്പിക്കുന്നു. ഇവയിൽ, ഫോം സമർപ്പണങ്ങളും ഡാറ്റാ മ്യൂട്ടേഷനുകളും നേരിട്ട് സെർവറിൽ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു പുതിയ രീതിയാണ് സെർവർ ആക്ഷൻസ്. ഈ ഗൈഡ് Next.js 14-ലെ സെർവർ ആക്ഷൻസിനെക്കുറിച്ച് ഒരു സമഗ്രമായ അവലോകനം നൽകുന്നു, ഫോം കൈകാര്യം ചെയ്യൽ, ഡാറ്റാ വെരിഫിക്കേഷൻ, സുരക്ഷ, നൂതന സാങ്കേതിക വിദ്യകൾ എന്നിവയിലെ മികച്ച രീതികളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ശക്തവും വിപുലീകരിക്കാവുന്നതുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് പ്രായോഗിക ഉദാഹരണങ്ങളും പ്രവർത്തനപരമായ ഉൾക്കാഴ്ചകളും ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും.

എന്താണ് Next.js സെർവർ ആക്ഷൻസ്?

സെർവർ ആക്ഷൻസ് എന്നത് സെർവറിൽ പ്രവർത്തിക്കുന്ന അസിൻക്രണസ് ഫംഗ്ഷനുകളാണ്, അവ റിയാക്ട് കമ്പോണന്റുകളിൽ നിന്ന് നേരിട്ട് വിളിക്കാൻ കഴിയും. ഫോം സമർപ്പണങ്ങളും ഡാറ്റാ മ്യൂട്ടേഷനുകളും കൈകാര്യം ചെയ്യുന്നതിനുള്ള പരമ്പരാഗത API റൂട്ടുകളുടെ ആവശ്യം ഇത് ഇല്ലാതാക്കുന്നു, ഇത് ലളിതമായ കോഡ്, മെച്ചപ്പെട്ട സുരക്ഷ, മെച്ചപ്പെട്ട പ്രകടനം എന്നിവയ്ക്ക് കാരണമാകുന്നു. സെർവർ ആക്ഷൻസ് റിയാക്ട് സെർവർ കമ്പോണന്റുകളാണ് (RSCs), അതായത് അവ സെർവറിൽ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, ഇത് വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡുകൾക്കും മെച്ചപ്പെട്ട എസ്.ഇ.ഒ-യ്ക്കും വഴിവെക്കുന്നു.

സെർവർ ആക്ഷൻസിന്റെ പ്രധാന നേട്ടങ്ങൾ:

• ലളിതമായ കോഡ്: പ്രത്യേക API റൂട്ടുകളുടെ ആവശ്യം ഒഴിവാക്കി ബോയിലർപ്ലേറ്റ് കോഡ് കുറയ്ക്കുക.
• മെച്ചപ്പെട്ട സുരക്ഷ: സെർവർ-സൈഡ് എക്സിക്യൂഷൻ ക്ലയിന്റ്-സൈഡ് കേടുപാടുകൾ കുറയ്ക്കുന്നു.
• മെച്ചപ്പെട്ട പ്രകടനം: വേഗതയേറിയ പ്രതികരണ സമയത്തിനായി ഡാറ്റാ മ്യൂട്ടേഷനുകൾ നേരിട്ട് സെർവറിൽ നടപ്പിലാക്കുക.
• ഒപ്റ്റിമൈസ് ചെയ്ത എസ്.ഇ.ഒ: മികച്ച സെർച്ച് എഞ്ചിൻ ഇൻഡെക്സിംഗിനായി സെർവർ-സൈഡ് റെൻഡറിംഗ് പ്രയോജനപ്പെടുത്തുക.
• ടൈപ്പ് സേഫ്റ്റി: ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് എൻഡ്-ടു-എൻഡ് ടൈപ്പ് സേഫ്റ്റിയുടെ പ്രയോജനം നേടുക.

നിങ്ങളുടെ Next.js 14 പ്രോജക്റ്റ് സജ്ജീകരിക്കുന്നു

സെർവർ ആക്ഷൻസിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നിങ്ങൾ ഒരു Next.js 14 പ്രോജക്റ്റ് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങൾ ആദ്യം മുതൽ ആരംഭിക്കുകയാണെങ്കിൽ, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിച്ച് ഒരു പുതിയ പ്രോജക്റ്റ് ഉണ്ടാക്കുക:

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

സെർവർ കമ്പോണന്റുകളുടെയും ആക്ഷൻസിന്റെയും പൂർണ്ണ പ്രയോജനം നേടുന്നതിന് നിങ്ങളുടെ പ്രോജക്റ്റ് app ഡയറക്ടറി ഘടന ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.

സെർവർ ആക്ഷൻസ് ഉപയോഗിച്ചുള്ള അടിസ്ഥാന ഫോം കൈകാര്യം ചെയ്യൽ

നമുക്ക് ഒരു ലളിതമായ ഉദാഹരണം ഉപയോഗിച്ച് തുടങ്ങാം: ഒരു ഡാറ്റാബേസിൽ ഒരു പുതിയ ഐറ്റം ഉണ്ടാക്കുന്നതിനായി ഡാറ്റ സമർപ്പിക്കുന്ന ഒരു ഫോം. ഒരു ഇൻപുട്ട് ഫീൽഡും ഒരു സബ്മിറ്റ് ബട്ടണും ഉള്ള ഒരു ലളിതമായ ഫോം ഞങ്ങൾ ഉപയോഗിക്കും.

ഉദാഹരണം: ഒരു പുതിയ ഐറ്റം ഉണ്ടാക്കുന്നു

ആദ്യം, നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റിനുള്ളിൽ ഒരു സെർവർ ആക്ഷൻ ഫംഗ്ഷൻ നിർവചിക്കുക. ഈ ഫംഗ്ഷൻ സെർവറിലെ ഫോം സമർപ്പണ ലോജിക് കൈകാര്യം ചെയ്യും.

// 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('ഐറ്റം ഉണ്ടാക്കുന്നു:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  console.log('ഐറ്റം വിജയകരമായി സൃഷ്ടിച്ചു!');
}

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 ഫംഗ്ഷൻ സെർവർ ആക്ഷനെ വിളിക്കുന്ന ഒരു ക്ലയിന്റ്-സൈഡ് ഫംഗ്ഷനാണ്. സമർപ്പണ സമയത്ത് ബട്ടൺ പ്രവർത്തനരഹിതമാക്കുന്നത് പോലുള്ള UI സ്റ്റേറ്റും ഇത് കൈകാര്യം ചെയ്യുന്നു.
• <form> എലമെന്റിന്റെ action പ്രോപ്പ് 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('ഐറ്റം ഉണ്ടാക്കുന്നു:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  console.log('ഐറ്റം വിജയകരമായി സൃഷ്ടിച്ചു!');
}

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: ഒരു ടൈപ്പ്സ്ക്രിപ്റ്റ്-ഫസ്റ്റ് സ്കീമ ഡിക്ലറേഷൻ ആൻഡ് വെരിഫിക്കേഷൻ ലൈബ്രറി.
• 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('ഐറ്റം ഉണ്ടാക്കുന്നു:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  console.log('ഐറ്റം വിജയകരമായി സൃഷ്ടിച്ചു!');
}

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 Zod ഉപയോഗിച്ച് name ഫീൽഡിന്റെ വെരിഫിക്കേഷൻ നിയമങ്ങൾ നിർവചിക്കുന്നു.
• 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('ഐറ്റം ഉണ്ടാക്കുന്നു:', name, 'ഉപയോക്താവ്:', session.user?.email);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  console.log('ഐറ്റം വിജയകരമായി സൃഷ്ടിച്ചു!');
}

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 ഫംഗ്ഷൻ ഉപയോക്താവിന്റെ സെഷൻ വിവരങ്ങൾ വീണ്ടെടുക്കുന്നു.
• ഉപയോക്താവ് ഓതന്റിക്കേറ്റഡ് അല്ലെങ്കിൽ (സെഷൻ ഇല്ലെങ്കിൽ), ഒരു എറർ ത്രോ ചെയ്യപ്പെടുന്നു, ഇത് സെർവർ ആക്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുന്നത് തടയുന്നു.

ഇൻപുട്ട് ഡാറ്റ സാനിറ്റൈസ് ചെയ്യുന്നു

ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ് (XSS) ആക്രമണങ്ങൾ തടയാൻ ഇൻപുട്ട് ഡാറ്റ സാനിറ്റൈസ് ചെയ്യുക. ഒരു വെബ്സൈറ്റിലേക്ക് മാരകമായ കോഡ് കുത്തിവയ്ക്കുമ്പോൾ XSS ആക്രമണങ്ങൾ സംഭവിക്കുന്നു, ഇത് ഉപയോക്തൃ ഡാറ്റയെയോ ആപ്ലിക്കേഷൻ പ്രവർത്തനത്തെയോ അപഹരിക്കാൻ സാധ്യതയുണ്ട്.

നിങ്ങളുടെ സെർവർ ആക്ഷൻസിൽ ഉപയോക്താവ് നൽകിയ ഇൻപുട്ട് പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പ് അത് സാനിറ്റൈസ് ചെയ്യാൻ DOMPurify അല്ലെങ്കിൽ sanitize-html പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുക.

നൂതന സാങ്കേതിക വിദ്യകൾ

ഇപ്പോൾ നമ്മൾ അടിസ്ഥാനകാര്യങ്ങൾ പഠിച്ചു കഴിഞ്ഞു, സെർവർ ആക്ഷൻസ് ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിനുള്ള ചില നൂതന സാങ്കേതിക വിദ്യകൾ പര്യവേക്ഷണം ചെയ്യാം.

ഒപ്റ്റിമിസ്റ്റിക് അപ്‌ഡേറ്റുകൾ

ഒപ്റ്റിമിസ്റ്റിക് അപ്‌ഡേറ്റുകൾ, സെർവർ സ്ഥിരീകരിക്കുന്നതിന് മുമ്പുതന്നെ, ആക്ഷൻ വിജയിക്കുമെന്ന് കരുതി UI ഉടൻ അപ്ഡേറ്റ് ചെയ്യുന്നതിലൂടെ മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നു. സെർവറിൽ ആക്ഷൻ പരാജയപ്പെട്ടാൽ, UI അതിന്റെ മുൻ അവസ്ഥയിലേക്ക് തിരികെ പോകുന്നു.

// 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('ഐറ്റം അപ്ഡേറ്റ് ചെയ്യുന്നു:', id, 'പേര്:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  // പരാജയം സിമുലേറ്റ് ചെയ്യുന്നു (പ്രദർശനത്തിനായി)
  const shouldFail = Math.random() < 0.5;
  if (shouldFail) {
    throw new Error('ഐറ്റം അപ്ഡേറ്റ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടു.');
  }

  console.log('ഐറ്റം വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു!');
  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);

    // UI ഒപ്റ്റിമിസ്റ്റിക്കായി അപ്ഡേറ്റ് ചെയ്യുന്നു
    const newName = formData.get('name') as string;
    setItemName(newName);

    try {
      const result = await updateItem(id, formData);
      // വിജയിച്ചാൽ, അപ്ഡേറ്റ് ഇതിനകം setItemName വഴി UI-ൽ പ്രതിഫലിക്കും

    } catch (error: any) {
      setErrorMessage(error.message || 'ഒരു പിശക് സംഭവിച്ചു.');
      // പിശക് സംഭവിച്ചാൽ UI പഴയപടിയാക്കുന്നു
      setItemName(initialName);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    

      
നിലവിലെ പേര്: {itemName}
      

        പുതിയ ഐറ്റത്തിന്റെ പേര്:
        
        
          {isSubmitting ? 'അപ്ഡേറ്റ് ചെയ്യുന്നു...' : 'ഐറ്റം അപ്ഡേറ്റ് ചെയ്യുക'}
        
      
      {errorMessage && 
{errorMessage}
}
    
  );
}

വിശദീകരണം:

• സെർവർ ആക്ഷൻ വിളിക്കുന്നതിന് മുമ്പ്, setItemName ഉപയോഗിച്ച് UI പുതിയ ഐറ്റത്തിന്റെ പേര് ഉപയോഗിച്ച് ഉടൻ അപ്ഡേറ്റ് ചെയ്യുന്നു.
• സെർവർ ആക്ഷൻ പരാജയപ്പെട്ടാൽ, UI യഥാർത്ഥ ഐറ്റത്തിന്റെ പേരിലേക്ക് തിരികെ പോകുന്നു.

ഡാറ്റ വീണ്ടും വെരിഫൈ ചെയ്യുന്നു (Revalidating)

ഒരു സെർവർ ആക്ഷൻ ഡാറ്റ പരിഷ്കരിച്ച ശേഷം, UI ഏറ്റവും പുതിയ മാറ്റങ്ങൾ പ്രതിഫലിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ കാഷെ ചെയ്ത ഡാറ്റ വീണ്ടും വെരിഫൈ ചെയ്യേണ്ടി വന്നേക്കാം. ഡാറ്റ വീണ്ടും വെരിഫൈ ചെയ്യാൻ Next.js നിരവധി വഴികൾ നൽകുന്നു:

• പാത്ത് റീവാലിഡേറ്റ് ചെയ്യുക: ഒരു നിർദ്ദിഷ്ട പാഥിന്റെ കാഷെ വീണ്ടും വെരിഫൈ ചെയ്യുക.
• ടാഗ് റീവാലിഡേറ്റ് ചെയ്യുക: ഒരു നിർദ്ദിഷ്ട ടാഗുമായി ബന്ധപ്പെട്ട ഡാറ്റയുടെ കാഷെ വീണ്ടും വെരിഫൈ ചെയ്യുക.

ഒരു പുതിയ ഐറ്റം ഉണ്ടാക്കിയ ശേഷം ഒരു പാത്ത് വീണ്ടും വെരിഫൈ ചെയ്യുന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

// 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('ഐറ്റം ഉണ്ടാക്കുന്നു:', name);

  await new Promise((resolve) => setTimeout(resolve, 1000)); // ലേറ്റൻസി സിമുലേറ്റ് ചെയ്യുന്നു

  console.log('ഐറ്റം വിജയകരമായി സൃഷ്ടിച്ചു!');

  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 പോലുള്ള സാധാരണ ഭീഷണികളിൽ നിന്ന് നിങ്ങളുടെ ആപ്ലിക്കേഷനെ സംരക്ഷിക്കുന്നതിന് സുരക്ഷാ മികച്ച രീതികൾ പാലിക്കുക.
• ഡാറ്റ റീവാലിഡേറ്റ് ചെയ്യാൻ മറക്കുന്നു: ഒരു സെർവർ ആക്ഷൻ ഡാറ്റ പരിഷ്കരിച്ച ശേഷം, UI അപ്-ടു-ഡേറ്റ് ആയി നിലനിർത്താൻ കാഷെ ചെയ്ത ഡാറ്റ റീവാലിഡേറ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക.

ഉപസംഹാരം

Next.js 14 സെർവർ ആക്ഷൻസ്, ഫോം സമർപ്പണങ്ങളും ഡാറ്റാ മ്യൂട്ടേഷനുകളും നേരിട്ട് സെർവറിൽ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ശക്തവും കാര്യക്ഷമവുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഈ ഗൈഡിൽ പ്രതിപാദിച്ചിട്ടുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങൾക്ക് ശക്തവും സുരക്ഷിതവും ഉയർന്ന പ്രകടനവുമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. നിങ്ങളുടെ കോഡ് ലളിതമാക്കാനും സുരക്ഷ വർദ്ധിപ്പിക്കാനും മൊത്തത്തിലുള്ള ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താനും സെർവർ ആക്ഷൻസ് സ്വീകരിക്കുക. നിങ്ങൾ ഈ തത്വങ്ങൾ സമന്വയിപ്പിക്കുമ്പോൾ, നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് തിരഞ്ഞെടുപ്പുകളുടെ ആഗോള സ്വാധീനം പരിഗണിക്കുക. നിങ്ങളുടെ ഫോമുകളും ഡാറ്റ കൈകാര്യം ചെയ്യൽ പ്രക്രിയകളും വിവിധ അന്താരാഷ്ട്ര പ്രേക്ഷകർക്ക് ആക്സസ് ചെയ്യാവുന്നതും സുരക്ഷിതവും ഉപയോക്തൃ-സൗഹൃദവുമാണെന്ന് ഉറപ്പാക്കുക. ഉൾക്കൊള്ളാനുള്ള ഈ പ്രതിബദ്ധത നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഉപയോഗക്ഷമത മെച്ചപ്പെടുത്തുക മാത്രമല്ല, ആഗോളതലത്തിൽ അതിന്റെ വ്യാപ്തിയും ഫലപ്രാപ്തിയും വർദ്ധിപ്പിക്കുകയും ചെയ്യും.