Back to blog

Kiến Trúc Client-Server

web fundamentalsarchitecturebackendnetworkingsystem design
Kiến Trúc Client-Server

Giới Thiệu

Bạn đã bao giờ tự hỏi điều gì xảy ra khi bạn nhấp vào một liên kết, gửi biểu mẫu, hoặc tải một trang web? Đằng sau mỗi tương tác web là một mô hình kiến trúc cơ bản cung cấp năng lượng cho internet: kiến trúc client-server (kiến trúc máy khách-máy chủ).

Hiểu về kiến trúc client-server là điều quan trọng đối với mọi lập trình viên, dù bạn đang xây dựng một trang web đơn giản hay một hệ thống phân tán phức tạp. Hướng dẫn này sẽ đưa bạn từ những khái niệm cơ bản đến nâng cao, với các ví dụ thực tế và ứng dụng trong thực tế.

Bạn Sẽ Học Được Gì

✅ Hiểu kiến trúc client-server là gì và tại sao nó quan trọng
✅ Tìm hiểu cách chu trình request-response hoạt động trong ứng dụng web
✅ Khám phá các tầng kiến trúc khác nhau (2-tier, 3-tier, N-tier)
✅ Hiểu thiết kế server có trạng thái (stateful) và không trạng thái (stateless)
✅ Khám phá các biến thể hiện đại như microservices và serverless
✅ Học các best practices và những lỗi thường gặp cần tránh

Kiến Trúc Client-Server Là Gì?

Kiến trúc client-server là một mô hình điện toán phân tán trong đó các tác vụ và khối lượng công việc được chia giữa clients (người yêu cầu dịch vụ) và servers (người cung cấp dịch vụ).

Khái Niệm Cốt Lõi

Nói một cách đơn giản:

  • Client: Ứng dụng hoặc thiết bị yêu cầu dữ liệu hoặc dịch vụ (ví dụ: trình duyệt web, ứng dụng di động)
  • Server: Hệ thống cung cấp dữ liệu hoặc dịch vụ để đáp ứng yêu cầu của client (ví dụ: web server, database server)

Tại Sao Cần Kiến Trúc Client-Server?

Trước khi kiến trúc client-server trở nên phổ biến, chúng ta có:

  1. Điện toán Mainframe (1960s-1970s):

    • Tất cả xử lý trên máy tính trung tâm
    • Người dùng truy cập qua "dumb terminals" không có khả năng xử lý
    • Đắt đỏ và khả năng mở rộng hạn chế

  2. Máy tính cá nhân độc lập (1980s):

    • Mỗi máy tính hoạt động độc lập
    • Khó chia sẻ dữ liệu và tài nguyên
    • Trùng lặp phần mềm và dữ liệu

Kiến trúc client-server giải quyết các vấn đề này bằng cách:

✅ Quản lý dữ liệu tập trung: Nguồn sự thật duy nhất trên server
✅ Khả năng mở rộng: Thêm nhiều server khi nhu cầu tăng
✅ Chia sẻ tài nguyên: Nhiều client truy cập tài nguyên chung
✅ Bảo mật: Kiểm soát truy cập và bảo vệ dữ liệu tập trung
✅ Bảo trì: Cập nhật server một lần thay vì cập nhật từng client

Cách Web Hoạt Động: Chu Trình Request-Response

Mọi tương tác trên web đều tuân theo chu trình request-response. Hãy phân tích điều gì xảy ra khi bạn truy cập một trang web như https://example.com.

Các Bước Chi Tiết

1. Hành động của người dùng (Client-Side)

Người dùng nhập URL vào trình duyệt và nhấn Enter

2. Tra cứu DNS

Trình duyệt hỏi DNS server: "Địa chỉ IP của example.com là gì?"
DNS trả lời: "93.184.216.34"

3. HTTP Request (Client → Server)

GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Accept-Language: en-US,en;q=0.9
Connection: keep-alive

4. Xử lý trên Server

Server nhận request
Server xác thực (nếu cần)
Server lấy dữ liệu từ database
Server render HTML hoặc chuẩn bị JSON response

