Introduction to Next.js & Full-Stack Architecture

Next.js is an open-source React framework designed for full-stack web development. Unlike traditional single-page React apps (SPAs) that deliver a blank HTML shell and rely on client-side JS to render UI, Next.js executes rendering logic on the server. This yields faster initial page loads, superior SEO indexing, and zero-JS execution overhead for static and data-driven components.

Next.js unifies client and server code within a single project repository. Pages are rendered on the server into HTML, sent to the browser, and then hydrated into an interactive React application. By leveraging automatic code splitting, static site generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR), Next.js optimizes asset delivery so users only download the precise JavaScript needed for active components.

Before

Traditional SPA (Blank HTML + Client Fetching)

1// Client-side React (SPA) - Browser fetches empty shell, then triggers API calls2export default function UserProfile() {3  const [user, setUser] = useState(null);4  useEffect(() => {5    fetch('/api/user').then(res => res.json()).then(setUser);6  }, []);7  if (!user) return <p>Loading...</p>;8  return <h1>Welcome, {user.name}</h1>;9}

After

Next.js Full-Stack Component (Server-Side Execution)

1// Next.js Server Component - Runs on server, sends pre-rendered HTML to browser2import { db } from '@/lib/db';3 4export default async function UserProfile() {5  const user = await db.user.findFirst();6  return <h1>Welcome, {user.name}</h1>;7}

Exercise

Create a static Next.js route page component that fetches data directly inside an async server component function, avoiding useEffect or useState hooks.

Check your understanding

What is the primary architectural difference between a Next.js Server Component and a client-side SPA?Show answerHide answer
Answer
Server Components execute on the server and emit HTML/RSC payload to the browser without shipping their server-side dependencies or code to the client bundle.
Why does pre-rendering improve SEO and initial page load speed?Show answerHide answer
Answer
Crawlers and users receive fully rendered HTML on first HTTP response, eliminating render delay while waiting for client JS scripts to download and execute.