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

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

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
  )
}

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

Hint

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

Practice

1. What is the purpose of marking a component with "use client"; in Next.js?

easy

A. To optimize the component for server-side rendering.

B. To make the component run only on the server.

C. To disable the component from rendering.

D. To tell Next.js this component should run in the browser.

Solution

1. Step 1: Understand client component marking

   Adding "use client"; at the top of a file tells Next.js this component runs in the browser, enabling interactivity.

2. Step 2: Differentiate from server components

   Server components run on the server and do not have this directive. Marking a component as client enables browser-only features.

3. Final Answer:

   To tell Next.js this component should run in the browser. -> Option D

4. Quick Check:

   Client components = "use client" [OK]

Hint: Look for "use client" to identify browser-run components [OK]

Common Mistakes:

• Thinking "use client" makes component server-only
• Confusing client components with disabling rendering
• Assuming it optimizes server rendering

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

easy

A. Add "use client"; at the top of the component file.

B. Wrap the component in <Client></Client> tags.

C. Add client: true in the component props.

D. Import the component from a special client folder.

Solution

1. Step 1: Recall client component syntax

   Next.js requires "use client"; at the very top of the file to mark it as a client component.

2. Step 2: Evaluate other options

   Wrapping in tags, adding props, or importing from folders are not valid Next.js client component patterns.

3. Final Answer:

   Add "use client"; at the top of the component file. -> Option A

4. Quick Check:

   Client component syntax = "use client" [OK]

Hint: Always place "use client" as the first line in the file [OK]

Common Mistakes:

• Trying to mark client components via props or wrappers
• Placing "use client" inside the component function
• Assuming folder structure controls client behavior

3. Given this Next.js component file content:

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

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

What will happen when this component is rendered in a Next.js app?

medium

A. The component will throw an error because useState is not allowed.

B. The button will display and update the count on clicks in the browser.

C. The button will render but clicks will not update the count.

D. The component will only render on the server and not be interactive.

Solution

1. Step 1: Identify client component usage

   The file starts with "use client" so it runs in the browser and can use hooks like useState.

2. Step 2: Understand interactivity

   The button uses onClick to update state, so clicks will increase the count and re-render the button text.

3. Final Answer:

   The button will display and update the count on clicks in the browser. -> Option B

4. Quick Check:

   Client component + useState = interactive button [OK]

Hint: Client components can use useState and handle events [OK]

Common Mistakes:

• Thinking useState is disallowed in client components
• Assuming server components handle clicks
• Believing the button won't update without extra code

4. Consider this Next.js component file:

import { useState } from 'react';

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

What is the problem with this component regarding client boundaries?

medium

A. It lacks the "use client"; directive, so useState will cause an error.

B. It uses useState incorrectly inside a server component.

C. The onClick handler syntax is invalid in Next.js.

D. The component should be wrapped in a <Client> tag.

Solution

1. Step 1: Check for client directive

   The component uses useState, which requires the component to be a client component marked by "use client".

2. Step 2: Identify missing directive effect

   Without "use client", Next.js treats this as a server component, causing an error when using useState.

3. Final Answer:

   It lacks the "use client"; directive, so useState will cause an error. -> Option A

4. Quick Check:

   useState needs "use client" [OK]

Hint: useState requires "use client" at file top [OK]

Common Mistakes:

• Assuming useState works without "use client"
• Thinking onClick syntax is invalid
• Trying to wrap component in tags for client behavior

5. You have a Next.js app with a server component Profile that fetches user data and a client component EditButton that allows editing the profile. How should you correctly use these components together?

hard

A. Import Profile inside EditButton and mark both with "use client";.

B. Mark Profile with "use client"; and import EditButton without any directive.

C. Import EditButton inside Profile and mark EditButton with "use client"; at its top.

D. Wrap EditButton inside Profile without marking either as client.

Solution

1. Step 1: Understand component boundaries

   Server components can import client components, but client components cannot import server components.

2. Step 2: Apply correct marking

   The EditButton must have "use client" at the top to run in the browser, while Profile remains a server component.

3. Step 3: Correct usage

   Import EditButton inside Profile and mark EditButton with "use client"; this keeps boundaries correct and enables interactivity.

4. Final Answer:

   Import EditButton inside Profile and mark EditButton with "use client"; at its top. -> Option C

5. Quick Check:

   Server imports client; client marked "use client" [OK]

Hint: Server components import client components marked "use client" [OK]

Common Mistakes:

• Marking server components as client unnecessarily
• Trying to import server components inside client components
• Not marking client components with "use client"