Part 51: Fullstack React with Next.js App Router & Server Components

React has evolved beyond client-only SPAs. React Server Components (RSC), popularized by Next.js, allow components to execute exclusively on the server.

1. Server Components vs. Client Components

Server Components (Default):

• Run strictly on the server.
• Zero JavaScript sent to the client browser (smaller bundles!).
• Direct access to databases, internal APIs, and filesystem.
• Cannot use state (useState) or browser effects (useEffect).

Client Components ('use client'):

• Traditional React components hydrated in the browser.
• Handle user interactions, events, state, and browser APIs.

2. Server Component Example (app/articles/page.jsx)

// Runs 100% on the server!
import db from '@/lib/db';

export default async function ArticlesPage() {
  // Direct database query without an intermediate REST API:
  const articles = await db.articles.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10
  });

  return (
    <main className="p-6">
      <h1 className="text-3xl font-bold mb-6">Latest Articles</h1>
      <div className="grid gap-4">
        {articles.map((art) => (
          <article key={art.id} className="p-4 border rounded shadow">
            <h2>{art.title}</h2>
            <p>{art.summary}</p>
          </article>
        ))}
      </div>
    </main>
  );
}

Key Takeaways

• React Server Components fetch data on the server with zero client bundle overhead.
• Use 'use client' only when interactive features (events, hooks) are required.
• The hybrid server-client model represents the future of enterprise web engineering.

In Part 52, we conclude our series with the Enterprise Architecture Blueprint: Building Production Systems!