How to Build High-Performance React & Next.js Apps: Modern Optimization Techniques

// performance.config.ts
export const performanceBudget = {
  // Core Web Vitals
  LCP: 2500, // milliseconds
  INP: 200,  // milliseconds  
  CLS: 0.1,  // score
  
  // Bundle sizes
  initialJS: 150, // KB
  totalJS: 400,   // KB
  
  // Network
  ttfb: 600,     // milliseconds
  domReady: 1500 // milliseconds
};

// ❌ Pages Router: Everything client-side by default
// pages/dashboard.tsx
export default function Dashboard() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // Client-side fetch - slow
    fetchDashboardData().then(setData);
  }, []);
  
  if (!data) return <Loading />;
  return <DashboardContent data={data} />;
}

// ✅ App Router: Server-side by default
// app/dashboard/page.tsx
export default async function Dashboard() {
  // Server-side fetch - fast
  const data = await fetchDashboardData();
  
  return <DashboardContent data={data} />;
}

// app/product/[id]/page.tsx
import { getProduct, getReviews } from "@/lib/api";
import { AddToCart } from "./AddToCart"; // Client Component

// This is a Server Component by default
export default async function ProductPage({ params }) {
  // These run on the server
  const [product, reviews] = await Promise.all([
    getProduct(params.id),
    getReviews(params.id)
  ]);

  return (
    <div className="product-page">
      {/* Static content - no JS needed */}
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* Reviews list - static */}
      <div className="reviews">
        {reviews.map(review => (
          <div key={review.id}>
            <p>{review.content}</p>
            <span>⭐ {review.rating}</span>
          </div>
        ))}
      </div>
      
      {/* Only this button needs client JS */}
      <AddToCart product={product} />
    </div>
  );
}

// ❌ Bad: Standard img tag
<img src="/hero.jpg" alt="Hero" width="800" height="600" />

// ✅ Good: Next.js Image component
import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  priority // Above fold
  quality={85}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
/>

// Each page is automatically split
// app/about/page.tsx -> separate chunk
// app/contact/page.tsx -> separate chunk

import dynamic from "next/dynamic";

// Heavy component loaded only when needed
const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
  loading: () => <ChartSkeleton />,
  ssr: false // Don't render on server if not needed
});

const Modal = dynamic(() => import("@/components/Modal"));

export default function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  const [showModal, setShowModal] = useState(false);
  
  return (
    <div>
      <h1>Dashboard</h1>
      
      {/* Chart only loaded when needed */}
      <button onClick={() => setShowChart(true)}>
        Show Analytics
      </button>
      {showChart && <HeavyChart />}
      
      {/* Modal only loaded when opened */}
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          Content
        </Modal>
      )}
    </div>
  );
}

// ❌ Bad: Everything re-renders
function TodoList({ todos, onToggle, onDelete }) {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={() => onToggle(todo.id)}
          onDelete={() => onDelete(todo.id)}
        />
      ))}
    </div>
  );
}

// ✅ Good: Optimized renders
function TodoList({ todos, onToggle, onDelete }) {
  return (
    <div>
      {todos.map(todo => (
        <MemoizedTodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
}

const MemoizedTodoItem = memo(function TodoItem({ 
  todo, 
  onToggle, 
  onDelete 
}) {
  const handleToggle = useCallback(() => {
    onToggle(todo.id);
  }, [todo.id, onToggle]);
  
  const handleDelete = useCallback(() => {
    onDelete(todo.id);
  }, [todo.id, onDelete]);
  
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={handleToggle}
      />
      <span>{todo.text}</span>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
});

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

export default function Dashboard() {
  return (
    <div className="dashboard">
      {/* Fast content loads immediately */}
      <h1>Dashboard</h1>
      <QuickStats />
      
      {/* Slow content streams in when ready */}
      <div className="grid grid-cols-2 gap-6">
        <Suspense fallback={<ChartSkeleton />}>
          <RevenueChart />
        </Suspense>
        
        <Suspense fallback={<TableSkeleton />}>
          <RecentOrders />
        </Suspense>
      </div>
      
      <Suspense fallback={<ListSkeleton />}>
        <CustomerList />
      </Suspense>
    </div>
  );
}

// Server Component - can be async
async function RevenueChart() {
  const data = await getRevenueData(); // This might be slow
  
  return (
    <div className="chart">
      <h2>Revenue</h2>
      <Chart data={data} />
    </div>
  );
}

// app/lib/api.ts
import { unstable_cache } from "next/cache";

// Cache expensive API calls
export const getProducts = unstable_cache(
  async (category?: string) => {
    const products = await fetch(`/api/products?category=${category}`);
    return products.json();
  },
  ['products'], // Cache key
  {
    revalidate: 3600, // 1 hour
    tags: ['products']
  }
);