Keeping Server and Client boundaries intentional in Next.js

One of the biggest changes when working seriously with modern Next.js is learning to stop thinking of every component as a browser component. The App Router gives you a choice: keep work on the server when possible and introduce client-side JavaScript when the interface actually needs it.

The important question is not 'Can this be a Client Component?'

Almost anything can eventually be moved to the client. The better question is whether the component actually needs browser-only behavior such as state, event handlers, effects, browser APIs, or client-side libraries.

• Interactive menus
• Form controls with client-side state
• Drag and drop interfaces
• Browser APIs
• Client-only third-party libraries
• Highly interactive dashboards

A simple mental model

// Server Component

export default async function Page() {
  const products = await getProducts()

  return (
    <main>
      <ProductList products={products} />
    </main>
  )
}

The page can handle data fetching and composition while a smaller child component handles interaction. This keeps the client boundary close to the behavior that actually needs it.

Avoid turning the whole page into a client component

One common mistake is adding the client directive to a high-level component simply because one small section needs interactivity. That can unnecessarily move more of the component tree into the browser.

Where server components usually work well

• Page-level composition
• Static content
• Data fetching
• SEO-focused content
• Product descriptions
• Article pages
• Server-side database access

Where client components make sense

• Interactive filters
• Modals
• Tabs
• Rich editors
• Animations requiring browser state
• Forms with complex client-side behavior

The performance benefit is only part of the story

The real benefit is architectural clarity. When server and client responsibilities are intentional, it becomes easier to understand where data is loaded, where state lives, and why JavaScript is being sent to the browser.

FAQ