import { motion } from 'motion/react'; export default function ClientServerArchitectureDiagram() { return (
CLIENT-SERVER ARCHITECTURE
Client-Server Model: Distributed architecture partitioning tasks between service providers (servers) and service requesters (clients). The foundation of the modern web (HTTP), email (SMTP/IMAP), and most networked applications. {/* Clients */} CLIENTS Frontend / UI / Devices {/* Mobile */} Mobile App {/* Laptop */} Web Browser Initiates requests • Renders UI Holds state (cookies, local storage) {/* Network / Internet */} INTERNET / NETWORK TCP/IP • HTTP(S) • WebSockets {/* Arrows */} Request (GET/POST) Request Response (JSON/HTML) Response (200 OK) {/* Servers */} SERVERS Backend / API / Database {/* Web/App Server */} Web/API Server Node.js, Go, Python Business Logic & Auth {/* Database */} Database PostgreSQL / MongoDB Query Data Listens for requests • Processes data Centralized security & storage {/* Comparison and traits */} KEY CONCEPTS {/* Tiers */} N-Tier Architecture • 1-Tier: Client, logic, DB on same machine • 2-Tier: Client (Logic+UI) directly to DB • 3-Tier: Presentation (Client) → Application (Server) → Data (DB) {/* Characteristics */} Characteristics ✓ Separation of Concerns: UI decoupled from logic. ✓ Scalability: Can scale servers independently of clients. ✗ Single Point of Failure (if server goes down, clients fail). {/* Stateful vs Stateless */} State Management Stateless (REST): Each request contains all info needed. Easier to scale. Stateful (WebSockets): Persistent connection. Server remembers client data. ); }