Key Takeaways
- Server Components send zero JavaScript to the browser, reducing bundle size by 30-50% for data-heavy pages.
- They can directly access databases and APIs on the server without creating API endpoints or exposing secrets.
- The 'use client' directive marks interactive components, creating a clear server/client boundary in your codebase.
Server Components vs Client Components
| Aspect | Server Component | Client Component |
|---|---|---|
| JavaScript sent | None (HTML only) | Full component code |
| Can use useState/useEffect | No | Yes |
| Can access database directly | Yes | No (needs API) |
| Can handle onClick/onChange | No | Yes |
| Rendering location | Server only | Server (SSR) + Client (hydration) |
The key mental model: Server Components handle data, Client Components handle interactivity. A product page might use a Server Component to fetch product data from the database and a Client Component for the 'Add to Cart' button.
In Next.js App Router, components are Server Components by default. Only add 'use client' when you need browser APIs, event handlers, or React hooks (useState, useEffect). This naturally minimizes client-side JavaScript.
Frequently Asked Questions
Related Services
Related Terms
Next.js
A React framework for building full-stack web applications with server-side rendering and static generation.
React
A JavaScript library for building user interfaces using reusable components and a virtual DOM.
SSR
Server-Side Rendering. Generating HTML on the server for each request, improving SEO and initial load time.
Need Help With Implementation?
Our team specializes in implementing the solutions described in this glossary.
Get in Touch