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
}

Need a 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
}

Need a 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
        
    );
}

Need a 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!
            
        
    );
}

Need a 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.