Next.js Server Actions Let You Drop API Routes for Simple Forms

Next.js இப்போது டெவலப்பர்கள் ஒரு காம்பொனென்ட்டிலிருந்து (component) நேரடியாக சர்வர்-மட்டும் (server-only) செயல்பாடுகளை அழைக்க அனுமதிக்கிறது, இது படிவ சமர்ப்பிப்புகள் (form submissions) போன்ற அன்றாடப் பணிகளுக்காகத் தனித்தனி API ரூட்களை (API routes) உருவாக்க வேண்டிய அவசியத்தை நீக்குகிறது. புதிய Server Actions அம்சத்தைப் பயன்படுத்துவதன் மூலம், ஒரு ஒற்றை HTML படிவம் இடைநிலை fetch அழைப்பு இல்லாமல் பேக்எண்ட் குறியீட்டைத் தூண்ட முடியும், இது தேவையற்ற குறியீடுகளைக் (boilerplate) குறைப்பதோடு முன்முனை/பின்முனை (front-end/back-end) ஒப்பந்தத்தையும் வலுப்படுத்துகிறது.

பழைய முறை ஏன் கடினமாகத் தோன்றுகிறது

ஒரு வழக்கமான React அல்லது Next.js செயலியில், ஒரு எளிய "create a project" படிவம் பல படிநிலைகளைத் தூண்டுகிறது: ஒரு API ரூட் கோப்பு, உலாவியிலிருந்து (browser) ஒரு fetch கோரிக்கை, லோடிங் (loading) மற்றும் பிழை நிலைகளைக் கையாளுதல், CORS தலைப்புகள் (headers), மற்றும் இறுதியாக புதிய தரவைப் பிரதிபலிக்க கிளையண்ட்-சைடு (client-side) அப்டேட். ஒவ்வொரு படிநிலையும் கூடுதல் கோப்புகள், குறியீட்டு வரிகள் மற்றும் தோல்விக்கான வாய்ப்புகளைச் சேர்க்கின்றன. ஒரு தரவுத்தளத்தில் (database) பதிவை எழுதுவது மட்டுமே இலக்காக இருந்தாலும், குழுக்கள் இந்தத் துண்டுகளை இணைப்பதற்கே அதிக நேரத்தைச் செலவிடுகின்றனர்.

Server Actions இடைவெளியைக் குறைக்கிறது

Server Actions என்பவை சர்வரில் மட்டுமே இயங்குவது உறுதி செய்யப்படக்கூடிய async செயல்பாடுகள் (asynchronous functions) ஆகும். ஒரு கோப்பின் மேற்புறத்தில் "use server" என்ற வழிகாட்டுதலைச் சேர்ப்பது, அந்த குறியீட்டை பிரவுசர் பண்டிலில் (browser bundle) இருந்து விலக்கி வைக்க கம்பைலருக்கு (compiler) அறிவுறுத்துகிறது, இதனால் அது தரவுத்தளங்கள், ரகசியங்கள் (secrets) அல்லது எந்தவொரு சர்வர்-மட்டும் வளத்தையும் பாதுகாப்பாக அணுக முடியும். இந்தச் செயல்பாடு சர்வரில் இருப்பதால், ஒரு நேட்டிவ் <form> எலிமெண்டில் உள்ள action பண்புக்கூறு (attribute) மூலம் காம்பொனென்ட் அதை நேரடியாக அழைக்க முடியும்.

ஒரு action-ஐ வரையறுத்தல்

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

இந்தச் செயல்பாடு ஒரு FormData பொருளைப் பெற்று, அதன் தரவைச் சரிபார்த்து (validate), தரவுத்தளத்தில் எழுதி, பின்னர் முழு ரீலோட் (reload) இல்லாமலேயே UI புதிய திட்டத்தைக் காட்டுவதற்கு /dashboard பக்கத்தைப் புதுப்பிக்குமாறு Next.js-இடம் கேட்கிறது.

UI-இல் இணைத்தல்

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

பயனர் submit பட்டனை கிளிக் செய்யும்போது, பிரவுசர் படிவத் தரவை சர்வர்-சைடு createProject செயல்பாட்டிற்கு அனுப்புகிறது (post). இது நிலையான HTML படிவப் பண்புகளைப் பயன்படுத்துவதால், ஜாவாஸ்கிரிப்ட் (JavaScript) இன்னும் லோட் ஆகவில்லை என்றாலும் சமர்ப்பிப்பு வேலை செய்யும், இது மெதுவான இணைப்புகளில் செயல்திறனை மேம்படுத்துகிறது.

குழுக்கள் எதைப் பெறுகிறார்கள்

