Deviopath › Next.js

Server or Client Component?

Easy · Client Components

Server Components render only on the server, so they can be async and await data (for example with fetch), but they cannot use interactivity. A component needs the "use client" directive when it uses:

- a React hook whose name is use followed by a capital letter (useState, useEffect, ...)

- an event handler prop: on followed by a capital letter (onClick, onChange, ...)

- a browser-only API: window, document or localStorage

Write mustBeClient(features) that returns true if any feature in the list is client-only by these rules, otherwise false.

Simplified: real code is analyzed by the compiler; here you get a list of names used in the component.

Next: Match a Dynamic Route