Server Actions

Dec 6, 2024

~~~

Server actions are defined in a separate .ts file marked with the 'use server' directive.

This tells React what is in that file can only run on the server, and can be called from a client component:

//actions.ts

'use server'

async function myServerAction(formData) => {
  //we are on the server, we can directly
  //do something with the form data
}

In a client component:

'use client'

import { myServerAction } from './actions'

export const Demo = () => {
  return (
    <div>
      <form action={myServerAction}>
        <input
          type='text'
          name='fullName'
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  )
}

Tagged: React · All topics

~~~