ReviseAlgo Logo

Rendering

CSR

Learn client-side rendering in Next.js, when browser fetching is useful, and how to avoid turning every page into a slow SPA.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain what client-side rendering means in a Next.js app.
  • Build a small Client Component that fetches data in the browser.
  • Decide when CSR is useful and when it hurts performance or SEO.
  • Separate server-rendered page shells from interactive client islands.

    • Difficulty: Beginner.

    2. Prerequisites

  • React hooks, especially useState and useEffect.
  • Next.js App Router basics.
  • Basic understanding of browser network requests.

    • 3. Overview

    Client-side rendering means the browser downloads JavaScript and renders or updates UI after hydration. In Next.js, CSR usually appears inside Client Components marked with "use client" while the surrounding route can still be server-rendered.

    4. Why This Topic Matters

    CSR is useful for highly interactive, user-specific, or browser-only UI. But if an entire page waits for browser JavaScript before showing meaningful content, users may see slower first load and crawlers may receive less useful initial HTML.

    5. Real-World Analogy

    CSR is like shipping flat-pack furniture to the user and asking the browser to assemble it. That is flexible for personal customization, but slower than receiving a finished chair when the goal is simply to sit down quickly.

    6. Core Concepts

    ConceptMeaning
    HydrationReact attaches event handlers to server-rendered HTML.
    Client ComponentComponent marked with "use client" and bundled for the browser.
    Browser fetchData request made after the page loads in the browser.
    Loading stateUI shown while client data is pending.
    Client islandSmall interactive part inside an otherwise server-rendered route.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The page shell can render on the server, while only the clock runs in the browser.

    10. Interactive Playground

    Try these changes:

  • Add a loading skeleton before client data arrives.
  • Move the browser-only code into a smaller child component.
  • Disable JavaScript and notice which content still appears.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Marking the whole page "use client"It feels simpler at first.Keep the page server-rendered and isolate interactive widgets.
    Fetching SEO-critical content in useEffectHabit from SPA React apps.Fetch critical content on the server.
    Ignoring loading and error statesClient fetches happen after render.Always model pending, success, and failure UI.

    12. Best Practices

  • Use CSR for browser-only APIs, live widgets, and post-load personalization.
  • Keep Client Components as small as possible.
  • Avoid client-fetching the content needed for SEO or first paint.
  • Cache client data with a dedicated client data library when requests repeat.
  • Provide accessible loading and error states.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Client ComponentsRequires JavaScriptNo interactivity without JS.
    fetch in browserModern browser APIPolyfills may be needed for very old browsers.
    useEffectReact client runtimeRuns only after hydration.

    14. Interview Questions

    Easy: What does CSR stand for?

    Answer: Client-side rendering.

    Medium: Why can CSR hurt first load performance?

    Answer: The browser must download, parse, and execute JavaScript before client-rendered content appears or updates.

    Hard: How do you use CSR without sacrificing SEO?

    Answer: Render SEO-critical content on the server and keep CSR limited to interactive or user-specific islands.

    15. Debugging Exercise

    Broken snippet:

    Solution window is browser-only. Move this logic into a Client Component and read it inside useEffect or an event handler.

    16. Practice Exercises

  • Easy: Build a Client Component that shows the current time.
  • Medium: Fetch user notifications after hydration.
  • Hard: Convert a fully client-rendered dashboard into a server page with two client islands.

    • 17. Scenario-Based Challenge

    A product page renders all product data in useEffect. Users see a spinner first, and search previews are empty. What should change?

    Walkthrough

    Fetch product title, price, images, and description on the server. Keep CSR for cart buttons, recently viewed items, or browser-specific personalization.

    18. Quick Quiz

    1. What marks a Client Component? Answer: "use client". 2. When does useEffect run? Answer: After hydration in the browser. 3. Should SEO-critical data rely only on CSR? Answer: No. 4. What is hydration? Answer: React attaching behavior to rendered HTML. 5. What is a client island? Answer: A small browser-rendered component inside a server-rendered page.

    19. Summary & Key Takeaways

  • CSR runs UI logic in the browser.
  • Next.js can mix server-rendered pages with client-rendered islands.
  • CSR is useful for interactivity and browser-only APIs.
  • Overusing CSR can hurt first paint and SEO.
  • Keep Client Components small and purposeful.

    • 20. Cheat Sheet

    NeedUse CSR?
    Live browser timeYes
    SEO product descriptionNo
    Authenticated notification dropdownOften yes
    Public blog post bodyUsually no
    Drag-and-drop builderYes

    21. Further Reading

  • Next.js Docs: Client Components.
  • React Docs: Effects.
  • web.dev: Rendering on the Web.

    • 22. Next Lesson Preview

    Next, you will learn SSR, where the server prepares fresh HTML for each request.