Server Functions

"use server" directive உடன் Server Function define செய்யப்பட்டால், உங்கள் framework தானாக Server Function-க்கு reference உருவாக்கி, அந்த reference-ஐ Client Component-க்கு pass செய்யும். அந்த function client-இல் call செய்யப்படும்போது, function execute செய்ய React server-க்கு request அனுப்பி result-ஐ return செய்யும்.

Server Functions Server Components-இல் உருவாக்கப்பட்டு props ஆக Client Components-க்கு pass செய்யப்படலாம்; அல்லது Client Components-இல் import செய்து பயன்படுத்தப்படலாம்.

பயன்பாடு

Server Component-இலிருந்து Server Function உருவாக்குதல்

Server Components "use server" directive மூலம் Server Functions define செய்யலாம்:

// Server Component
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

React EmptyNote Server Component-ஐ render செய்யும்போது, createNoteAction function-க்கு reference உருவாக்கி, அந்த reference-ஐ Button Client Component-க்கு pass செய்யும். Button click செய்யப்படும்போது, வழங்கப்பட்ட reference உடன் createNoteAction function execute செய்ய React server-க்கு request அனுப்பும்:

"use client";

export default function Button({onClick}) {
  console.log(onClick);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Create Empty Note</button>
}

மேலும் அறிய "use server" docs-ஐப் பார்க்கவும்.

Client Components-இலிருந்து Server Functions import செய்தல்

"use server" directive பயன்படுத்தும் files-இலிருந்து Client Components Server Functions import செய்யலாம்:

"use server";

export async function createNote() {
  await db.notes.create();
}

Bundler EmptyNote Client Component-ஐ build செய்யும்போது, bundle-இல் createNote function-க்கு reference உருவாக்கும். button click செய்யப்படும்போது, வழங்கப்பட்ட reference-ஐப் பயன்படுத்தி createNote function execute செய்ய React server-க்கு request அனுப்பும்:

"use client";
import {createNote} from './actions';

function EmptyNote() {
  console.log(createNote);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
  <button onClick={() => createNote()} />
}

மேலும் அறிய "use server" docs-ஐப் பார்க்கவும்.

Actions உடன் Server Functions

Server Functions client-இல் உள்ள Actions-இலிருந்து call செய்யப்படலாம்:

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (error) {
        setError(error);
      } else {
        setName('');
      }
    })
  }

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {error && <span>Failed: {error}</span>}
    </form>
  )
}

Client-இல் அதை Action-இல் wrap செய்வதன் மூலம் Server Function-ன் isPending state-ஐ access செய்ய இது அனுமதிக்கிறது.

மேலும் அறிய <form>-க்கு வெளியே Server Function call செய்தல் docs-ஐப் பார்க்கவும்.

Form Actions உடன் Server Functions

Server Functions React 19-ன் புதிய Form features உடன் வேலை செய்கின்றன.

Form-ஐ server-க்கு தானாக submit செய்ய, Server Function-ஐ Form-க்கு pass செய்யலாம்:

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Form submission வெற்றி பெற்றால், React form-ஐ தானாக reset செய்யும். Pending state, last response access செய்ய, அல்லது progressive enhancement support செய்ய useActionState சேர்க்கலாம்.

மேலும் அறிய Forms-இல் Server Functions docs-ஐப் பார்க்கவும்.

useActionState உடன் Server Functions

Action pending state மற்றும் கடைசியாக return செய்யப்பட்ட response மட்டும் access செய்ய வேண்டிய பொதுவான சூழலில், useActionState உடன் Server Functions-ஐ call செய்யலாம்:

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [state, submitAction, isPending] = useActionState(updateName, {error: null});

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Failed: {state.error}</span>}
    </form>
  );
}

Server Functions உடன் useActionState பயன்படுத்தும்போது, hydration முடிவதற்கு முன் செய்யப்பட்ட form submissions-ஐயும் React தானாக replay செய்யும். இதன் பொருள் app hydrate ஆகும் முன்பே users உங்கள் app உடன் interact செய்ய முடியும்.

மேலும் அறிய useActionState docs-ஐப் பார்க்கவும்.

useActionState உடன் progressive enhancement

Server Functions useActionState-ன் மூன்றாவது argument மூலம் progressive enhancement-ஐயும் support செய்கின்றன.

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [, submitAction] = useActionState(updateName, null, `/name/update`);

  return (
    <form action={submitAction}>
      ...
    </form>
  );
}

permalink useActionState-க்கு வழங்கப்பட்டால், JavaScript bundle load ஆகும் முன் form submit செய்யப்பட்டால் React வழங்கப்பட்ட URL-க்கு redirect செய்யும்.

மேலும் அறிய useActionState docs-ஐப் பார்க்கவும்.