What is Client Side, Server Side & Build Process

If you already understand the hard part (server vs browser). What’s missing is where “build time” fits in.

Let’s explain this purely with analogy first, then map it to React / Next / Node / Astro.

🏗️ Big Picture (One Sentence)

“Run on build process” means: _do a lot of work before the website goes live, so the browser and server don’t have to do it later._

🍕 Analogy: Running a Pizza Business

Imagine you sell pizza.

1️⃣ Client-side (Browser) = Eating the Pizza

The customer eats the pizza.

  • They can add chili flakes
  • They can choose slices
  • They can click buttons

This is vanilla JS:

  • Runs directly in the browser
  • No kitchen needed
  • Like adding ketchup on the table

✔️ Simple
✔️ No server required

2️⃣ Server-side (PHP / WordPress) = Cooking After Order

Customer orders → pizza is cooked fresh → then served.

This is PHP / WordPress:

  • Every page request:
    • PHP runs
    • Database is queried
    • HTML is generated
  • Apache/PHP is the kitchen

✔️ Shared hosting is enough
✔️ Server must stay active

3️⃣ Build Process = Cooking Everything in Advance 🍕🍕🍕

Now imagine this:

  • You cook 1,000 pizzas in the morning
  • Put them in boxes
  • Store them on shelves
  • When a customer comes → just hand over a box

🔥 No cooking when customer arrives

This is “Run on build”.

🧠 What “Run on Build” REALLY Means

Code runs ONCE, not per visitor.

Instead of:

User → PHP → Database → HTML

It becomes:

Build time → HTML files generated
User → gets ready-made HTML

🧱 Why React / Vue / Angular Need “Build”

Now let’s map this to JavaScript frameworks.

❓ Why not just run in browser like vanilla JS?

Because React / Vue code is NOT browser-ready.

Example:

<Component title="Hello" />

The browser says:

❌ “What the hell is <Component>?”

So we need a translator.

🧰 Node.js = The Factory Machine (Not the Server)

Node.js is NOT your website server in most cases.

Think of Node as:

🏭 The machine that converts raw materials into finished products

It:

  • Converts JSX → JS
  • Bundles files
  • Removes unused code
  • Optimizes images
  • Creates static HTML

👉 This happens on your computer, not the browser.

🔨 Build Step Example (Real Life)

npm run build

Means:

“Hey Node, take my React/Vue/Next code and turn it into files browsers understand.”

Output:

/dist
  ├── index.html
  ├── style.css
  └── main.js

🎉 These files ARE vanilla now.

🚀 Hosting Confusion (Very Important)

❌ Myth: “React needs powerful hosting”

Not always.

Case 1: React / Vue / Astro (Static Build)

After build:

  • Just HTML, CSS, JS
  • Can run on:
    • Shared hosting
    • Netlify
    • S3
    • GitHub Pages

👉 NO Node needed on server

Case 2: Next.js (Server Features)

Next can do:

  • Server-side rendering
  • APIs
  • Auth
  • Middleware

This is like:

Cooking some pizzas on demand

So it needs:

  • Node running
  • A port (3000, 4000)
  • VPS / Cloud hosting

🌐 What is “Port” in Simple Terms?

A port is like a counter number.

Restaurant Address (IP)
Counter 80 → Website
Counter 443 → HTTPS
Counter 3000 → Node app

Shared hosting:

  • You only get counters 80/443
  • No custom counters allowed

That’s why Node apps don’t run there.

🧪 Frameworks Explained in One Line Each

React

🧱 UI blocks → needs build → outputs JS

Vue

🧱 Same as React, different syntax

Angular

🏗️ Very heavy factory → always build

Astro

📦 Pre-builds HTML → minimal JS → very WP-friendly mindset

Next.js

⚖️ Hybrid:

  • Build-time HTML
  • Server-time rendering
  • Needs Node in production (if SSR used)

🧠 Final Mental Model (Remember This)

Browser JS = Table-side actions
PHP        = Cook per order
Build step = Meal prep in advance
Node       = Kitchen equipment, not the waiter

🔥 Why WordPress Feels Simpler

Because:

  • PHP runs on demand
  • Apache is always there
  • No build step required

Modern JS chose:

  • Performance
  • Scalability
  • Separation of concerns

At the cost of:

  • More tooling
  • More steps
  • More confusion (initially)