📘 VOLUME 2: MODERN NEXT.JS WITH APP ROUTER

PART 1: UNDERSTANDING SERVER AND CLIENT COMPONENTS

The Game Changer: Server vs Client

This is where Next.js becomes powerful and different from regular React.

In regular React, everything runs in the browser (client-side). The browser downloads JavaScript and runs it.

In modern Next.js, you can choose:

• Server Components – Run on the server, send HTML to browser
• Client Components – Run in the browser, interactive

This is revolutionary!

Why This Matters

Let me explain with a real-world example: Netflix Home Page

Netflix needs to:

1. Fetch movie data from database
2. Personalize it for each user
3. Show fast, beautiful pages
4. Be secure (don’t expose API keys to browser)

With only client-side React:

1. Browser downloads JavaScript
2. JavaScript runs, requests movie data
3. Data fetches over internet to browser
4. Shows loading spinner while fetching
5. Finally shows movies

This is slow and users see a blank screen.

With Next.js Server Components:

1. Server fetches movie data
2. Server renders HTML with movies already loaded
3. Sends complete HTML to browser
4. User sees content immediately
5. No loading spinner!

Plus, you can keep API keys on the server. Safe!

Server Components (Default)

By default, every component is a server component. This means it runs on the server.

Create app/posts/page.js:

// This is a SERVER COMPONENT (default)

export default function PostsPage() {
  // This code runs on the SERVER
  console.log('This logs on the server, not the browser!');

  // You can access databases here
  const posts = [
    { id: 1, title: 'Post 1' },
    { id: 2, title: 'Post 2' },
  ];

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

When you visit /posts:

1. Next.js runs this component on the server
2. It renders it to HTML
3. Sends HTML to your browser
4. Browser receives complete HTML, no JavaScript needed
5. Super fast!

This is perfect for static content, database queries, and API calls.