• குறைவான கோப்புகள் – ஒவ்வொரு எண்ட்பாயிண்டிற்கும் (endpoint) தனித்தனி pages/api அல்லது app/api கோப்புகள் தேவையில்லை.
• குறைவான இணைப்புகள் – மேனுவல் fetch அழைப்புகள் தேவையில்லை, வெளிப்படையான CORS கையாளுதல் தேவையில்லை.
• உள்ளமைக்கப்பட்ட டைப் பாதுகாப்பு (Built-in type safety) – செயல்பாட்டின் கையொப்பம் (function signature) சர்வர் மற்றும் கிளையண்ட் இடையே பகிரப்படுகிறது, எனவே TypeScript முரண்பாடுகளை முன்கூட்டியே கண்டறிய முடியும்.
• செயல்திறன் முன்னிலை – கோரிக்கை நேரடியாக சர்வர் செயல்பாட்டிற்குச் செல்கிறது, கிளையண்ட்-சைடு fetch மூலம் ஏற்படும் கூடுதல் நெட்வொர்க் தடையைத் தவிர்க்கிறது.

வரம்புகள் மற்றும் எச்சரிக்கைகள்

Server Actions இன்னும் ஆரம்பக்கட்ட அம்சமாகும். அவை "use server" எனக் குறிக்கப்பட்ட async செயல்பாடுகளாக மட்டுமே இருக்க முடியும், மேலும் அவை கிளையண்டிற்குத் தன்னிச்சையான JavaScript பொருட்களைத் திருப்பி அனுப்ப முடியாது; அவை ஒரு redirect, revalidation அல்லது ஒரு சாதாரணப் பதிலுடன் (plain response) முடிய வேண்டும். அழைப்புத் தொடர் (call stack) பிரவுசரில் இருந்து சர்வர் ரன்டைமிற்கு (runtime) மாறுவதால், டிபக் (debugging) செய்வது வித்தியாசமாகத் தோன்றலாம், இது வழக்கமான API-ரூட் லாக்ஸ்களுக்கு (logs) பழகிய டெவலப்பர்களை ஆச்சரியப்பட வைக்கலாம். மேலும், பல மைக்ரோசர்வீஸ்களை உள்ளடக்கிய அல்லது நுணுக்கமான HTTP ஸ்டேட்டஸ் குறியீடுகள் (status codes) தேவைப்படும் சிக்கலான பணிப்பாய்வுகள் (workflows) இன்னும் பாரம்பரிய API எண்ட்பாயிண்டுகளைத் தேவைப்படலாம்.

கவனிக்க வேண்டியவை

Next.js வரவிருக்கும் வெளியீடுகளில் Server Actions API-ஐ விரிவுபடுத்த அதிக வாய்ப்புள்ளது, மேலும் பல பதில் வகைகளுக்கான (response types) ஆதரவையும் சிறந்த டூலிங் ஒருங்கிணைப்பையும் (tooling integration) சேர்க்கும். முக்கியமான அம்சங்களை இந்தத் பாதையில் கொண்டு செல்வதற்கு முன், அதன் நிலைத்தன்மையைக் கணிக்க ஆரம்பகாலப் பயனர்கள் (early adopters) பிரேம்வொர்க்கின் (framework) சேஞ்ச்லாக் (changelog) மற்றும் சமூகப் பின்னூட்டங்களைக் கவனிப்பது நல்லது. பண்டில் அளவு (bundle size) மற்றும் சர்வர்-ரெண்டரிங் அளவீடுகளைக் (server-rendering metrics) கண்காணிப்பதன் மூலம், குறைக்கப்பட்ட கிளையண்ட் குறியீடு உங்கள் குறிப்பிட்ட டிராஃபிக் முறைகளுக்கு அளவிடக்கூடிய தாமதக் குறைவை (latency gains) தருகிறதா என்பதையும் அறியலாம்.

சுருக்கமாக

ஒரு காம்பொனென்ட் நேரடியாக சர்வர்-மட்டும் செயல்பாட்டை அழைக்க அனுமதிப்பதன் மூலம், Next.js Server Actions நீண்டகாலமாக React திட்டங்களில் குழப்பத்தை ஏற்படுத்திய இடைத்தரகரை நீக்குகிறது. இதன் விளைவாகத் தூய்மையான குறியீடு, வேகமான பதில் செயல்முறை மற்றும் மென்மையான டெவலப்பர் அனுபவம் கிடைக்கும்—இந்த அம்சத்தின் தற்போதைய கட்டுப்பாடுகள் திட்டத்தின் தேவைகளுடன் ஒத்துப்போகும் பட்சத்தில்.