Scaling Next.js Apps: Performance & Optimization Guide

// ✓ Server Component (default) - No 'use client'
// Use when you need:
// - Data fetching
// - Database queries
// - API calls
// - Static content rendering
// - No user interactivity

export default async function DemandLetterList() {
  // Fetch data directly on server
  const letters = await db.demandLetters.findMany({
    where: { userId: user.id },
    orderBy: { createdAt: 'desc' }
  });

  return (
    <div>
      {letters.map(letter => (
        <LetterCard key={letter.id} letter={letter} />
      ))}
    </div>
  );
}

// ✓ Client Component - Mark with 'use client'
// Use when you need:
// - useState, useEffect, event handlers
// - Browser APIs (localStorage, window)
// - User interactions (clicks, form inputs)
// - Real-time updates

'use client';

import { useState } from 'react';

export function LetterCard({ letter }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div onClick={() => setIsExpanded(!isExpanded)}>
      <h3>{letter.title}</h3>
      {isExpanded && <p>{letter.content}</p>}
    </div>
  );
}

import Image from 'next/image';

// ❌ Bad: Standard img tag
<img src="/logo.png" alt="Logo" />
// Issues:
// - No optimization
// - Wrong size for device
// - Blocks page rendering
// - No lazy loading

// ✓ Good: Next.js Image component
<Image
  src="/logo.png"
  alt="Logo"
  width={300}
  height={100}
  priority // Load immediately for above-fold images
  quality={90} // Default is 75
/>

// Automatic benefits:
// ✓ WebP/AVIF format for modern browsers
// ✓ Responsive images (srcset)
// ✓ Lazy loading by default
// ✓ Blur placeholder
// ✓ Prevents layout shift

// 1. Blur Placeholder for Better UX
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..." // Low-res base64
/>

// 2. Fill Mode for Dynamic Containers
<div className="relative w-full h-96">
  <Image
    src="/banner.jpg"
    alt="Banner"
    fill
    style={{ objectFit: 'cover' }}
    sizes="100vw"
  />
</div>

// 3. Remote Images (require config)
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
      },
    ],
  },
};

// Usage
<Image
  src="https://res.cloudinary.com/demo/image/upload/photo.jpg"
  alt="User upload"
  width={800}
  height={600}
/>

// 4. Responsive Sizes Optimization
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  // Loads different sizes based on viewport
/>

// 1. Request Memoization (single render)
// Multiple components fetching same data in one request
async function getUser(id: string) {
  // Automatically deduped within same render
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// Both calls use the same request
<UserProfile userId="123" />
<UserStats userId="123" />

// 2. Data Cache (persistent, across requests)
async function getLetters() {
  // Cached indefinitely by default
  const res = await fetch('https://api.example.com/letters');
  return res.json();
}

// Revalidate every hour
async function getLetters() {
  const res = await fetch('https://api.example.com/letters', {
    next: { revalidate: 3600 } // seconds
  });
  return res.json();
}

// Never cache (always fresh)
async function getRealtimeData() {
  const res = await fetch('https://api.example.com/realtime', {
    cache: 'no-store'
  });
  return res.json();
}

// 3. Full Route Cache (static pages)
// Static page - cached at build time
export default async function StaticPage() {
  return <div>This page is cached!</div>;
}

// Dynamic page - regenerated per request
export const dynamic = 'force-dynamic';

export default async function DynamicPage() {
  return <div>Fresh on every request</div>;
}

// 4. Router Cache (client-side navigation)
// Automatically caches pages user visits for 30s
// Prefetches linked pages on hover