ReviseAlgo Logo

Components

Server Components

Learn how Server Components work in the Next.js App Router, what they can access, and how to keep server-only work out of the browser.

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

    ConceptMeaning
    Server ComponentReact component rendered on the server by default in App Router.
    RSC payloadSerialized description of the rendered component tree.
    Server-only codeLogic that can access databases, files, secrets, or internal services.
    Client boundaryA "use client" component imported under a server tree.
    Zero client JSServer 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

    MistakeWhy It HappensCorrect Approach
    Using useState in a Server ComponentDevelopers expect normal React client behavior.Move stateful UI into a Client Component.
    Passing functions to Client ComponentsProps cross a serialization boundary.Pass serializable data or use Server Actions for mutations.
    Importing browser-only libraries on the serverThe 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

    FeatureBrowser ImpactNotes
    Server renderingBrowser receives HTMLBroad support.
    Server-only logicNo browser bundle impactRuns before content reaches the browser.
    Client boundariesRequire JavaScript for interactivityOnly 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

    NeedServer Component?
    Fetch product listYes
    Read databaseYes
    Use windowNo
    Handle click stateNo
    Render static page shellYes

    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.