Next.js vs. React: Understanding Architecture and Making the Right Choice

What Does Each Do?

React (Library):                 Next.js (Framework):
────────────────────                ────────────────────────────────
✓ UI-Komponenten                    ✓ Everything from React
✓ State Management                  ✓ File-based Routing
✓ Hooks                             ✓ Server Components (RSC)
✗ Routing (choose yourself)           ✓ Server-side Rendering (SSR)
✗ Server-Rendering                  ✓ Static Site Generation (SSG)
✗ Image optimization                 ✓ API Routes + Image optimization

Rendering Strategies Compared

Strategy      When rendered?    When refreshed?         Use Case
──────────────────────────────────────────────────────────────────
SSG (Static)   Build time       New build     Blog, Docs
ISR            Build + Interval  After X seconds   Product list
SSR            Every request    Every request   Dashboard
RSC (Server)   Every request    On demand      Default
Client Comp.   Browser          On demand      Interactive

Server Component vs. Client Component

// Server Component (default in Next.js App Router)
// NO "use client" → runs on the server

async function BlogPage() {
    // Direct DB/API access on the server
    const posts = await fetch('https://api.example.com/posts', {
        next: { revalidate: 3600 }  // ISR: revalidate hourly
    }).then(r => r.json());

    return (
        <div>
            {posts.map((post: Post) => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

// Client Component – only where needed
"use client";

export function SearchBar() {
    const [query, setQuery] = useState('');

    return (
        <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Search..."
        />
    );
}

Data Fetching: useEffect vs. Server Component

// React (useEffect pattern) – in the browser
function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/products')
            .then(r => r.json())
            .then(data => { setProducts(data); setLoading(false); });
    }, []);

    if (loading) return <Spinner />;
    return <ProductGrid products={products} />;
}

// Next.js (Server Component) – on the server
async function ProductList() {
    const products = await getProducts(); // No loading state needed!
    return <ProductGrid products={products} />;
}

// Suspense for Streaming
export default function Page() {
    return (
        <Suspense fallback={<ProductSkeleton />}>
            <ProductList />   {/* Skeleton until data arrives */}
        </Suspense>
    );
}

When React Alone, When Next.js?

Choose pure React (+ Vite) when:
──────────────────────────────────
✓ Single-Page App (SPA) behind login
✓ SEO is not important
✓ Maximum freedom desired
Examples: Admin dashboard, internal tools

Choose Next.js when:
────────────────────
✓ SEO matters (landing pages, blog, e-commerce)
✓ Initial load time should be minimal
✓ Full-stack with API routes desired
✓ Large application with many routes
Examples: Company website, SaaS, e-commerce

Performance Comparison

Typical values in practice:

• First Contentful Paint: React CSR ~2.5s | Next.js SSR ~0.5s | SSG ~0.2s
• Time to Interactive: React CSR ~3.5s | Next.js SSR ~1.5s | SSG ~0.5s
• Bundle size: React CSR 300-500 KB | Next.js RSC 80-150 KB | SSG 30-80 KB
• SEO score: React CSR average | Next.js SSR very good | SSG excellent