Next.js App Router changes the default way a React application thinks about rendering. Server Components run on the server and can access server-side data without shipping their implementation to the browser. Client Components are used when a UI needs browser state, effects, event handlers, or other client-only APIs.
Why server and client boundaries matter
A browser does not need every piece of application code. If a component only reads data and renders HTML, keeping it on the server can reduce client-side JavaScript. Interactive controls such as a search box, drag-and-drop editor, or button with local state can be isolated into a Client Component.
The default is intentional
In the App Router, a component is a Server Component unless it opts into client behavior with "use client". This encourages developers to make the client boundary as small as practical instead of turning an entire page into one large client bundle.
Data fetching on the server
Server Components can fetch data close to the rendering environment. The result can be used directly to produce the page without first loading an API route into the browser just to fetch the same data. Authentication and database access also remain on the server where appropriate.
When to use a Client Component
- Interactive event handlers such as onClick or onChange.
- Browser APIs such as localStorage, geolocation, or window.
- Client-side state and effects.
- Third-party components that require a browser runtime.
A common mistake
Adding "use client" to a high-level layout or page can pull much more code into the browser than necessary. Start with the interactive leaf component and move the boundary upward only when the composition actually requires it.
Streaming and loading states
App Router applications can stream parts of a page as data becomes available. Loading UI can make slow sections feel responsive while the rest of the interface is already visible. This is a rendering strategy, not a substitute for fixing slow queries or expensive server work.
SEO and progressive rendering
Server-rendered content is naturally useful for search engines because important text can be delivered as part of the initial document. Good metadata, canonical URLs, headings, internal links, and genuinely useful copy still matter; rendering technology alone does not create search value.
A practical architecture
Think of the server as the place for data, composition, and secure operations, and the browser as the place for interaction. This separation can make a production application easier to reason about and can keep client bundles small.
For the networking side of a modern web app, continue with ourHTTP versions guideand our fullbrowser request walkthrough.