Interleaving server and client in NextJS - Mini Project: Build & Apply

Interleaving Server and Client in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of books fetched from the server and allows users to add a new book on the client side.This project will teach you how to combine server components and client components in Next.js 14 using the App Router.

🎯 Goal: Create a Next.js app with a server component that fetches and displays a list of books, and a client component that lets users add a new book to the list.

📋 What You'll Learn

Create a server component that fetches a list of books

Create a client component with a form to add a new book

Use React hooks in the client component

Interleave the client component inside the server component

Use Next.js App Router conventions

💡 Why This Matters

🌍 Real World

Many modern web apps use Next.js to fetch data on the server for fast loading and SEO, while using client components for interactive features like forms and buttons.

💼 Career

Understanding how to interleave server and client components is essential for building scalable, performant React apps with Next.js, a popular framework used by many companies.

1

Create the initial books data array

Create a server component called BooksList that defines a constant array books with these exact objects: { id: 1, title: 'The Hobbit' }, { id: 2, title: '1984' }, and { id: 3, title: 'Pride and Prejudice' }.

NextJS

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

Hint

Define a constant array named books inside the BooksList function.

2

Add a client component for adding books

Create a client component called AddBookForm that uses useState to hold a title string and a function setTitle. Initialize title to an empty string.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];
}

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

function AddBookForm() {
  // Your code here
}

Hint

Use useState to create title and setTitle inside AddBookForm.

3

Render the books list and add the client form

Inside the BooksList server component, return a <div> that contains an <h2> with text 'Books', an unordered list <ul> that maps over books to render each book's title inside a <li> with a key of book.id, and include the <AddBookForm /> client component below the list.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];

  // Your code here
}

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

function AddBookForm() {
  const [title, setTitle] = useState('');
}

Hint

Use JSX to render the list and include the AddBookForm component inside the BooksList return.

4

Complete the client form with input and button

Inside the AddBookForm client component, return a <form> with an <input> of type 'text' that has value bound to title and an onChange handler that updates title using setTitle. Add a <button> with text 'Add Book' and type 'submit'.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];

  return (
    
      Books
      
        {books.map(book => (
          {book.title}
        ))}
      
      
    
  );
}

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

function AddBookForm() {
  const [title, setTitle] = useState('');

  // Your code here
}

Hint

Use JSX to create a form with controlled input and a submit button inside AddBookForm.

Practice

1. In Next.js, what is the main benefit of interleaving server and client components?

easy

A. It disables server-side rendering completely.

B. It improves performance by loading data on the server and handling interactions on the client.

C. It forces all components to run only on the client side.

D. It allows you to write all code in one file without separation.

Solution

1. Step 1: Understand server and client roles

   Server components fetch data and render HTML, while client components handle user interactions.

2. Step 2: Identify the benefit of mixing them

   Combining them improves performance by reducing client work and speeding up data loading.

3. Final Answer:

   It improves performance by loading data on the server and handling interactions on the client. -> Option B

4. Quick Check:

   Interleaving = Better performance [OK]

Hint: Remember: server for data, client for interaction [OK]

Common Mistakes:

• Thinking all code runs only on client
• Believing interleaving disables server rendering
• Assuming no performance benefit

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

easy

A. Add client: true in the component's props.

B. Wrap the component with <ClientComponent> tags.

C. Use export default clientComponent() instead of a normal export.

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

Solution

1. Step 1: Recall client component syntax

   Next.js requires 'use client' directive at the top of the file to mark it as client.

2. Step 2: Check other options

   Wrapping tags, special exports, or props flags are not valid Next.js patterns.

3. Final Answer:

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

4. Quick Check:

   Client component directive = 'use client' [OK]

Hint: Look for 'use client' at file top to mark client components [OK]

Common Mistakes:

• Trying to wrap components with special tags
• Using props to mark client components
• Confusing export syntax for client marking

3. Given this Next.js code snippet, what will be rendered on the page?

export default function ServerComponent() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return (
    <div>
      <ClientComponent />
      <p>Data loaded</p>
    </div>
  );
}

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

medium

A. Only the paragraph 'Data loaded' because ClientComponent is not marked as client.

B. A button showing 'Clicked 0 times' and a paragraph 'Data loaded'.

C. An error because fetch is used incorrectly in ServerComponent.

D. Nothing renders because ClientComponent is inside ServerComponent.

Solution

1. Step 1: Check ClientComponent usage

   ClientComponent uses useState, so it must be marked with 'use client' directive to work as client component.

2. Step 2: Analyze missing 'use client' directive

   Without 'use client', ClientComponent is treated as server component, but hooks are invalid there, causing it not to render properly.

3. Final Answer:

   Only the paragraph 'Data loaded' because ClientComponent is not marked as client. -> Option A

4. Quick Check:

   Missing 'use client' = ClientComponent won't render [OK]

Hint: Client components need 'use client' directive to render hooks [OK]

Common Mistakes:

• Assuming ClientComponent renders without 'use client'
• Thinking fetch usage causes error here
• Believing nested client components always render

4. Identify the error in this Next.js component interleaving code:

'use client';

export default function ClientComponent() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return <div>Data count: {data.length}</div>;
}

medium

A. Missing 'use server' directive at the top of the file.

B. The component should not return JSX inside a client component.

C. Using fetch directly in a client component without async/await causes a Promise error.

D. The fetch URL is invalid syntax.

Solution

1. Step 1: Understand fetch in client components

   fetch returns a Promise; using it directly without awaiting causes data to be a Promise, not the actual data.

2. Step 2: Identify the error in rendering

   Trying to access data.length on a Promise causes runtime error because Promise has no length property.

3. Final Answer:

   Using fetch directly in a client component without async/await causes a Promise error. -> Option C

4. Quick Check:

   Fetch returns Promise; must await in client [OK]

Hint: Always await fetch in client components to get data [OK]

Common Mistakes:

• Thinking 'use server' is needed in client components
• Believing JSX can't be returned in client components
• Assuming fetch URL syntax is wrong

5. You want to display a list of products fetched on the server and allow users to add products to a cart on the client. Which is the best way to interleave server and client components in Next.js?

hard

A. Fetch products in a server component and render a client component for the add-to-cart buttons inside it.

B. Fetch products inside a client component and handle add-to-cart in the same component.

C. Fetch products in a client component and render server components for buttons.

D. Fetch products and handle add-to-cart both in server components only.

Solution

1. Step 1: Separate data fetching and interactivity

   Fetching products is best done on the server for performance and SEO benefits.

2. Step 2: Use client components for user actions

   Add-to-cart buttons require client interactivity, so they should be client components nested inside the server component.

3. Final Answer:

   Fetch products in a server component and render a client component for the add-to-cart buttons inside it. -> Option A

4. Quick Check:

   Server fetch + client interactivity = Fetch products in a server component and render a client component for the add-to-cart buttons inside it. [OK]

Hint: Server fetch data, client handle clicks inside [OK]

Common Mistakes:

• Fetching data on client causing slower load
• Trying to handle interactivity in server components
• Rendering server components inside client components incorrectly