React vs Next.js: When to Use Each Framework (Developer Guide)

// Basic React Component Example
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <div>Loading...</div>;

  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>Joined: {user.joinDate}</p>
    </div>
  );
}

export default UserProfile;

// Next.js Server Component Example (App Router)
// app/users/[id]/page.tsx

async function getUserData(id: string) {
  // This fetch happens on the server
  const res = await fetch(`https://api.example.com/users/${id}`, {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  return res.json();
}

export default async function UserProfile({ params }: { params: { id: string } }) {
  const user = await getUserData(params.id);

  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>Joined: {user.joinDate}</p>
    </div>
  );
}

// Automatic loading UI
export default function Loading() {
  return <div>Loading user...</div>;
}

// Generate static params at build time
export async function generateStaticParams() {
  const users = await fetch('https://api.example.com/users').then(res => res.json());
  return users.map((user: any) => ({ id: user.id.toString() }));
}

// Next.js SSR Example
// This page renders on the server for each request
export const dynamic = 'force-dynamic';

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

export default async function Page() {
  const data = await getServerSideData();

  return (
    <div>
      <h1>Server-Rendered Page</h1>
      <p>This HTML was generated on the server at {new Date().toISOString()}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// Next.js SSG Example
// This page is generated once at build time
export const dynamic = 'force-static';

async function getBuildTimeData() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function BlogIndex() {
  const posts = await getBuildTimeData();

  return (
    <div>
      <h1>Blog Posts</h1>
      <p>Generated at build time: {new Date().toISOString()}</p>
      {posts.map((post: any) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// Next.js ISR Example
// Regenerate this page every hour
export const revalidate = 3600; // 1 hour in seconds

interface Product {
  name: string;
  price: number;
}

async function getProductData(id: string): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 3600 }
  });
  return res.json();
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProductData(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>Last updated: {new Date().toISOString()}</p>
    </div>
  );
}

// Or use on-demand revalidation with tags
// Then call revalidateTag('products') when data changes

// React Router Example
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import UserProfile from './pages/UserProfile';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/123">User Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// Next.js File Structure = Routes
app/
  layout.tsx          → Root layout (shared across all pages)
  page.tsx            → / route (Home page)
  about/
    page.tsx          → /about route
  users/
    [id]/
      page.tsx        → /users/:id route (dynamic)
      loading.tsx     → Loading UI for this page
      error.tsx       → Error boundary for this page
  not-found.tsx       → 404 page

// app/users/[id]/page.tsx
export default async function UserPage({ params }: { params: { id: string } }) {
  const user = await getUser(params.id);
  return <div>{user.name}</div>;
}

// Automatic loading state
// app/users/[id]/loading.tsx
export default function Loading() {
  return <div>Loading user...</div>;
}

// Automatic error handling
// app/users/[id]/error.tsx
'use client';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

<!-- What search engines initially see with React CSR -->
<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
  </body>
</html>

<!-- Content only appears after JavaScript executes -->
<!-- Google can wait for JS, but it's slower and not guaranteed -->

<!-- What search engines see with Next.js SSR/SSG -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Blog Post - Complete Title</title>
    <meta name="description" content="Full description visible immediately" />
    <meta property="og:title" content="My Blog Post" />
    <meta property="og:description" content="Full description for social sharing" />
    <meta property="og:image" content="https://example.com/image.jpg" />
  </head>
  <body>
    <div id="root">
      <article>
        <h1>My Blog Post</h1>
        <p>All content is fully rendered and visible to search engines immediately...</p>
        <!-- Complete HTML content here -->
      </article>
    </div>
    <script src="/_next/static/chunks/main.js"></script>
  </body>
</html>

// Next.js Metadata API Example
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Complete Guide to Next.js SEO',
  description: 'Learn how to optimize your Next.js application for search engines',
  keywords: ['nextjs', 'seo', 'optimization'],
  authors: [{ name: 'Alex Kumar' }],
  openGraph: {
    title: 'Complete Guide to Next.js SEO',
    description: 'Learn how to optimize your Next.js application',
    url: 'https://example.com/blog/nextjs-seo',
    siteName: 'My Blog',
    images: [{
      url: 'https://example.com/og-image.jpg',
      width: 1200,
      height: 630,
    }],
    type: 'article',
    publishedTime: '2025-11-20T09:00:00Z',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Complete Guide to Next.js SEO',
    description: 'Learn how to optimize your Next.js application',
    images: ['https://example.com/og-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

// Before: React with React Router
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function ProductPage() {
  const { id } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct);
  }, [id]);

  if (!product) return <div>Loading...</div>;

  return <div>{product.name}</div>;
}

// After: Next.js App Router
// app/products/[id]/page.tsx
async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 3600 } // ISR: revalidate hourly
  });
  return res.json();
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return <div>{product.name}</div>;
}

// Automatic loading state
export default function Loading() {
  return <div>Loading...</div>;
}

// SEO metadata
export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return {
    title: product.name,
    description: product.description,
  };
}