Server Components and Full-Stack React NEXT.JS 13+

// app/page.tsx - Server Component by default (Next.js 13+)
// No 'use client' directive = Server Component

import { db } from '@/lib/database';

// Server components can be async!
async function ProductList() {
  // Direct database access - no API route needed
  const products = await db.product.findMany({
    include: { category: true }
  });
  
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <span>{product.category.name}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

// Server Component characteristics:
// ✓ Can use async/await
// ✓ Direct database/filesystem access
// ✓ No JavaScript sent to client
// ✓ Can import server-only code
// ✓ Runs only on server
// ✗ Cannot use hooks (useState, useEffect, etc.)
// ✗ Cannot use browser APIs
// ✗ Cannot have event handlers

// components/Counter.tsx - Client Component
'use client'; // This directive marks it as a Client Component

import { useState } from 'react';

export function Counter() {
  // Can use hooks - runs on client
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      {/* Event handlers work */}
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

// Client Component characteristics:
// ✓ Can use hooks (useState, useEffect, etc.)
// ✓ Can use browser APIs
// ✓ Can have event handlers
// ✓ Interactive features
// ✗ Cannot be async
// ✗ JavaScript sent to client
// ✗ Cannot directly access server resources

// ✓ CORRECT: Server Component imports Client Component
// app/page.tsx (Server Component)
import { Counter } from '@/components/Counter'; // Client Component

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <Counter /> {/* Client Component works here */}
    </div>
  );
}

// ✗ WRONG: Client Component cannot import Server Component
// components/ClientComponent.tsx
'use client';
import { ServerData } from './ServerComponent'; // ERROR!

// ✓ CORRECT: Use composition with children prop
// components/ClientWrapper.tsx
'use client';

export function ClientWrapper({ children }) {
  const [state, setState] = useState(false);
  
  return (
    <div onClick={() => setState(!state)}>
      {children} {/* Server Component passed as children */}
    </div>
  );
}

// app/page.tsx (Server Component)
import { ClientWrapper } from '@/components/ClientWrapper';

async function ServerData() {
  const data = await fetchFromDatabase();
  return <div>{data}</div>;
}

export default function Page() {
  return (
    <ClientWrapper>
      <ServerData /> {/* Server Component passed to Client via children */}
    </ClientWrapper>
  );
}

// ✓ CORRECT: Serializable props
// app/page.tsx (Server Component)
<ClientComponent 
  name="John"
  age={30}
  items={['a', 'b', 'c']}
  config={{ theme: 'dark', locale: 'en' }}
/>

// ✗ WRONG: Non-serializable props
<ClientComponent 
  onClick={() => console.log('click')} // Functions can't be serialized
  date={new Date()} // Dates lose type information
  callback={myFunction} // Functions not allowed
/>

// ✓ CORRECT: Define handlers in Client Component
'use client';

export function ClientComponent({ name, age }) {
  // Define event handlers in client component
  const handleClick = () => {
    console.log(`${name} clicked, age: ${age}`);
  };
  
  return <button onClick={handleClick}>{name}</button>;
}

// ✓ CORRECT: Server Actions for server-side logic
// app/actions.ts
'use server';

export async function updateUser(formData) {
  // Server-side logic
  const name = formData.get('name');
  await db.user.update({ name });
}

// Client Component can call Server Action
'use client';
import { updateUser } from './actions';

export function Form() {
  return (
    <form action={updateUser}>
      <input name="name" />
      <button type="submit">Save</button>
    </form>
  );
}

// Async Server Component
async function UserProfile({ userId }) {
  // Direct database access
  const user = await db.user.findUnique({
    where: { id: userId },
    include: { posts: true, followers: true }
  });
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>Posts: {user.posts.length}</p>
      <p>Followers: {user.followers.length}</p>
    </div>
  );
}

// Parallel data fetching
async function Dashboard() {
  // Fetch multiple resources in parallel
  const [user, posts, stats] = await Promise.all([
    db.user.findFirst(),
    db.post.findMany({ take: 10 }),
    db.analytics.getStats()
  ]);
  
  return (
    <div>
      <UserCard user={user} />
      <PostList posts={posts} />
      <StatsWidget stats={stats} />
    </div>
  );
}

// Sequential data fetching (when dependent)
async function PostWithComments({ postId }) {
  // First, get the post
  const post = await db.post.findUnique({
    where: { id: postId }
  });
  
  // Then, get comments (needs post.id)
  const comments = await db.comment.findMany({
    where: { postId: post.id }
  });
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <CommentList comments={comments} />
    </article>
  );
}

