Next.js Discord

Discord Forum

What difference does the placement of 'use client/server' make?

Answered
Russian Blue posted this in #help-forum
Open in Discord
Russian BlueOP
I'm just beginning to learn NextJS and I've seen people who place 'use server' and 'use client' both at the top of a functional component or at the top of the file. How do I know where I should place it?
Answered by Giant panda
If you use use client it must be at the top of a file no matter what and marks the boundary between server and client-side code.
The use server directive however has two use-cases. Either by declaring single server actions in an otherwise unannotated file:
async function action() {
  'use server'
}

or at the very top of a file to mark all functions inside of it as server actions:
'use server'

async function action() {
  // ...
}

async function alsoAction() {
  // ...
}
View full answer

1 Reply

Giant panda
If you use use client it must be at the top of a file no matter what and marks the boundary between server and client-side code.
The use server directive however has two use-cases. Either by declaring single server actions in an otherwise unannotated file:
async function action() {
  'use server'
}

or at the very top of a file to mark all functions inside of it as server actions:
'use server'

async function action() {
  // ...
}

async function alsoAction() {
  // ...
}
Answer