Server and client component composition in NextJS - Mini Project: Build & Apply

Server and Client Component Composition in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message and a button to update the greeting. The greeting text is fetched on the server, but the button to change it needs to work on the client side.

🎯 Goal: Build a Next.js app with a server component that fetches and displays a greeting, and a client component that lets the user update the greeting message interactively.

📋 What You'll Learn

Create a server component that fetches a greeting message

Create a client component with a button to update the greeting

Compose the client component inside the server component

Use React hooks in the client component to handle state

💡 Why This Matters

🌍 Real World

Many modern web apps use server components to fetch data and client components for interactive UI parts. This pattern improves performance and user experience.

💼 Career

Understanding server and client component composition is essential for Next.js developers building scalable and maintainable web applications.

1

Create the Server Component with Greeting Data

Create a server component called GreetingServer that returns a <div> containing the text "Hello from the server!" inside a <p> tag.

NextJS

# Create a server component GreetingServer that returns a div with a p tag containing "Hello from the server!"

export default function GreetingServer() {
    // Your code here
}

Hint

Remember, a server component is a normal React function that returns JSX. Just return a div with a paragraph inside.

2

Create the Client Component with State and Button

Create a client component called GreetingClient that uses useState to hold a greeting string initialized to "Hello from the client!". Render a <p> showing the greeting and a <button> with text "Change Greeting". When the button is clicked, update the greeting to "Greeting updated!". Add the directive "use client" at the top.

NextJS

export default function GreetingServer() {
    return (
        
            Hello from the server!
        
    );
}

// Create a client component GreetingClient with useState and a button

"use client"

function GreetingClient() {
    // Your code here
}

Hint

Remember to add "use client" at the top and import useState from React. Use a button with an onClick handler to update the greeting.

3

Compose Client Component inside Server Component

Modify the GreetingServer component to import and render the GreetingClient component below the server greeting paragraph inside the <div>.

NextJS

import GreetingClient from './GreetingClient';

export default function GreetingServer() {
    return (
        
            Hello from the server!
            {/* Render GreetingClient here */}
        
    );
}

"use client"

import { useState } from 'react';

function GreetingClient() {
    const [greeting, setGreeting] = useState("Hello from the client!");

    return (
        
            {greeting}
             setGreeting("Greeting updated!")}>Change Greeting
        
    );
}

Hint

Render the client component inside the server component by adding <GreetingClient /> inside the div.

4

Add Accessibility and Responsive Styling

Add an aria-label attribute with value "Change greeting button" to the <button> in GreetingClient. Also, add a simple inline style to the <div> in GreetingServer to center the content with textAlign: 'center'.

NextJS

"use client"

import { useState } from 'react';

function GreetingClient() {
    const [greeting, setGreeting] = useState("Hello from the client!");

    return (
        
            {greeting}
            {/* Add aria-label to button below */}
             setGreeting("Greeting updated!")}>Change Greeting
        
    );
}

export default function GreetingServer() {
    return (
        
            Hello from the server!
            
        
    );
}

Hint

Use the aria-label attribute on the button for accessibility. Add a style prop with { textAlign: 'center' } to the div in the server component.

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