Login

Client - server, frontend và backend: ai làm việc gì?

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Khi mới vào ngành bạn sẽ nghe liên tục các từ frontend, backend, full-stack. Chúng thực chất mô tả cách một ứng dụng được chia thành hai phía làm việc với nhau, giống nhà hàng có khu phục vụ khách và khu bếp phía sau.

Mô hình client - server

Trong mô hình này có hai vai trò:

  • Client (máy khách): nơi người dùng tương tác, như trình duyệt hay ứng dụng di động. Nó gửi yêu cầu.
  • Server (máy chủ): chương trình chạy liên tục trên máy tính mạnh, luôn lắng nghe yêu cầu, xử lý và trả kết quả.

Một máy chủ phục vụ được nhiều client cùng lúc. Ví dụ hàng nghìn học viên cùng mở một khóa học, mọi dữ liệu bài học nằm tập trung ở server, thay vì mỗi người giữ một bản.

Frontend: phần người dùng nhìn thấy

Frontend (giao diện) là mọi thứ chạy ở phía client và hiển thị cho người dùng: bố cục, màu sắc, nút bấm, hiệu ứng. Với web, bộ ba công nghệ nền tảng là:

  1. HTML: cấu trúc nội dung.
  2. CSS: trang trí, bố cục.
  3. JavaScript: tương tác, xử lý logic ở trình duyệt.

Nhiều dự án dùng thêm framework như React, Vue. Với di động, frontend là ứng dụng Android, iOS, Flutter. Nhiệm vụ của lập trình viên frontend là làm giao diện đẹp, dễ dùng, nhanh và phù hợp mọi kích cỡ màn hình.

Backend: phần chạy phía sau

Backend chạy trên server, lo những việc người dùng không thấy:

  • Lưu và truy vấn dữ liệu trong cơ sở dữ liệu.
  • Xác thực: kiểm tra đăng nhập, phân quyền.
  • Xử lý logic nghiệp vụ: tính tiền, kiểm tra đơn hàng, gửi email.
  • Cung cấp API để frontend lấy dữ liệu.

Ngôn ngữ backend phổ biến gồm PHP, Python, Java, C#, Go, Node.js (JavaScript). Phần này quyết định độ an toàn, ổn định và khả năng chịu tải của hệ thống.

Họ nói chuyện với nhau thế nào?

Frontend và backend giao tiếp qua HTTP. Ví dụ luồng khi bạn mở trang danh sách khóa học trong một ứng dụng hiện đại:

  1. Frontend tải về và hiển thị khung giao diện.
  2. JavaScript gửi request GET /api/courses tới backend.
  3. Backend truy vấn cơ sở dữ liệu, đóng gói kết quả thành JSON.
  4. Frontend nhận JSON và hiển thị thành danh sách.
// Frontend (JavaScript)
fetch("/api/courses")
  .then(res => res.json())
  .then(ds => console.log(ds));

Và phía backend viết bằng Python với Flask, chỉ để minh họa:


from flask import Flask, jsonify
app = Flask(__name__)

@app.get("/api/courses")
def courses():
    return jsonify([{"id": 1, "ten": "Python cơ bản"}])

Hai đoạn code ở hai phía khác nhau nhưng nối với nhau qua cùng một đường dẫn /api/courses. Dữ liệu trao đổi thường ở dạng JSON.

Full-stack là gì?

Full-stack chỉ người (hoặc nhóm) làm được cả frontend lẫn backend. Không phải ai cũng cần là full-stack; nhiều công ty chia chuyên môn rõ. Tuy nhiên, hiểu sơ về phía còn lại giúp bạn phối hợp tốt: lập trình viên frontend nên biết API trả về gì, lập trình viên backend nên biết dữ liệu sẽ được hiển thị ra sao.

Chọn hướng nào khi mới bắt đầu?

Nếu bạn thích...Gợi ý
Thấy kết quả ngay trên màn hình, thiết kếFrontend
Logic, dữ liệu, hệ thốngBackend
Xây sản phẩm nhỏ trọn vẹn một mìnhFull-stack

Bài tập: mini ứng dụng hai phía

Cách tốt nhất để hiểu sự phân chia là tự dựng một ứng dụng nhỏ gồm hai phần. Ý tưởng: danh sách ghi chú.

  1. Backend với hai endpoint: GET /api/notes trả danh sách, POST /api/notes thêm ghi chú. Ban đầu lưu trong một biến danh sách, sau nâng cấp lên cơ sở dữ liệu.
  2. Frontend là một trang HTML có ô nhập, nút thêm, và danh sách hiển thị. Dùng fetch gọi hai endpoint.
  3. Kiểm tra bằng DevTools: quan sát các request xuất hiện khi bạn bấm nút.

Khi làm, bạn sẽ gặp những vấn đề rất thực tế mà chỉ phân chia hai phía mới có:

  • CORS: trình duyệt chặn trang ở một địa chỉ gọi API ở địa chỉ khác nếu server không cho phép.
  • Định dạng dữ liệu: hai bên phải thống nhất tên trường JSON.
  • Xử lý lỗi: frontend phải hiển thị thông báo khi backend trả mã 4xx hoặc 5xx.
  • Xác thực dữ liệu hai lần: frontend kiểm tra để thân thiện người dùng, backend vẫn phải kiểm tra lại vì không thể tin client.

Điểm cuối cùng rất quan trọng: mọi thứ chạy trên client đều có thể bị người dùng thay đổi, nên quy tắc bảo mật phải được thi hành ở backend.

Kết luận

Client gửi yêu cầu, server xử lý và trả lời; frontend là mặt tiền, backend là hậu cần. Hiểu bức tranh này, bạn sẽ không lạc khi đọc tài liệu hay tin tuyển dụng. Một bài tập tốt là xây một trang nhỏ hiển thị danh sách từ một API đơn giản do chính bạn viết.

Học xong lý thuyết, hãy thực hành thật nhiều; các bài giảng có bài tập trong khóa học codebem.com sẽ giúp bạn việc đó.

author_photo
Nguyễn Đình Cường

0 comment