nextjs-server-components

Server Components reduce client-side JavaScript and enable server-only data fetching directly in components, eliminating waterfall requests. They keep sensitive logic on the server and compose with Client Components for interactivity, improving Core Web Vitals and Time to Interactive.

Use Server Components for data fetching, database queries, and backend access; they run only on the server and don't send code to the browser. Use Client Components only for interactivity, event listeners, and hooks—import them within Server Components to keep most of your app on the server.

Server Components execute on the server, so you can directly access databases and APIs without exposing credentials to the client. Use fetch with next.revalidate for cacheable queries and server actions for mutations, keeping all sensitive backend access server-only.

Server Components are components that run only on the server and never hydrate on the client; server-side rendering generates HTML but still sends JavaScript. Server Components reduce payload size and eliminate client-side data fetching waterfalls in the App Router.

Yes. Server Actions are async functions you define in Server Components that run on the server and can trigger revalidation with next.revalidate. They handle mutations securely without exposing backend logic and integrate seamlessly with Server Component data fetching.

Server Components are the default in the Next.js App Router and are the recommended pattern for data-intensive pages. The App Router's file-based structure makes it natural to mark components as server or client and compose them together.