Suggest an editImprove this articleRefine the answer for “Which tasks are best solved with server components?”. 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 best used for tasks where **interactivity isn't needed**, but **data, performance, and security** matter. **Key point:** everything that **doesn't require reacting to user actions** is better built as a server component.Shown above the full answer for quick recall.Answer (EN)ImageServer components in Next.js are best used for tasks where **interactivity isn't needed**, but **data, performance, and security** matter. Below is a point-by-point breakdown, exactly in the form expected at interviews. --- ## Short answer (for the interview) **Server components are suited for:** - fetching and preparing data - rendering static and semi-static content - working with a DB and secrets - building the page's core structure Everything that **doesn't require reacting to user actions** is better built as a server component. --- ## 1. Data fetching (fetch, DB, backend) ### Why the server: - no CORS - no secret leaks - faster (requests originate from the data center) ```tsx // Server Component export default async function ProductsPage() { const products = await getProductsFromDB() return <ProductsList products={products} /> } ``` A typical question: **"Why not fetch on the client?"** Answer: because the server is faster, safer, and doesn't increase the JS bundle. --- ## 2. Working with the database Server components **can talk to the DB directly**: - Prisma - SQL - MongoDB - internal services ```ts const users = await prisma.user.findMany() ``` - safe - simple - no API layers --- ## 3. Working with secrets and private data Server components are suited for: - API keys - tokens - private endpoints - internal services ```ts process.env.API_SECRET ``` This kind of code **never reaches the browser**. --- ## 4. Rendering static and SEO content Server components are ideal for: - landing pages - blogs - catalog pages - SEO pages Reasons: - ready-made HTML - fast display - good SEO - less JS --- ## 5. Composing the page (layout) Server components are convenient for: - layouts - headers - footers - navigation - pages (`page.tsx`) ```tsx export default function Layout({ children }) { return ( <> <Header /> {children} <Footer /> </> ) } ``` If the header isn't interactive, it should be a server component. --- ## 6. Preprocessing and data aggregation Server components are good for: - combining data from several sources - filtering - sorting - counting ```ts const data = await Promise.all([ getUsers(), getOrders() ]) ``` The client receives an **already-ready result**, not the logic. --- ## 7. Minimizing client-side JavaScript Every client component: - increases the bundle - slows down loading - requires hydration So: > **if a component can be made a server component, it should be made a server component** --- ## Typical tasks - a short list - data loading - pages and layouts - SEO content - working with a DB - working with secrets - data preparation - rendering lists without interactivity --- ## When NOT to use server components - buttons and clicks - forms with live validation - modals - dropdown / tabs - animations - UI state Here you need client components.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.