Zero bundle size for server components in NextJS - Mini Project: Build & Apply

Zero Bundle Size for Server Components in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of books. You want to use server components to keep the client bundle small and fast.

🎯 Goal: Create a Next.js app with a server component that fetches and displays a list of books. Ensure the component does not add any client-side JavaScript bundle.

📋 What You'll Learn

Create a server component named BooksList that fetches book data.

Use a constant array books with exact book titles and authors.

Render the list of books inside a semantic <section> with a heading.

Export the component as default and ensure it is a server component by using the export const dynamic = 'force-static' directive.

💡 Why This Matters

🌍 Real World

Server components help keep your Next.js app fast by sending only HTML to the client, reducing JavaScript bundle size and improving load times.

💼 Career

Understanding server components and zero bundle size is important for building scalable, high-performance web apps in modern React and Next.js development.

1

Create the books data array

Create a constant array called books with these exact objects: { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }, { title: '1984', author: 'George Orwell' }, and { title: 'To Kill a Mockingbird', author: 'Harper Lee' }.

NextJS

// Create the books array with exact objects
// Your code here

Need a hint?

Use const books = [ ... ] with exact objects inside the array.

2

Add a dynamic export to enforce static rendering

Add the line export const dynamic = 'force-static' below the books array to ensure the component is treated as a server component with zero client bundle.

NextJS

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

// Add export const dynamic = 'force-static' below
// Your code here

Need a hint?

Write exactly export const dynamic = 'force-static' to mark the component as static.

3

Create the BooksList server component

Create a default exported async function component named BooksList that returns a <section> containing an <h2> with text Book List and an unordered list <ul> with each book's title and author in a <li>. Use books.map with book as the iterator variable.

NextJS

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

export const dynamic = 'force-static';

// Create default async function BooksList() returning JSX
// Your code here

Need a hint?

Use export default async function BooksList() and return JSX with a section, heading, and list using books.map.

4

Complete the component with accessibility and export

Add an aria-label attribute with value List of books to the <ul> element for accessibility. Confirm the component is exported as default and uses the dynamic export.

NextJS

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: '1984', author: 'George Orwell' },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee' }
];

export const dynamic = 'force-static';

export default async function BooksList() {
  return (
    
      Book List
      
        {books.map((book) => (
          {book.title} by {book.author}
        ))}
      
    
  );
}

// Add aria-label to ul for accessibility
// Your code here

Need a hint?

Add aria-label="List of books" to the <ul> for screen readers.