5. HTTP Response (Server → Client)

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Date: Thu, 30 Jan 2026 10:00:00 GMT
Server: nginx/1.18.0
 
<!DOCTYPE html>
<html>
  <head>
    <title>Example Website</title>
  </head>
  <body>
    <h1>Welcome to Example.com</h1>
  </body>
</html>

6. Render (Client-Side)

Trình duyệt parse HTML
Trình duyệt fetch các tài nguyên bổ sung (CSS, JavaScript, hình ảnh)
Trình duyệt render trang
Người dùng nhìn thấy trang web

Ví Dụ Thực Tế: Luồng Đăng Nhập

// CLIENT SIDE (React/Next.js)
async function handleLogin(email: string, password: string) {
  try {
    // 1. Client gửi POST request đến server
    const response = await fetch('https://api.example.com/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    });
 
    if (!response.ok) throw new Error('Login failed');
 
    const data = await response.json();
 
    // 3. Client lưu token và chuyển hướng
    localStorage.setItem('token', data.token);
    window.location.href = '/dashboard';
  } catch (error) {
    console.error('Login error:', error);
  }
}
 
// SERVER SIDE (Express.js/Node.js)
app.post('/auth/login', async (req, res) => {
  try {
    const { email, password } = req.body;
 
    // Validate input
    if (!email || !password) {
      return res.status(400).json({ error: 'Email and password required' });
    }
 
    // Query database
    const user = await db.users.findOne({ email });
 
    // Verify password
    const isValid = await bcrypt.compare(password, user.passwordHash);
    if (!isValid) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
 
    // Generate token
    const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET);
 
    // Send response
    res.json({ token, user: { id: user.id, email: user.email } });
  } catch (error) {
    res.status(500).json({ error: 'Internal server error' });
  }
});

Client-Side vs Server-Side

Client-Side (Frontend)

Định nghĩa: Code chạy trong trình duyệt hoặc thiết bị của người dùng.

Công nghệ:

  • HTML, CSS, JavaScript
  • React, Vue, Angular, Svelte
  • Mobile apps (iOS, Android)

Trách nhiệm:

  • Render giao diện người dùng
  • Xử lý tương tác người dùng
  • Validation phía client
  • Gửi API requests đến server
  • Quản lý state cục bộ

Ưu điểm:

  • ✅ Phản hồi nhanh (không có độ trễ mạng)
  • ✅ Giảm tải cho server
  • ✅ Hoạt động offline (với service workers)
  • ✅ Trải nghiệm người dùng phong phú

Hạn chế:

  • ❌ Không thể truy cập database trực tiếp
  • ❌ Không thể giữ bí mật (code có thể xem được)
  • ❌ Không thể thực hiện các thao tác bảo mật
  • ❌ Bị giới hạn bởi khả năng thiết bị

Server-Side (Backend)

Định nghĩa: Code chạy trên server (máy tính từ xa).

Công nghệ:

  • Node.js (JavaScript/TypeScript)
  • Python (Django, FastAPI, Flask)
  • Java (Spring Boot)
  • Go, Ruby, PHP

Trách nhiệm:

  • Thao tác database (CRUD)
  • Business logic
  • Authentication và authorization
  • Validation và sanitization dữ liệu
  • Lưu trữ và xử lý file
  • Tích hợp API bên thứ ba
  • Gửi email, thông báo

Ưu điểm:

  • ✅ Bảo mật (code và secrets không bị lộ)
  • ✅ Truy cập database và file system
  • ✅ Khả năng xử lý mạnh mẽ
  • ✅ Business logic tập trung

Hạn chế:

  • ❌ Độ trễ mạng
  • ❌ Yêu cầu kết nối internet
  • ❌ Chi phí server

Nguyên Tắc Vàng

Không bao giờ tin tưởng client. Luôn validate và xử lý các thao tác nhạy cảm trên server.

Thin Clients vs Thick Clients

Thin Clients

