Use server directive in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the use server directive do in Next.js?

It marks a function or component to run only on the server side, ensuring it does not run in the browser. This helps with security and performance.

beginner

Where should you place the use server directive in your Next.js code?

At the very top of the file or function before any other code, as a special directive line: 'use server'.

intermediate

Why is it important to use the use server directive for server-only functions?

It prevents server-only code from being bundled and sent to the browser, reducing bundle size and avoiding exposing sensitive logic.

beginner

Can a component marked with use server access browser APIs like window?

No. Components or functions with use server run only on the server and do not have access to browser-specific APIs.

intermediate

How does use server relate to React Server Components in Next.js?

It explicitly marks functions or components as server-only, which is a key part of React Server Components to separate server and client logic.

What is the correct way to mark a function as server-only in Next.js?

A import server from 'next/server'

B 'use server' at the top of the file

C Add a comment // server-only

D Use <ServerOnly> component wrapper

The 'use server' directive at the top of the file or function marks it as server-only.

What happens if you do NOT use 'use server' for a server-only function?

A The function might be bundled and sent to the browser

B The function runs only on the server anyway

C The function will run twice on server and client

D Next.js throws a compile error

Without 'use server', Next.js may include the function in client bundles, exposing server logic.

Can a 'use server' function use browser APIs like localStorage?

A Yes, always

B Only if wrapped in useEffect

C No, it runs only on the server

D Only in development mode

'use server' functions run only on the server and cannot access browser APIs.

Where should the 'use server' directive be placed in a file?

A At the very top before any code

B After imports

C Anywhere inside the function

D Inside the component return

'use server' must be at the top of the file or function before any other code.

What is a benefit of using 'use server' in Next.js?

A Improves client-side rendering speed

B Allows server-only code to run in the browser

C Automatically converts code to TypeScript

D Reduces client bundle size and hides server logic

'use server' helps keep server code off the client, reducing bundle size and improving security.

Explain what the 'use server' directive does in Next.js and why it is important.

Think about where your code runs and what you want to hide from the browser.

Describe how to correctly use the 'use server' directive in a Next.js component or function.

It's a special comment line that must come first.