Server and client component composition in NextJS

Introduction

Server and client component composition helps you build fast and interactive web pages by mixing parts that run on the server with parts that run in the browser.

When you want to fetch data securely on the server and show it on the page.

When you need interactive buttons or forms that respond to user clicks.

When you want to keep the page fast by rendering mostly on the server.

When you want to add small interactive parts inside a mostly static page.

When you want to separate concerns: server handles data, client handles UI events.

Syntax

NextJS

// Server component file
export default function ServerComponent() {
  return (
    <div>
      <h1>Server Component</h1>
      <ClientComponent />
    </div>
  )
}

// Client component file (separate file)
'use client'
import { useState } from 'react'

export function ClientComponent() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

Server components are the default in Next.js 13 App Router.

Client components must start with 'use client' at the top.

Examples

This example shows a page with a server component and a client component inside it.

NextJS

import ClientOnly from './ClientOnly' // 'use client' component

export default function Page() {
  return (
    <main>
      <ServerOnly />
      <ClientOnly />
    </main>
  )
}

function ServerOnly() {
  return <p>This runs on the server.</p>
}

// ./ClientOnly.tsx
'use client'
import { useState } from 'react'

function ClientOnly() {
  const [text, setText] = useState('')
  return <input value={text} onChange={e => setText(e.target.value)} />
}

Here the whole file is a client component because of 'use client'. It can be used inside a server component.

NextJS

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

export default function Page() {
  return (
    <div>
      <h1>Server Component</h1>
      <Counter />
    </div>
  )
}

Sample Program

This example shows a server component HomePage that renders a client component Clicker. The client component handles user clicks and updates the count.

It uses semantic HTML and an ARIA label for accessibility.

NextJS

import Clicker from './Clicker' // 'use client' component

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to the Server Component</h1>
      <Clicker />
    </main>
  )
}

// ./Clicker.tsx
'use client'
import { useState } from 'react'

export default function Clicker() {
  const [clicks, setClicks] = useState(0)
  return (
    <button onClick={() => setClicks(clicks + 1)} aria-label="Click counter button">
      Clicked {clicks} times
    </button>
  )
}

Important Notes

Always put 'use client' at the very top of client components.

Server components cannot use React hooks like useState or useEffect.

Client components can be nested inside server components to add interactivity.

Summary

Server components render on the server and are fast and secure.

Client components run in the browser and handle user interaction.

Use composition to combine server and client components for best performance and interactivity.

Practice

1. Which statement best describes a server component in Next.js?

easy

A. It runs in the browser and handles user interactions.

B. It is used only for styling components.

C. It renders on the server and cannot use browser-only APIs.

D. It requires client-side JavaScript to render.

Solution

1. Step 1: Understand server component behavior

   Server components render on the server and do not have access to browser APIs like window or document.

2. Step 2: Compare with client components

   Client components run in the browser and handle user interactions, unlike server components.

3. Final Answer:

   It renders on the server and cannot use browser-only APIs. -> Option C

4. Quick Check:

   Server component = renders on server [OK]

Hint: Server components run on server, no browser APIs [OK]

Common Mistakes:

• Confusing server components with client components
• Thinking server components handle user events
• Assuming server components require client JS

2. Which of the following is the correct way to mark a React component as a client component in Next.js?

easy

A. Use export default client() instead of export default.

B. Wrap the component with <ClientComponent> tag.

C. Import the component from next/client package.

D. Add the directive "use client" at the top of the file.

Solution

1. Step 1: Recall client component syntax

   In Next.js, to mark a component as client-side, you add the directive "use client" at the very top of the file.

2. Step 2: Evaluate other options

   Wrapping with a tag or importing from next/client is not valid syntax. Exporting with client() is not a Next.js pattern.

3. Final Answer:

   Add the directive "use client" at the top of the file. -> Option D

4. Quick Check:

   Client component = "use client" directive [OK]

Hint: Look for "use client" at file top to mark client component [OK]

Common Mistakes:

• Trying to wrap components with special tags
• Importing from non-existent packages
• Misusing export syntax for client components

3. Given the following code, what will be rendered on the page?

/* ServerComponent.jsx */
export default function ServerComponent() {
  return (
    

      
Server
      
    
  );
}

/* ClientComponent.jsx */
"use client";
export default function ClientComponent() {
  return Click me;
}

medium

A. Error: ClientComponent cannot be used inside ServerComponent

B. ServerClick me

C. Server

D. Click me

Solution

1. Step 1: Understand component composition

   The ServerComponent renders on the server and includes ClientComponent inside its JSX.

2. Step 2: Client component renders on client

   ClientComponent marked with "use client" runs in the browser and renders a button.

3. Final Answer:

   <div><h1>Server</h1><button>Click me</button></div> -> Option B

4. Quick Check:

   Server + Client components compose to render combined output [OK]

Hint: Server can include client components; client renders interactive parts [OK]

Common Mistakes:

• Thinking client components cannot be nested inside server components
• Expecting only server content to render
• Confusing error with valid composition

4. What is the main issue with this code snippet?

"use client";
export default function ServerComponent() {
  return 
Server content
;
}

medium

A. There is no issue; this code works fine.

B. Client components cannot be named ServerComponent.

C. The component is marked as client but named ServerComponent, causing confusion.

D. Server components cannot have "use client" directive; this causes a runtime error.

Solution

1. Step 1: Analyze the "use client" directive usage

   The directive "use client" marks the component as a client component, so it runs in the browser.

2. Step 2: Check component naming and behavior

   The name ServerComponent is misleading, but component names do not dictate behavior. The "use client" directive determines it is a client component. There are no syntax errors or runtime issues; the code is valid.

3. Final Answer:

   There is no issue; this code works fine. -> Option A

4. Quick Check:

   "use client" determines client behavior regardless of name [OK]

Hint: Directives like "use client" control behavior, not component names [OK]

Common Mistakes:

• Thinking "use client" causes runtime errors
• Believing component names enforce server/client type
• Assuming directive + server name = error

5. You want to build a Next.js page that fetches data on the server and displays it, but also includes a button that updates the UI on click. How should you compose your components?

hard

A. Create a server component to fetch and display data, then include a client component for the button inside it.

B. Make the entire page a client component to handle data fetching and button clicks.

C. Use only server components and handle button clicks with server-side events.

D. Fetch data in a client component and render the button in a server component.

Solution

1. Step 1: Separate data fetching and interactivity

   Data fetching is best done in server components for performance and security.

2. Step 2: Use client component for UI interaction

   The button requires client-side interactivity, so it should be a client component nested inside the server component.

3. Final Answer:

   Create a server component to fetch and display data, then include a client component for the button inside it. -> Option A

4. Quick Check:

   Server fetch + client button = best practice [OK]

Hint: Fetch on server, interactive parts on client components [OK]

Common Mistakes:

• Making entire page client component losing server benefits
• Trying to handle clicks only on server
• Fetching data inside client component unnecessarily