- Tác giả
- Name
- Nguyễn Đức Xinh
- Ngày xuất bản
- Ngày xuất bản
Cách Một Website Hoạt Động – Hiểu Rõ Client Side và Server Side
🚀 Vì sao cần hiểu cách website hoạt động?
Trước khi triển khai hệ thống trên AWS hay bất kỳ nền tảng điện toán đám mây nào, bạn cần hiểu rõ cách một website vận hành. Điều này giúp bạn:
- Hiểu được vai trò của từng thành phần (Client vs Server)
- Tối ưu hóa hiệu suất
- Bảo mật dữ liệu hiệu quả
- Lựa chọn đúng dịch vụ AWS cho nhu cầu của mình
🌐 Tổng quan: Một website hoạt động thế nào?
Khi bạn truy cập một trang web (ví dụ: https://example.com), có một chuỗi hoạt động diễn ra:
- Trình duyệt (Browser) gửi yêu cầu tới máy chủ (Server)
- Máy chủ xử lý yêu cầu, truy xuất dữ liệu nếu cần
- Máy chủ trả về mã HTML, CSS, JavaScript,...
- Trình duyệt hiển thị nội dung cho người dùng
Quá trình này chia thành hai phần chính:
🖥️ Client-side là gì?
Client-side là phần diễn ra ở phía người dùng, tức là trình duyệt của bạn.
✅ Những gì thuộc client-side:
- HTML: cấu trúc của website
- CSS: định dạng, màu sắc, bố cục
- JavaScript: tương tác như form validation, hiệu ứng động, gọi API
📌 Ví dụ:
Khi bạn bấm nút "Gửi" trên form, trình duyệt có thể kiểm tra xem bạn đã nhập đủ thông tin chưa trước khi gửi lên server.
✅ Ưu điểm:
- Tốc độ phản hồi nhanh (không cần gửi request đến server)
- Giảm tải cho server
- Trải nghiệm người dùng tốt hơn
❌ Nhược điểm:
- Bị giới hạn về bảo mật (mọi thứ đều hiển thị ở client)
- Không thể truy cập cơ sở dữ liệu hoặc tài nguyên nhạy cảm
- Có thể bị thao túng bởi user
🖧 Server-side là gì?
Server-side là phần xử lý diễn ra ở phía máy chủ, nơi lưu trữ mã nguồn, xử lý logic và truy cập cơ sở dữ liệu.
✅ Những gì thuộc server-side:
- Xử lý form đăng nhập (xác thực username, password)
- Tạo nội dung động từ database (bài viết, sản phẩm, v.v.)
- Tính toán nghiệp vụ, bảo mật dữ liệu
🧑💻 Ngôn ngữ server-side phổ biến:
- Node.js
- PHP
- Python (Django, Flask)
- Java (Spring)
- Ruby on Rails
📌 Ví dụ:
Khi bạn đăng nhập, trình duyệt gửi thông tin đến server. Server kiểm tra tài khoản có đúng không, nếu đúng sẽ trả về phiên đăng nhập (session/cookie/token).
✅ Ưu điểm:
- Bảo mật cao hơn
- Kết nối và xử lý dữ liệu từ database
- Dễ kiểm soát và quản lý logic phức tạp
❌ Nhược điểm:
- Tốn thời gian hơn vì phải truyền dữ liệu qua mạng
- Nếu server yếu hoặc không ổn định → ảnh hưởng toàn bộ hệ thống
🕸️ Cách Client và Server tương tác
⚙️ Giao tiếp HTTP/HTTPS
Client và Server giao tiếp thông qua HTTP requests và HTTP responses. Mỗi lần bạn vào trang web, một loạt yêu cầu sẽ được gửi:
- GET: yêu cầu dữ liệu
- POST: gửi dữ liệu
- PUT/PATCH: cập nhật dữ liệu
- DELETE: xóa dữ liệu
📦 Ví dụ thực tế:
Trình duyệt: GET /products
Server: trả về danh sách sản phẩm dạng JSON
Trình duyệt: hiển thị sản phẩm bằng JavaScript
🔧 Client-side và Server-side trên AWS
Hiểu rõ hai phần này sẽ giúp bạn chọn đúng dịch vụ AWS sau này:
Mục đích | Client-side | Server-side |
---|---|---|
Dịch vụ AWS tương ứng | Amazon S3 + CloudFront (lưu trữ file tĩnh) | EC2, Lambda, Elastic Beanstalk (chạy code backend) |
Ví dụ | SPA như React, Vue | API, xử lý form, kết nối database |
Cách triển khai | Upload file lên S3, phân phối qua CloudFront | Deploy code backend lên EC2 hoặc Lambda |
💡 Tổng kết
So sánh | Client-side | Server-side |
---|---|---|
Xử lý ở đâu? | Trình duyệt | Máy chủ |
Hiển thị nội dung? | Có | Có (thường sinh HTML động) |
Bảo mật | Thấp hơn | Cao hơn |
Kết nối database | ❌ | ✅ |
Ví dụ | React, Vue, HTML/CSS | Node.js, PHP, Python |