In the Next.js App Router, components render differently depending on whether they're Server Components (default) or Client Components (marked with "use client"):
Server Components (Default)
By default, all components in the App Router are Server Components. 1 These components:
- Render on the server
- Generate HTML on the server
- Don't require client-side JavaScript for rendering
- Are automatically statically rendered at build time (unless using dynamic functions or data fetching)
Client Components (with "use client")
When you add the "use client" directive at the top of a file, you're declaring that component and all its imports as Client Components. 2 These components:
- Are pre-rendered on the server as HTML for the initial page load
- Are hydrated on the client to make them interactive
- Can use React hooks like
useState, event handlers, and browser APIs
When to use each type
Use Server Components (no "use client") when:
- You need to fetch data from the server
- You want to access backend resources directly
- You want to keep sensitive information on the server
- You want to reduce JavaScript sent to the client
Use Client Components ("use client") when: 2
- You need interactivity and event listeners (onClick, etc.)
- You need to use React hooks (useState, useEffect, etc.)
- You need access to browser-only APIs
- You need component lifecycle events
Remember that you don't need to add "use client" to every component that needs client-side functionality. Once you define the boundary with "use client", all child components imported into it become part of the client bundle.
170d ago
Both Server Components and Client Components can be statically rendered in Next.js App Router, but they work differently:
Static Rendering of Server Components
Server Components are statically rendered by default at build time. 1 This means:
- The React Server Component Payload (the rendered result) is cached on the server
- The HTML is generated at build time
- The cached result is reused for subsequent requests
- No JavaScript for the component itself is sent to the client
Static Rendering of Client Components
Client Components marked with "use client" can also be part of statically rendered routes: 1
- Their initial HTML is generated at build time
- Their JavaScript bundle is still sent to the client
- They're hydrated on the client to become interactive
- The pre-rendered HTML provides the initial view before hydration completes
What Makes a Route Dynamic
A route becomes dynamically rendered (not static) when: 1
- Using dynamic functions like
cookies(),headers(), orsearchParams - Using uncached data fetching or opting out of caching with
fetch(..., { cache: 'no-store' }) - Using route handlers with dynamic functions
- Using the
dynamic = 'force-dynamic'orrevalidate = 0route segment config options
If none of these dynamic features are used, Next.js will statically render both Server and Client Components by default, optimizing performance while preserving interactivity where needed.
The key difference is that Server Components don't send component JavaScript to the client when statically rendered, while Client Components still send their JavaScript for hydration, even when pre-rendered as static HTML.
170d ago