# Server Actions

> Learn how React Server Actions work using the 'use server' directive to define server-only functions you can call from a client component form action.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2024-12-06 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/server-actions/

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

This tells [React](https://flaviocopes.com/react/) what is in that file can only run on the server, and can be called from a client component:

```typescript
//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:

```typescript
'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>
  )
}
```