Two kinds of components
Modern Next.js distinguishes between server components, which run on the server, and client components, which run in the browser. This split is powerful but can be confusing, because where a component runs determines what it can and cannot do. Understanding the difference, and the boundary between them, is essential to building Next.js apps correctly and avoiding a class of common mistakes that stem from misunderstanding which environment code executes in.
What server components do
Server components run on the server and are great for fetching data and rendering content, with direct access to server-side resources like databases, and without sending their code to the browser. This keeps the client bundle smaller and can improve performance. However, because they run on the server, they cannot use browser-only features or interactivity like click handlers directly. They are ideal for the parts of your UI that display data rather than respond to user actions.
What client components do
Client components run in the browser and handle interactivity: responding to clicks, managing state that changes as the user interacts, and using browser-only features. They are necessary wherever your interface needs to react to the user. The trade-off is that their code is sent to the browser, adding to the bundle, and they cannot directly access server-only resources. You use client components for the interactive parts of your app.
The rendering boundary
The key concept is the boundary between server and client components. You compose an app from both, marking which are client components, and data and props flow across this boundary in specific ways. Understanding that server components can include client components, but the reverse has constraints, and that some things can only pass across the boundary in certain forms, is central to structuring a Next.js app correctly. Misplacing this boundary causes many errors.
Common mistakes and versions
Common mistakes include trying to use interactivity or browser features in a server component, or accidentally pulling large dependencies into client components and bloating the bundle. Another is misunderstanding how data flows across the boundary. Because this area of Next.js has evolved, it is important to verify behavior against the specific framework version you are using, since details change between versions. Checking the current docs for your version prevents confusion from outdated assumptions.
The bottom line
Next.js server components run on the server for data and content with no client code, while client components run in the browser for interactivity, separated by a rendering boundary that governs what each can do and how data flows. Common mistakes come from misplacing this boundary. Verify behavior against your framework version. Understanding the distinction is essential to building Next.js apps correctly and efficiently.
Related on Skillo
See also: What is server-side rendering? Explained, How to diagnose a frontend hydration mismatch.
Sources
Published date reflects the original event date (2026-10-23). This article is original Skillo editorial written from the sources above; facts were verified in September 2026.
Leave a Reply