Định nghĩa: Client thực hiện xử lý tối thiểu và phụ thuộc nhiều vào server.

Đặc điểm:

  • Hầu hết logic chạy trên server
  • Client chủ yếu hiển thị dữ liệu
  • Server render HTML (Server-Side Rendering)

Công nghệ:

  • PHP truyền thống, Ruby on Rails, Django
  • Next.js với Server Components

Ưu điểm: ✅ Load trang ban đầu nhanh, ✅ SEO tốt hơn, ✅ Hoạt động trên thiết bị yếu
Nhược điểm: ❌ Reload toàn bộ trang, ❌ Tải server cao hơn

Thick Clients (Rich Clients)

Định nghĩa: Client thực hiện xử lý và logic đáng kể.

Đặc điểm:

  • Hầu hết UI logic chạy trên client
  • Server cung cấp dữ liệu qua API (JSON)
  • Sử dụng JavaScript nhiều

Công nghệ:

  • React, Vue, Angular SPAs
  • Mobile apps (iOS, Android, React Native)

Ưu điểm: ✅ Trải nghiệm tương tác cao, ✅ Không reload trang, ✅ Có thể offline
Nhược điểm: ❌ Load ban đầu chậm hơn, ❌ Thách thức SEO, ❌ Yêu cầu thiết bị mạnh hơn

Cách Tiếp Cận Hiện Đại: Hybrid

Các framework hiện đại như Next.js, Nuxt.js, SvelteKit kết hợp cả hai:

// Server Component (Thin Client)
async function BlogPost({ slug }: { slug: string }) {
  const post = await db.posts.findOne({ slug });
  return (
    <article>
      <h1>{post.title}</h1>
      <CommentSection postId={post.id} />
    </article>
  );
}
 
// Client Component (Thick Client)
'use client';
function CommentSection({ postId }: { postId: string }) {
  const [comments, setComments] = useState([]);
  // Logic chạy trong trình duyệt
  return <div>{/* Render comments */}</div>;
}

Các Tầng Kiến Trúc: 2-Tier, 3-Tier, N-Tier

2-Tier Architecture (Client-Server)

Cấu trúc: Client ↔ Database Server

Ưu điểm: ✅ Kiến trúc đơn giản, ✅ Giao tiếp nhanh
Nhược điểm: ❌ Rủi ro bảo mật, ❌ Khó mở rộng

3-Tier Architecture (Phổ biến nhất)

Cấu trúc: Client ↔ Application Server ↔ Database

Ưu điểm:

  • ✅ Tách biệt concerns
  • ✅ Client không truy cập trực tiếp database (bảo mật)
  • ✅ Business logic tập trung
  • ✅ Dễ mở rộng từng tier độc lập

Khi nào dùng: Hầu hết các ứng dụng web hiện đại.

N-Tier Architecture (Microservices)

Cấu trúc: Nhiều dịch vụ chuyên biệt

Ưu điểm: ✅ Mỗi service mở rộng độc lập, ✅ Công nghệ đa dạng, ✅ Fault isolation
Nhược điểm: ❌ Phức tạp vận hành, ❌ Độ trễ mạng, ❌ Thách thức về consistency

Khi nào dùng: Ứng dụng lớn với nhiều team, yêu cầu mở rộng độc lập.

Stateful vs Stateless Servers

Stateful Servers

Định nghĩa: Server ghi nhớ thông tin về client giữa các requests.

Cách hoạt động:

1. Client đăng nhập → Server tạo session, lưu trong memory
2. Client gửi request → Server tra cứu session data
3. Client đăng xuất → Server xóa session

Ví dụ: Authentication dựa trên session

app.post('/login', (req, res) => {
  const user = validateUser(req.body.username, req.body.password);
  req.session.userId = user.id; // Server ghi nhớ
  res.json({ message: 'Logged in' });
});

Ưu điểm: ✅ Đơn giản để implement, ✅ Dễ invalidate sessions
Nhược điểm: ❌ Khó mở rộng ngang, ❌ Cần sticky sessions

Stateless Servers

