What are Server Functions?

Q: What are Server Functions?

When a Server Functions is defined with the **'use server'** directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. Server Functions can be **created in Server Components and passed as props to Client Components,** or they can be **imported** and used in Client Components. // Server Component import Button from './Button'; function EmptyNote () { async function createNoteAction() { // Server Function 'use server'; await db.notes.create(); } return ; } "use client"; export default function Button({onClick}) { console.log(onClick); // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'} return onClick()}>Create Empty Note }

Difficulty: 5/10

data fetching, security, performance

Server Functions allow Client Components to call async functions executed on the server.

1
When a Server Functions is defined with the 'use server' directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
2
Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.

Server Components can define Server Functions with the 'use server' directive:

When React renders the EmptyNote Server Function, it will create a reference to the createNoteAction function, and pass that reference to the Button Client Component. When the button is clicked, React will send a request to the server to execute the createNoteAction function with the reference provided:

Scenario Questions

0-2 years experience

Follow-up Questions