React and Next.js: putting logic in the right place
A well-chosen server-client boundary limits browser JavaScript while keeping the interface interactive.
Each interaction has its place
A portfolio page can render data on the server and make only its filters or preferences interactive. In the Next.js App Router, pages and layouts are Server Components by default. Client Components are useful when state, event handlers or browser APIs are required.
Start with server-rendered content, then place the client boundary around the smallest interactive area. A project list can be prepared on the server while its filter is a Client Component receiving projects as props.
Three questions to ask
- Does this data require a secret or a database query? Keep it on the server.
- Does this UI react to a click, typing or local storage? It needs a client-side part.
- Should the content remain understandable while loading? Provide a useful HTML structure and loading state.
This decision does not replace accessibility work: a filter should expose its state, support keyboards and keep results readable. Measure performance on a real page, not only by component size.
Further reading: Next.js Server and Client Components.