Định nghĩa: Server KHÔNG ghi nhớ gì giữa các requests. Mỗi request chứa tất cả thông tin cần thiết.

Cách hoạt động:

1. Client đăng nhập → Server tạo JWT token, gửi cho client
2. Client lưu token (localStorage hoặc cookie)
3. Client gửi request kèm token trong header
4. Server validate token (không cần tra cứu session)

Ví dụ: JWT-based authentication

app.post('/login', (req, res) => {
  const user = validateUser(req.body.username, req.body.password);
  const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET);
  res.json({ token }); // Server không lưu gì
});
 
app.get('/profile', (req, res) => {
  const token = req.headers.authorization?.split(' ')[1];
  const decoded = jwt.verify(token, process.env.JWT_SECRET);
  // Không cần tra cứu session
  res.json({ userId: decoded.userId });
});

Ưu điểm: ✅ Dễ mở rộng ngang, ✅ Không cần session storage, ✅ Phù hợp distributed systems
Nhược điểm: ❌ Khó invalidate tokens, ❌ Token lớn hơn session ID

Lựa Chọn Hiện Đại

Hầu hết API hiện đại đều stateless vì:

  • Dễ mở rộng (thêm server không lo về sessions)
  • Tốt cho microservices
  • Hoạt động tốt với serverless

Các Mẫu Giao Tiếp Client-Server

1. Request-Response (Đồng bộ)

Mẫu phổ biến nhất: Client gửi request, đợi response.

const response = await fetch('/api/data');
const data = await response.json();

Use cases: Load dữ liệu cho trang, gửi form, API calls
Ưu điểm: Đơn giản, đáng tin cậy
Nhược điểm: Client bị block cho đến khi nhận response

2. Polling

Client định kỳ hỏi server về updates.

setInterval(async () => {
  const response = await fetch('/api/messages/new');
  const newMessages = await response.json();
  if (newMessages.length > 0) displayMessages(newMessages);
}, 5000); // Mỗi 5 giây

Use cases: Kiểm tra thông báo, theo dõi trạng thái job
Ưu điểm: Đơn giản
Nhược điểm: Lãng phí bandwidth, không real-time

3. WebSockets (Hai chiều)

Kết nối persistent, cả client và server đều có thể gửi message bất cứ lúc nào.

// Client
const socket = new WebSocket('ws://localhost:3000');
 
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  displayMessage(message);
};
 
socket.send(JSON.stringify({ type: 'message', text: 'Hello!' }));

Use cases: Chat real-time, live notifications, multiplayer games
Ưu điểm: Real-time thực sự, hiệu quả
Nhược điểm: Phức tạp hơn, yêu cầu persistent connections

4. Server-Sent Events (SSE)

Server đẩy updates đến client qua HTTP.

// Client
const eventSource = new EventSource('/api/events');
 
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('New event:', data);
};

Use cases: Điểm số thể thao live, cập nhật giá cổ phiếu, streaming logs
Ưu điểm: Đơn giản, tự động reconnect
Nhược điểm: Chỉ một chiều (server → client)

Các Biến Thể Hiện Đại

1. Microservices Architecture

Chia monolithic server thành các services nhỏ, độc lập.

Ví dụ thực tế: Netflix - 700+ microservices

Lợi ích: Independent deployment, đa dạng công nghệ, team autonomy
Thách thức: Phức tạp distributed system, độ trễ mạng

2. Serverless / FaaS

Không có server để quản lý. Code chạy khi có events.

// AWS Lambda
export async function handler(event: APIGatewayEvent) {
  const user = await dynamoDB.get({ TableName: 'Users', Key: { id: event.userId } });
  return { statusCode: 200, body: JSON.stringify(user) };
}

Platforms: AWS Lambda, Vercel Functions, Cloudflare Workers

Lợi ích: ✅ Auto-scaling, ✅ Pay per execution, ✅ Không quản lý server
Thách thức: ❌ Cold starts, ❌ Giới hạn thời gian thực thi

3. Edge Computing

Chạy code gần người dùng (phân tán địa lý).