// app/page.tsx
import { Suspense } from 'react';

// Fast component
async function QuickData() {
  const data = await fetch('https://api.example.com/quick');
  return <div>Quick: {data}</div>;
}

// Slow component
async function SlowData() {
  const data = await fetch('https://api.example.com/slow');
  return <div>Slow: {data}</div>;
}

export default function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      
      {/* Quick data renders immediately */}
      <Suspense fallback={<div>Loading quick data...</div>}>
        <QuickData />
      </Suspense>
      
      {/* Slow data streams in later */}
      <Suspense fallback={<div>Loading slow data...</div>}>
        <SlowData />
      </Suspense>
    </div>
  );
}

// Result: Page streams progressively
// 1. Shell with "Loading..." fallbacks sent immediately
// 2. QuickData arrives and replaces first fallback
// 3. SlowData arrives later and replaces second fallback

// lib/database.ts
import 'server-only'; // Prevents client-side import

import { PrismaClient } from '@prisma/client';

// This will only run on server
export const db = new PrismaClient();

// Server-only utilities
export async function getSecretData() {
  // Safe to use environment variables
  const apiKey = process.env.SECRET_API_KEY;
  return fetchWithKey(apiKey);
}

// If you try to import this in a Client Component:
// 'use client';
// import { db } from '@/lib/database'; // ERROR at build time!

// lib/utils.ts - Shared utilities
// No 'server-only' import = can be used anywhere
export function formatDate(date) {
  return date.toLocaleDateString();
}

// Use 'server-only' package for:
// - Database clients
// - API clients with secrets
// - Server-only utilities
// - Code that must never be exposed to client

// ❌ Client Component approach (old way)
'use client';
import moment from 'moment'; // 67KB gzipped!
import { remark } from 'remark'; // 50KB gzipped!

