Skip to main content

What are Server Components in Next.js?

Next.jsMiddle~2 min read
Suggest an edit

Server Components in Next.js are React components that run only on the server and are not sent to the browser as JavaScript. They let you render the UI by loading data and running server logic before the page reaches the user.

The idea in simple terms

Usually in React:

  • component → JS flies to the browser → runs there → then data is loaded

With Server Components:

  • component → runs on the server
  • the server immediately returns ready HTML
  • the browser doesn't get this component's JS at all

In other words, it's React without client-side JavaScript.

What you can do in Server Components

In Server Components you can:

  • run fetch directly
  • access a database
  • use private API keys
  • read cookies and headers
  • write async/await right in the component

An example in essence:

js
async function Page() { const data = await fetch(...) return <div>{data.title}</div> }

No useEffect, no loaders by default - the data already exists at render time.

What you cannot do in Server Components

You cannot use:

  • useState, useEffect
  • event handlers (onClick, onChange)
  • browser APIs (window, document)
  • interactivity

The reason is simple: the code does not run in the browser.

Server Components and Client Components

In Next.js (App Router):

  • all components are server components by default
  • to make a component client-side, you must explicitly write:
js
"use client"

Client Components are needed when:

  • there is interactivity
  • there is state
  • there are event handlers
  • browser APIs are needed

Important:

A Server Component can import a Client Component, but a Client Component cannot import a Server Component.

Why this is needed at all

Server Components give you:

  • less JavaScript in the browser
  • faster page load
  • better TTFB and Core Web Vitals
  • safer work with data
  • simpler data fetching (no effects)

In effect, this is a shift of logic back to the server, which is often where it belongs.

A typical usage scenario

  • Server Component:
    • loads data
    • renders the main content
  • Client Component:
    • buttons
    • forms
    • filters
    • interactive elements

This approach is now considered the "norm" in the App Router.

Short summary

Server Components are:

  • React components that run only on the server
  • not included in the browser's JS bundle
  • ideal for data fetching and server logic
  • used by default in the App Router
  • interactivity is moved out to Client Components

They make applications faster, simpler, and safer.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit