Express.js Mastery / Introduction To Back-End Web Development

Static vs Dynamic vs API

📖 Three Ways to Build a Website

  1. 📄 Static — pre-built files served as-is

  2. ⚙️ Dynamic (SSR) — server builds the page fresh each time

  3. 🔌 API-Powered (CSR) — server sends data, browser builds the page

Modern web dev uses all three depending on the project.

📄 Static Websites

  • 📁 All files (HTML, CSS, JS, images, fonts, videos) are created ahead of time and uploaded to a server.

  • 📨 When a user visits, the server just sends the stored files — no logic runs, nothing changes.

Flow: Developer creates files → uploads to server → user requests page → server sends the same files → browser displays them as-is.

✨ Characteristics

  • ⚡ Fast & easy to host

  • 🗄️ No database, no server-side code

  • 👥 Every visitor sees identical content

💡 Good for:

👤 Portfolios · 📄 Resumes · 🏢 Company pages · 🚀 Landing pages · 📚 Docs

❓ Isn't a page full of JS animations "dynamic"?
Not in this sense. JS clicking, menus, sliders, and validation are front-end interactivity — they happen inside the browser. "Dynamic" here specifically means the server rebuilds the page per request. A JS-heavy page can still be a static website if the files never change on the server.

⚙️ Dynamic Websites (Server-Side Rendering)

  • 🔄 The server generates the HTML fresh for every request instead of serving fixed files.

  • ⚙️ It runs app code, 🗄️ reads the database, 🏗️ builds the page, then sends it to the browser.

Components: Browser → HTTP Server → Node.js App → Database

Flow:

  1. 👤 User requests example.com/profile

  2. 📨 HTTP server receives it, passes it to the Node.js app

  3. 🧠 App figures out what data is needed

  4. 🗄️ Fetches it from the database (user info, posts, orders, etc.)

  5. 🏗️ Combines data + HTML template + CSS/JS into a complete page

  6. 📨 Sends the finished page to the browser

  7. 🖥️ Browser displays it

Why "dynamic"?

The page changes based on logged-in user, database content, time, or new data — a fresh page every time. Twitter shows different posts today vs. tomorrow because new posts hit the database and the server regenerates the page each visit.

Same idea for "About Us" (identical for everyone) vs. "Welcome Rahul" / "Welcome Abhijit" (changes per user).

🏗️ Building the full page (HTML/CSS/JS) on the server before sending it is called Server-Side Rendering (SSR).

🌐 Quick terminology: a website (blogs, news, docs) is mainly for reading; a web application (Gmail, Amazon, Netflix) lets users perform tasks like login, search, upload, or buy. Dynamic sites often blur into web apps since both rely on server-generated, per-user content.

🔌 API-Powered Websites (Client-Side Rendering)

  • 📦 Instead of sending a full HTML page, the server sends just data — usually JSON — and the browser builds the page itself.

Components: Browser → API → Node.js → Database

<aside>
💡

[ infographics ]

</aside>

Flow:

  1. 👤 User opens a page

  2. 📨 Browser calls the API, e.g. GET /api/products

  3. 🟢 Node.js fetches data from the database

  4. 📦 Sends back only JSON:

[
  { "name": "Laptop", "price": 50000 },
  { "name": "Mouse", "price": 700 }
]

  1. ⚛️ JavaScript (or React/Angular/Vue) turns that JSON into HTML

  2. 🖥️ Browser displays the page

This browser-side page-building is called Client-Side Rendering (CSR) — the mirror image of SSR: instead of the server sending ready HTML, it sends raw JSON data, and the browser does the rendering.

JSON, the format APIs use, is pure data — no HTML, CSS, or layout:

{ "name": "Abhijit", "age": 22, "city": "Durgapur" }

🚀 Why APIs Are So Powerful

  • 🔌 An API (Application Programming Interface) lets different apps exchange data instead of full webpages.

  • 🌍 The same API can serve many clients at once — 🌐 website, 📱 mobile app, 💻 desktop app, ⌚ IoT device — with zero duplicated back-end code. One API at example.com/api/courses could power a website, an Android app, an iPhone app, and a desktop app simultaneously.

  • ❓ Why not just use SSR everywhere? Because only browsers understand raw HTML. Mobile and desktop apps need structured data, not rendered pages — that's exactly what JSON from an API provides.

  • 💼 Some companies sell only APIs, not websites, and let others build on top: 💳 Stripe (payments) · 🗺️ Google Maps · 🌦️ weather APIs · 💱 currency exchange APIs.

📊 Full Comparison

Feature

📄 Static

⚙️ Dynamic (SSR)

🔌 API-Powered (CSR)

HTML created

Before deployment

On server, per request

In the browser

Database

❌ No

✅ Yes

✅ Yes

Node.js app

❌ No

✅ Yes

✅ Yes

Content changes

❌ No

✅ Yes

✅ Yes

Server sends

HTML/CSS/JS

Generated HTML/CSS/JS

JSON only

Browser builds page

❌ No

❌ No

✅ Yes

Best for

Portfolios, landing pages

Blogs, dashboards, traditional apps

React/Angular/Vue apps

🎉 Final Takeaway

  • 📄 Static → fast, simple, pre-built files

  • ⚙️ Dynamic (SSR) → server builds fresh HTML per request using logic + database

  • 🔌 API-Powered (CSR) → server sends JSON, browser builds the UI

Understanding these three lays the groundwork for Node.js, Express.js, APIs, MongoDB, and frameworks like React, Angular, and Vue. 🚀