When to keep components on server in NextJS - Mini Project: Build & Apply

When to Keep Components on Server in Next.js

📖 Scenario: You are building a simple blog homepage using Next.js. You want to decide which parts of the page should be rendered on the server and which parts should be rendered on the client.This helps your page load faster and keeps user interactions smooth.

🎯 Goal: Create a Next.js app with a server component that fetches and displays blog posts, and a client component that handles a like button interaction.

📋 What You'll Learn

Create a server component that fetches blog post data

Create a client component for a like button with interactive state

Use the use client directive for the client component

Compose the client component inside the server component

💡 Why This Matters

🌍 Real World

Many websites use server components to render static content fast and client components for user interactions like buttons and forms.

💼 Career

Understanding when to keep components on the server or client is key for building efficient, scalable Next.js applications in professional web development.

1

Create the blog posts data array

Create a constant called posts that is an array of objects. Each object should have id and title properties with these exact values: { id: 1, title: 'Hello Next.js' } and { id: 2, title: 'Server Components' }.

NextJS

// Create the posts array with two objects
// Your code here

Need a hint?

Use const posts = [ ... ] with two objects inside.

2

Create a client component for the like button

Create a new React component called LikeButton that uses the use client directive at the top. Inside, use useState to track a liked boolean starting as false. Render a button that toggles liked when clicked and shows 'Like' or 'Unlike' accordingly.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Server Components' }
];

// Create LikeButton client component below
// Your code here

Need a hint?

Remember to add 'use client'; at the top and import useState.

3

Create the server component to display posts

Create a default exported React component called BlogPage that renders a <main> element. Inside, map over the posts array and render each post's title inside an <h2> with a key of post.id. Below the list, include the <LikeButton /> component.

NextJS

'use client';

import { useState } from 'react';

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Server Components' }
];

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
     setLiked(!liked)} aria-pressed={liked}>
      {liked ? 'Unlike' : 'Like'}
    
  );
}

// Create BlogPage server component below
// Your code here

Need a hint?

Use posts.map(post => <h2 key={post.id}>{post.title}</h2>) inside <main>.

4

Add accessibility and export the components properly

Ensure the LikeButton component has an aria-pressed attribute on the button for accessibility. Confirm that LikeButton is exported as a named export and BlogPage is the default export.

NextJS

'use client';

import { useState } from 'react';

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Server Components' }
];

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
     setLiked(!liked)} aria-pressed={liked}>
      {liked ? 'Unlike' : 'Like'}
    
  );
}

export default function BlogPage() {
  return (
    
      {posts.map(post => (
        {post.title}
      ))}
      
    
  );
}

// Check accessibility and exports
// Your code here

Need a hint?

Make sure aria-pressed is on the button and exports are correct.