export function BlogPost({ content, date }) {
  const formattedDate = moment(date).format('MMMM Do, YYYY');
  const html = remark().processSync(content);
  
  return (
    <article>
      <time>{formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
}
// Total bundle increase: ~117KB just for this component!

// ✅ Server Component approach (new way)
// No 'use client' = Server Component
import moment from 'moment'; // Runs on server only
import { remark } from 'remark'; // Runs on server only

export async function BlogPost({ postId }) {
  const post = await db.post.findUnique({ where: { id: postId } });
  
  const formattedDate = moment(post.date).format('MMMM Do, YYYY');
  const html = remark().processSync(post.content);
  
  return (
    <article>
      <time>{formattedDate}</time>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
}
// Client bundle increase: 0KB! All processing on server.

// Optimize with strategic Client/Server split

// Server Component - heavy processing
async function ProductGrid() {
  const products = await db.product.findMany({
    include: { reviews: true }
  });
  
  // Heavy computation on server
  const productsWithRatings = products.map(product => ({
    ...product,
    averageRating: calculateAverage(product.reviews),
    reviewCount: product.reviews.length
  }));
  
  return (
    <div className="grid">
      {productsWithRatings.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Client Component - only interactive parts
'use client';

export function ProductCard({ product }) {
  const [isFavorite, setIsFavorite] = useState(false);
  
  return (
    <div className="card">
      {/* Static content from server */}
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <div>⭐ {product.averageRating} ({product.reviewCount})</div>
      
      {/* Interactive part on client */}
      <button onClick={() => setIsFavorite(!isFavorite)}>
        {isFavorite ? '❤️' : '🤍'} Favorite
      </button>
    </div>
  );
}

// Benefits:
// ✓ Heavy computation (calculateAverage) runs on server
// ✓ Database query stays on server
// ✓ Only small interactive component sent to client
// ✓ Better performance overall

// Server Component fetches data
async function UserDashboard({ userId }) {
  const user = await db.user.findUnique({
    where: { id: userId },
    include: { preferences: true }
  });
  
  // Pass data to Client Component
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <UserSettings initialSettings={user.preferences} />
    </div>
  );
}

// Client Component manages state
'use client';

export function UserSettings({ initialSettings }) {
  // Initialize state from server data
  const [settings, setSettings] = useState(initialSettings);
  const [isSaving, setIsSaving] = useState(false);
  
  const handleSave = async () => {
    setIsSaving(true);
    await fetch('/api/settings', {
      method: 'POST',
      body: JSON.stringify(settings)
    });
    setIsSaving(false);
  };
  
  return (
    <div>
      <label>
        Theme:
        <select 
          value={settings.theme}
          onChange={(e) => setSettings({...settings, theme: e.target.value})}
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </label>
      
      <button onClick={handleSave} disabled={isSaving}>
        {isSaving ? 'Saving...' : 'Save Settings'}
      </button>
    </div>
  );
}

// app/layout.tsx - Server Component
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/* Providers must be Client Component */}
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

// app/providers.tsx - Client Component
'use client';

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function Providers({ children }) {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// Any Client Component can now use theme
'use client';
import { useTheme } from './providers';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current: {theme}
    </button>
  );
}

// ❌ WRONG: Causes hydration mismatch
'use client';

export function TimeDisplay() {
  // Server renders one time, client hydrates with different time
  return <div>Current time: {new Date().toLocaleTimeString()}</div>;
  // ERROR: Server HTML doesn't match client hydration
}

// ✅ CORRECT: Client-only rendering
'use client';

export function TimeDisplay() {
  const [time, setTime] = useState(null);
  
  useEffect(() => {
    // Only runs on client
    setTime(new Date().toLocaleTimeString());
    
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);
  
  // Show nothing during SSR, then show time on client
  if (!time) return <div>Loading time...</div>;
  
  return <div>Current time: {time}</div>;
}

// ✅ ALTERNATIVE: Suppress hydration warning (use sparingly)
'use client';

export function TimeDisplay() {
  return (
    <div suppressHydrationWarning>
      Current time: {new Date().toLocaleTimeString()}
    </div>
  );
}

app/
├── layout.tsx        # Root layout (Server Component)
├── page.tsx          # Home page (Server Component)
├── loading.tsx       # Loading UI (Server Component)
├── error.tsx         # Error boundary (Client Component)
├── providers.tsx     # Context providers (Client Component)
│
├── dashboard/
│   ├── layout.tsx    # Dashboard layout
│   ├── page.tsx      # Dashboard page
│   └── loading.tsx   # Dashboard loading
│
├── blog/
│   ├── page.tsx      # Blog list
│   └── [slug]/
│       ├── page.tsx  # Blog post (dynamic route)
│       └── loading.tsx
│
└── api/
    └── users/
        └── route.ts  # API route handler

// app/layout.tsx - Root Layout
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>...</nav>
        </header>
        <main>{children}</main>
        <footer>...</footer>
      </body>
    </html>
  );
}

// app/page.tsx - Home Page (Server Component)
export default async function HomePage() {
  const posts = await db.post.findMany({ take: 5 });
  
  return (
    <div>
      <h1>Latest Posts</h1>
      <PostList posts={posts} />
    </div>
  );
}

// app/loading.tsx - Loading UI
export default function Loading() {
  return <div>Loading...</div>;
}

// app/error.tsx - Error Boundary (must be Client)
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

// app/blog/[slug]/page.tsx - Dynamic route
export default async function BlogPost({ params }) {
  // Params are automatically typed and available
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });
  
  if (!post) {
    notFound(); // Shows 404 page
  }
  
  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.publishedAt}</time>
      <div>{post.content}</div>
    </article>
  );
}

// Generate static params for SSG
export async function generateStaticParams() {
  const posts = await db.post.findMany();
  
  return posts.map(post => ({
    slug: post.slug
  }));
}

// Generate metadata
export async function generateMetadata({ params }) {
  const post = await db.post.findUnique({
    where: { slug: params.slug }
  });
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage]
    }
  };
}

// app/api/users/route.ts - API Route Handler
import { NextResponse } from 'next/server';

// GET /api/users
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const page = searchParams.get('page') || '1';
  
  const users = await db.user.findMany({
    skip: (parseInt(page) - 1) * 10,
    take: 10
  });
  
  return NextResponse.json(users);
}

// POST /api/users
export async function POST(request) {
  const body = await request.json();
  
  const user = await db.user.create({
    data: body
  });
  
  return NextResponse.json(user, { status: 201 });
}

// app/api/users/[id]/route.ts - Dynamic route
export async function GET(request, { params }) {
  const user = await db.user.findUnique({
    where: { id: params.id }
  });
  
  if (!user) {
    return NextResponse.json({ error: 'Not found' }, { status: 404 });
  }
  
  return NextResponse.json(user);
}

// PATCH /api/users/[id]
export async function PATCH(request, { params }) {
  const body = await request.json();
  
  const user = await db.user.update({
    where: { id: params.id },
    data: body
  });
  
  return NextResponse.json(user);
}

// DELETE /api/users/[id]
export async function DELETE(request, { params }) {
  await db.user.delete({
    where: { id: params.id }
  });
  
  return NextResponse.json({ success: true });
}