Single and Multi Page Applications

What is a Traditional (Multi-Page) Application?
In the old way, every time you click a link, the browser sends a full request to the server. The server responds with a completely new HTML page. The entire screen flashes and reloads.
User clicks “About” link
→ Browser requests /about from server
→ Server sends a FULL new HTML page
→ Browser repaints everything
→ Noticeable delay + flash

What is a Single Page Application (SPA)?
In a SPA, the browser loads one single HTML file once. After that, all navigation happens in JavaScript — no full page reloads. When you click a link, React swaps out only the content that needs to change, while the shell (navbar, footer, layout) stays in place.
User clicks “About” link
→ React intercepts the click (React Router)
→ JavaScript replaces only the main content area
→ URL changes to /about (looks like a real navigation)
→ No full page reload, it is instant, smooth

Example using React Router (most popular routing library):

jsximport { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() { return Home Page; },

function About() {

 return About Page;

}

function App() {
return ( {/* This navbar stays rendered — never reloads */}

Home About

{/* Only this part changes when navigating */}

<Route path="/" element={} />
<Route path="/about" element={} />

);
}

When the user clicks "About", only the area updates. They never reloads.