Server Components

## 1. Learning Objectives By the end of this lesson, you will be able to: - Explain why App Router components are Server Components by default. - Fetch data directly inside a Server Component. - Identify server-only capabilities and client-only limitations. - Pass server-fetched data into small Client Components. Difficulty: Beginner. ## 2. Prerequisites - App Router route files. - SSR and SSG basics. - React component composition. ## 3. Overview Server Components render on the server and do not ship their component code to the browser. In the App Router, every component is a Server Component unless a file starts with `"use client"`. ## 4. Why This Topic Matters Server Components reduce client JavaScript, keep secrets and database access on the server, and make data fetching feel like normal async component code. They are one of the biggest architectural differences between traditional React SPAs and modern Next.js. ## 5. Real-World Analogy A Server Component is like a chef preparing the meal in the kitchen and sending the finished plate to the table. The customer sees the result, but the kitchen tools and recipe secrets stay behind the scenes. ## 6. Core Concepts | Concept | Meaning | |---|---| | Server Component | React component rendered on the server by default in App Router. | | RSC payload | Serialized description of the rendered component tree. | | Server-only code | Logic that can access databases, files, secrets, or internal services. | | Client boundary | A `"use client"` component imported under a server tree. | | Zero client JS | Server Component code is not bundled for the browser. | ## 7. Syntax & API Reference

Server Components can use `await`, read server resources, and pass serializable props to Client Components. ## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The user list renders on the server, while only the favorite interaction needs client JavaScript. ## 10. Interactive Playground Try this: - Add `console.log` in a Server Component and observe it in server logs. - Import a Client Component into the Server Component. - Try using `useState` in the Server Component and read the error. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Using `useState` in a Server Component | Developers expect normal React client behavior. | Move stateful UI into a Client Component. | | Passing functions to Client Components | Props cross a serialization boundary. | Pass serializable data or use Server Actions for mutations. | | Importing browser-only libraries on the server | The component runs in Node/server runtime. | Isolate browser libraries behind `"use client"`. | ## 12. Best Practices - Keep pages and layouts as Server Components by default. - Fetch data on the server when it is needed for first render. - Keep secrets, tokens, and database clients server-side. - Push `"use client"` down to the smallest interactive component. - Pass only serializable props across the server-client boundary. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Server rendering | Browser receives HTML | Broad support. | | Server-only logic | No browser bundle impact | Runs before content reaches the browser. | | Client boundaries | Require JavaScript for interactivity | Only interactive parts hydrate. | ## 14. Interview Questions **Easy:** Are App Router components Server Components by default? Answer: Yes. **Medium:** Why do Server Components reduce client JavaScript? Answer: Their component code runs on the server and is not bundled for the browser. **Hard:** How should a Server Component handle a button click? Answer: It should render a child Client Component for the click interaction or use a form with a Server Action. ## 15. Debugging Exercise Broken snippet:

Solution This is interactive browser state. Move the button into a Client Component with `"use client"` at the top. ## 16. Practice Exercises - Easy: Build a Server Component that renders a list from an async function. - Medium: Pass server-fetched data into a small Client Component. - Hard: Split a dashboard into server-rendered data panels and client-only controls. ## 17. Scenario-Based Challenge A team put `"use client"` on every page because one dropdown needs state. How should you refactor? Walkthrough Remove `"use client"` from the page, create a dedicated dropdown Client Component, and pass it only the serializable data it needs. ## 18. Quick Quiz 1. What is the default component type in App Router? Answer: Server Component. 2. Can Server Components use `useEffect`? Answer: No. 3. Can Server Components read server-only data? Answer: Yes. 4. What marks a client boundary? Answer: `"use client"`. 5. Should secrets go into Client Components? Answer: No. ## 19. Summary & Key Takeaways - Server Components are the App Router default. - They run on the server and reduce browser JavaScript. - They can await data directly. - They cannot use browser APIs or event handlers. - Use Client Components for interactive islands. ## 20. Cheat Sheet | Need | Server Component? | |---|---| | Fetch product list | Yes | | Read database | Yes | | Use `window` | No | | Handle click state | No | | Render static page shell | Yes | ## 21. Further Reading - Next.js Docs: Server Components. - React Docs: Server Components. - Next.js Docs: Composition Patterns. ## 22. Next Lesson Preview Next, you will learn Client Components and how to use them without giving up the benefits of server-first rendering.