Frontend / 1 min read
Keep React client boundaries small
Choose where interactivity belongs in a Next.js App Router project.
Start with server-rendered content
Navigation, headings, and article content often have no browser state. Render them on the server, then put a client boundary around the specific control that needs local state, events, or a browser API.
Pass the minimum data needed
If a filter only needs IDs and categories, avoid sending internal records or server configuration. A narrow interface keeps the component easier to test and reduces the data the browser must parse.
Check the result in a production build
Test the page with slow network and keyboard navigation. Examine what JavaScript the route requests, and confirm the primary content remains readable while the interactive pieces initialize.