Next.js Discord

Discord Forum

'use server' directive in server component is just for marks?

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-components
hello i'm confused about server action in server component
// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}

in this case "create" function run on the server
but without 'use server' , "create" function run also on the server
// Server Component
export default function Page() {
  // Server Action
  async function create() {
 
    // ...
  }
 
  return (
    // ...
  )
}

so what changed in practice?

6 Replies

Netherland Dwarf
you only need to use 'use server' for server actions that are called inside a client component
otherwise no need for it
in this case
American Crow
Think of "use server" as "use server action" (that would be the better name).
So whenever you want to declare a function as a server action you use "use server".
Server actions in general are used to manipulate (create, update, delete) data.

Its separate from a server component.
By not doing anything no marking at all: The file will be by default a server component.
Server components in general are used to get data (and pass the data down to other components if needed).

Server actions and Server Components both run on the server that's what they have in common but they are two entirely separate concepts in your mental model.
American Crow
--
So for the code you posted: You have to decide if you want to declare create() as a server action by using "use server" or just want it to be a "normal" async function (which runs on the server since it's inside a server component).
Even though both of your code snippets would run on the server only the first code snippet would mark create() as a server action. The second snippet makes create()an "normal" async function.

So it comes back to why should you use server actions to manipulate data OVER a "normal" async function invoked on the server? Server actions have several advantages e.g. progressive enhancement, more here: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#behavior

For a beginner level it's enough to know that create() will (most likely) be a function which will manipulate data, so use a server action for it.
Asiatic LionOP
Thank you for your detailed explanation, I think I have understood the concept :blob_yes: