Server-Side Rendering (SSR) & Next.js

Q: What is server side rendering in React, and why is Next.js commonly used for it?

Server side rendering means generating the full HTML for a page on the server before sending it to the browser, instead of sending an almost empty page and building everything with JavaScript afterward. This helps pages appear faster and makes them easier for search engines to read. Next.js is a popular framework that makes setting up server side rendering in React simple.

Q: What is hydration in the context of server side rendering, and why is it necessary?

Hydration is the process where React takes the already rendered HTML sent from the server and attaches the necessary JavaScript behavior to it in the browser, making buttons clickable and inputs interactive. Without hydration, the page would just be static text with no working interactivity at all.

Q: What is the difference between the pages router and the newer app router in Next.js?

The pages router, Next.js's original approach, defines each route as a file inside a pages folder, and every page is rendered on the client by default unless configured otherwise. The newer app router, inside an app folder, uses Server Components by default, supports nested layouts more naturally, and gives finer control over rendering behavior for each part of a page.

Q: How does data fetching work differently in a Next.js Server Component compared to fetching data in a regular client rendered React app?

Inside a Server Component, you can simply use await directly in the component function to fetch data, since the code runs on the server, without needing useEffect, useState, or a loading spinner for the initial request. Next.js also automatically caches many of these server fetch requests to avoid repeating the same work unnecessarily.

Q: What are some real benefits of using Next.js instead of building a React app from scratch?

Next.js provides file based routing, meaning creating a new file automatically creates a new page, built in support for server side rendering and static generation, automatic code splitting per page, and image optimization, all set up and working correctly without needing to configure complex build tools yourself.

5 questions found

What is server side rendering in React, and why is Next.js commonly used for it?

Beginner

Server side rendering means generating the full HTML for a page on the server before sending it to the browser, instead of sending an almost empty page and building everything with JavaScript afterward. This helps pages appear faster and makes them easier for search engines to read. Next.js is a popular framework that makes setting up server side rendering in React simple.

// app/page.js in Next.js, this page is server rendered by default
export default async function HomePage() {
  const posts = await fetchPosts();
  return <PostList posts={posts} />;
}

Real-world example A news website using Next.js sends fully built HTML pages to visitors right away, so an article's headline and text appear instantly, even before all the page's JavaScript has finished loading.

Common follow-ups: How does server side rendering improve search engine visibility compared to a purely client rendered app?;What happens on the server every time a visitor requests a server rendered page?

Server Components;Static Site Generation (SSG) & Hydration

What is hydration in the context of server side rendering, and why is it necessary?

Intermediate

Hydration is the process where React takes the already rendered HTML sent from the server and attaches the necessary JavaScript behavior to it in the browser, making buttons clickable and inputs interactive. Without hydration, the page would just be static text with no working interactivity at all.

// The server sends fully rendered HTML
// Then React 'hydrates' it in the browser, attaching event handlers
import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root'), <App />);

Real-world example A shopping site's add to cart button appears instantly from the server rendered HTML, and becomes fully clickable only a moment later once React finishes hydrating the page in the visitor's browser.

Common follow-ups: What happens if the HTML generated on the server does not exactly match what React expects during hydration?;How long does hydration typically take on a slower device?

Static Site Generation (SSG) & Hydration;Performance (memo/useMemo)

What is the difference between the pages router and the newer app router in Next.js?

Intermediate

The pages router, Next.js's original approach, defines each route as a file inside a pages folder, and every page is rendered on the client by default unless configured otherwise. The newer app router, inside an app folder, uses Server Components by default, supports nested layouts more naturally, and gives finer control over rendering behavior for each part of a page.

// Pages router: pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

// App router: app/about/page.js
export default function About() {
  return <h1>About Us</h1>;
}

Real-world example A team starting a brand new project chooses the app router specifically to take advantage of Server Components and nested layouts, while an older existing project continues using the pages router it was originally built with.

Common follow-ups: Should an existing project using the pages router be migrated to the app router?;What are nested layouts, and how does the app router make them easier to build?

Server Components;Routing

How does data fetching work differently in a Next.js Server Component compared to fetching data in a regular client rendered React app?

Advanced

Inside a Server Component, you can simply use await directly in the component function to fetch data, since the code runs on the server, without needing useEffect, useState, or a loading spinner for the initial request. Next.js also automatically caches many of these server fetch requests to avoid repeating the same work unnecessarily.

export default async function ProductPage({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then((r) => r.json());
  return <h1>{product.name}</h1>;
}

Real-world example A product page in a Next.js app fetches its data directly using await inside the Server Component, completely skipping the loading spinner and useEffect pattern that a purely client rendered version of the same page would need.

Common follow-ups: How does Next.js decide whether to cache a specific fetch request or fetch fresh data every time?;What happens if the awaited fetch call fails inside a Server Component?

Server Components;Data Fetching (React Query & SWR)

What are some real benefits of using Next.js instead of building a React app from scratch?

Beginner

Next.js provides file based routing, meaning creating a new file automatically creates a new page, built in support for server side rendering and static generation, automatic code splitting per page, and image optimization, all set up and working correctly without needing to configure complex build tools yourself.

// Creating a new page in Next.js is as simple as adding a file
// app/contact/page.js automatically becomes available at /contact
export default function ContactPage() {
  return <h1>Contact Us</h1>;
}

Real-world example A small business builds their entire company website using Next.js, gaining fast page loads, automatic image optimization, and simple file based routing, without needing to manually configure a bundler or a routing library themselves.

Common follow-ups: What kinds of projects might not actually need a framework like Next.js?;How does Next.js's automatic image optimization actually work?

Build Tools & Bundlers (Vite Webpack & CRA);Routing