Recommended
Consider this Next.js server component using the use server directive:
"use server";
export default async function Greeting() {
const name = await fetchName();
return <h1>Hello, {name}!</h1>;
}
async function fetchName() {
return "Alice";
}What will this component render on the page?
"use server"; export default async function Greeting() { const name = await fetchName(); return <h1>Hello, {name}!</h1>; } async function fetchName() { return "Alice"; }
Remember that server components can await async functions and render their results directly.
The component uses the use server directive, so it runs on the server. It awaits fetchName() which returns "Alice". The component then renders <h1>Hello, Alice!</h1>.
use server directive?Which of the following Next.js component snippets correctly applies the use server directive?
The use server directive must be the first statement in the file or component.
The use server directive is a special directive that must appear as the first statement in the file or component to mark it as a server component. Only option D places it correctly.
count after this server action?Given this Next.js server component with a server action:
"use server";
import { useState } from 'react';
let count = 0;
export default function Counter() {
async function increment() {
count += 1;
}
return (
<button onClick={increment}>Clicked {count} times</button>
);
}What will be the value of count after clicking the button 3 times?
"use server"; import { useState } from 'react'; let count = 0; export default function Counter() { async function increment() { count += 1; } return ( <button onClick={increment}>Clicked {count} times</button> ); }
Remember server components do not keep state between renders on the client.
The count variable is a module-level variable on the server. Each click triggers a server action but the component does not re-render on the client with updated state. So the displayed count remains 0.
Examine this Next.js server component:
"use server";
export default function Form() {
async function submit(data) {
await saveData(data);
}
return (
<form action={submit}>
<input name="text" />
<button type="submit">Send</button>
</form>
);
}
async function saveData(data) {
console.log(data.text.toUpperCase());
}When submitting the form, a runtime error occurs. What is the cause?
"use server"; export default function Form() { async function submit(data) { await saveData(data); } return ( <form action={submit}> <input name="text" /> <button type="submit">Send</button> </form> ); } async function saveData(data) { console.log(data.text.toUpperCase()); }
Check the type of data received by the server action.
The submit function receives a FormData object, not a plain object. Accessing data.text is undefined. You must use data.get('text') to get the input value.
use server directive is TRUE?Choose the correct statement about the use server directive in Next.js:
Think about where server components run and what APIs they can access.
The use server directive marks code to run on the server only, enabling use of server-only APIs like database access. It does not enable client-side state or browser APIs.