Next.js (App Router, SSR & CSR)

Definition

Definition

Next.js is a framework built on top of React. It provides everything needed to build production-ready web applications, including routing, server-side rendering (SSR), client-side rendering (CSR), API routes, and performance optimizations. It sits above React and decides where and how your React components should be rendered.

The Problem That Led to It

React only focuses on building the UI. Developers had to install and configure separate libraries for routing, SEO, authentication, image optimization, and rendering strategies. Initial page loads were slower, and search engines struggled to index React apps because the browser generated the HTML after loading JavaScript. Large projects became difficult to organize. Next.js was created to provide these features in one framework with sensible defaults.

What Problem It Solves

• Built-in file-based routing.
• Better SEO through Server-Side Rendering.
• Faster initial page loads.
• API routes for backend logic.
• Automatic image and performance optimization.
• Organized project structure using the App Router.

What Happens If Not Used

With plain React, you configure many libraries yourself, SEO becomes harder, and visitors may wait longer before seeing meaningful content.

Easy Wording

Next.js is React with built-in tools for creating fast, SEO-friendly, production-ready websites.

Layman Example

React is like buying a car engine. Next.js is buying a complete car with the engine, steering, brakes, GPS, and safety features already installed.

Technical Example

Before Next.js (React CSR)

Browser ↓ Downloads HTML (almost empty) ↓ Downloads JavaScript ↓ React Runs ↓ Fetch API Data ↓ Build Page ↓ User Sees Content

After Next.js (SSR) Browser ↓ Request Product Page ↓ Next.js Server ↓ Fetch Database/API ↓ Render HTML on Server ↓ Send Complete HTML ↓ Browser Displays Page Immediately ↓ React Hydrates Page for Interactivity

For example, when visiting an e-commerce product page, users immediately see the product title, price, and description without waiting for React to build the page.

Limitation

Server-side rendering increases server work, and not every page needs it. Some pages (like dashboards after login) mainly display user-specific data, making SSR less beneficial.

Solution

The next concept is SSR vs CSR vs SSG (and ISR). These rendering strategies help you decide when a page should be rendered—on the server, in the browser, or at build time—to balance SEO, speed, server cost, and user experience.