Traditional: User ở Tokyo → Server ở US → 200ms latency
Edge: User ở Tokyo → Edge Server ở Tokyo → 10ms latency

Use cases: Content delivery (CDN), API acceleration, A/B testing

Best Practices

1. Thiết Kế API Trước

Trước khi build, thiết kế API contract (OpenAPI/Swagger)

2. Dùng HTTP Methods Chuẩn

GET    /api/users         // List users
POST   /api/users         // Create user
PUT    /api/users/:id     // Update user
DELETE /api/users/:id     // Delete user

3. Xử Lý Lỗi Gracefully

app.get('/api/users/:id', async (req, res) => {
  try {
    const user = await db.users.findById(req.params.id);
    if (!user) {
      return res.status(404).json({ error: 'User not found' });
    }
    res.json(user);
  } catch (error) {
    res.status(500).json({ error: 'Internal server error' });
  }
});

4. Implement Caching

import NodeCache from 'node-cache';
const cache = new NodeCache({ stdTTL: 600 });
 
app.get('/api/products', async (req, res) => {
  const cached = cache.get('products');
  if (cached) return res.json(cached);
 
  const products = await db.products.findAll();
  cache.set('products', products);
  res.json(products);
});

5. Dùng Pagination

app.get('/api/users', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = 20;
  const offset = (page - 1) * limit;
 
  const users = await db.users.findAll({ limit, offset });
  const total = await db.users.count();
 
  res.json({
    data: users,
    pagination: { page, limit, total, totalPages: Math.ceil(total / limit) },
  });
});

Tóm Tắt và Key Takeaways

✅ Kiến trúc client-server chia công việc giữa clients (yêu cầu) và servers (cung cấp)
✅ Chu trình request-response là cách clients và servers giao tiếp (HTTP requests/responses)
✅ Client-side xử lý UI và user interactions; server-side xử lý data và business logic
✅ Không bao giờ tin client - luôn validate và bảo mật operations trên server
✅ 3-tier architecture (client-app-database) là mô hình phổ biến nhất
✅ Stateless servers mở rộng tốt hơn stateful (dùng JWT thay vì sessions)
✅ Biến thể hiện đại bao gồm microservices, serverless, và edge computing
✅ Bảo mật yêu cầu authentication, authorization, input validation, và rate limiting

Tiếp Theo

Sau khi hiểu về kiến trúc client-server, tiếp tục hành trình học tập với các chủ đề liên quan:

📚 HTTP Protocol Complete Guide - Tìm hiểu ngôn ngữ clients và servers giao tiếp
📚 What is REST API? - Thiết kế APIs theo best practices
📚 TypeScript Backend Development - Xây dựng servers production-ready
📚 Docker Complete Guide - Containerize ứng dụng client-server

Kết Luận

Kiến trúc client-server là xương sống của internet và các ứng dụng hiện đại. Dù bạn đang xây dựng một trang web đơn giản hay một hệ thống phân tán phức tạp, hiểu cách clients và servers giao tiếp là nền tảng để trở thành một lập trình viên hiệu quả.

Điều quan trọng là suy nghĩ theo trách nhiệm: Client nên làm gì? Server nên làm gì? Dữ liệu chảy ở đâu? Làm thế nào để đảm bảo bảo mật và khả năng mở rộng?

Hãy nhớ: Kiến trúc tốt nhất là kiến trúc đơn giản nhất đáp ứng yêu cầu của bạn. Đừng over-engineer, nhưng cũng đừng under-architect. Tìm sự cân bằng phù hợp cho use case của bạn.

Happy coding! 🚀

📬 Đăng ký nhận bản tin

Nhận những bài viết mới nhất qua email mỗi tuần. Không spam, hủy đăng ký bất cứ lúc nào.

Chúng tôi tôn trọng quyền riêng tư của bạn. Hủy đăng ký bất cứ lúc nào.

💬 Comments

Đăng nhập để bình luận

Chúng tôi sẽ không đăng bất cứ điều gì mà không có sự cho phép của bạn.