Client component boundaries in NextJS - Mini Project: Build & Apply

Client Component Boundaries in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message and a button to update the message. The greeting message is static and can be rendered on the server. The button needs to update the message on the client side when clicked.This project will teach you how to separate server and client components in Next.js using client component boundaries.

🎯 Goal: Create a Next.js app with two components: a server component that renders a client component, and a client component that displays and updates a greeting message when the button is clicked.

📋 What You'll Learn

Create a server component that renders the client component

Create a client component with a greeting message and a button to update it

Use the 'use client' directive to mark the client component

Use React's useState hook in the client component to manage the message

Render the client component inside the server component

💡 Why This Matters

🌍 Real World

Separating server and client components is essential in Next.js apps to optimize performance and user experience. Server components can render static content fast, while client components handle interactivity.

💼 Career

Understanding client component boundaries is important for Next.js developers to build scalable, maintainable web apps with clear separation of concerns.

1

Create the server component with initial greeting

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

NextJS

# Create the GreetingServer component
# Your code here

Need a hint?

Remember, server components are the default in Next.js. Just export a function that returns JSX.

2

Add a client component with a button

Create a client component called GreetingClient with the directive 'use client' before its export. Inside it, create a button with the text "Update Greeting".

NextJS

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

// Create GreetingClient component below
# Your code here

Need a hint?

Put 'use client' before the client component definition. The button doesn't need an onClick handler yet.

3

Add state and update logic in the client component

Import { useState } from 'react' at the top. In GreetingClient, use useState to create a message state initialized to "Hello from the server!". Define a updateMessage function inside GreetingClient that updates message to "Hello from the client!". Render <p>{message}</p> above the button and set onClick={updateMessage} on the button. In GreetingServer, replace the static <p> with <GreetingClient />.

NextJS

import { useState } from 'react'

export default function GreetingServer() {
  return (
    
      {/* Render GreetingClient here instead of static p */}
    
  )
}

'use client'

export function GreetingClient() {
  // Add state, update function, {message}, and onClick
  return (
    Update Greeting
  )
}

Need a hint?

Server components cannot use hooks like useState, so manage state in the client component. Update GreetingServer to render GreetingClient.

4

Mark the client component boundary and finalize

Ensure the GreetingClient component has the 'use client' directive before its definition. Export GreetingServer as default (server component) and GreetingClient as a named export (client component). The server component renders the client component, demonstrating the boundary.

NextJS

import { useState } from 'react'

export default function GreetingServer() {
  const [message, setMessage] = useState('Hello from the server!')

  function updateMessage() {
    setMessage('Hello from the client!')
  }

  return (
    
      {message}
      
    
  )
}

// Add 'use client' directive and export GreetingClient
# Your code here

Need a hint?

The 'use client' directive marks the boundary. Server components render client components but cannot use client hooks.