Suggest an editImprove this articleRefine the answer for “What are Server Components in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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. **Key point:** this is **React without client-side JavaScript**.Shown above the full answer for quick recall.Answer (EN)Image**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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.