Trong khoảng thập niên 2010, lập trình web bước sang một kỷ nguyên hoàn toàn mới. Nếu như giai đoạn trước web động (PHP, Java, ASP.NET) chủ yếu sinh ra HTML từ server và gửi thẳng về trình duyệt, thì giờ đây, với sự xuất hiện của API và Single Page Application (SPA), web đã trở thành một nền tảng ứng dụng thực thụ, mượt mà, tương tác nhanh, và gần như không khác gì ứng dụng native.
Single-page-application-la-gi-5.jpg

API – Cầu nối giữa client và server

API là gì?

API (Application Programming Interface) trong web thường được hiểu là một cổng giao tiếp giữa frontend và backend. Thay vì trả về HTML đã render sẵn từ server, giờ đây server chỉ trả về dữ liệu (JSON/XML), còn việc hiển thị giao diện do client đảm nhận.

RESTful API

  • Ra đời khoảng 2000 (được Roy Fielding đề xuất trong luận án).
  • Dựa trên giao thức HTTP, dùng các method quen thuộc như GET, POST, PUT, DELETE.
  • Dữ liệu trả về thường ở dạng JSON, dễ parse trên JavaScript.
Ví dụ REST API: 
GET /api/users/123
Response:
{
  "id": 123,
  "name": "Nam",
  "email": "nam@example.com"
}

GraphQL – lựa chọn linh hoạt hơn

  • Ra mắt bởi Facebook năm 2015.
  • Cho phép client tự chọn dữ liệu cần lấy, tránh tình trạng over-fetching hoặc under-fetching.
Ví dụ GraphQL query: 
{
  user(id: "123") {
    name
    email
  }
}
-> API chính là nền tảng giúp frontend và backend tách biệt, mở đường cho SPA và mobile app dùng chung dữ liệu.

Single Page Application (SPA) – Web như một ứng dụng

SPA là gì?

SPA là kiểu ứng dụng web chỉ tải một lần duy nhất file HTML/JS/CSS ban đầu. Sau đó, mọi thay đổi giao diện đều do JavaScript thao tác trên DOM và dữ liệu được lấy qua API.
Cách hoạt động cơ bản:
  • Người dùng mở website → tải về index.html, bundle.js, style.css.
  • Các framework frontend (Angular, React, Vue) render giao diện trên trình duyệt.
  • Khi người dùng thao tác (bấm nút, chuyển trang), ứng dụng sẽ gọi API để lấy dữ liệu và cập nhật UI mà không cần reload toàn trang.
Lợi ích
  • Trải nghiệm mượt mà như ứng dụng desktop/mobile.
  • Giảm tải cho server (server chỉ lo dữ liệu, không render UI).
  • Tái sử dụng API cho nhiều nền tảng (web, mobile, desktop).
Hạn chế
  • SEO khó khăn (vì Googlebot không đọc được JS thời kỳ đầu, sau này mới cải thiện).
  • Bundle JS lớn → lần load đầu tiên có thể chậm.
  • Cần routing phía client (history API).

Công nghệ gắn liền với SPA

  • AngularJS (2010) → tiên phong SPA, kiến trúc MVC cho frontend.
  • React (2013) → Virtual DOM, component-based, trở thành framework phổ biến nhất.
  • Vue.js (2014) → kết hợp dễ học của Angular và React, nhanh chóng được cộng đồng yêu thích.
  • Redux, Vuex, MobX → quản lý state toàn cục.
  • Axios, Fetch API → gọi REST API.
    Ví dụ thực tế của SPA
  • Gmail: Người dùng chỉ tải Gmail một lần, mọi email mới đều lấy qua API và hiển thị ngay lập tức.
  • Facebook: Timeline cuộn vô tận, comment hiển thị tức thì mà không reload trang.
  • Trello: Quản lý bảng công việc kéo thả trực tiếp, dữ liệu cập nhật real-time.
  • Spotify Web Player: Nghe nhạc trực tuyến mượt như ứng dụng desktop.

So sánh kiến trúc cũ vs SPA

Screenshot 2025-08-25 115016.png

Kết luận

API chính là cột sống của web hiện đại, cho phép frontend và backend tách rời, phát triển độc lập. SPA biến website từ những “trang” tĩnh/truyền thống thành những “ứng dụng” thực thụ, trải nghiệm nhanh, mượt, tiện lợi. Nhờ sự kết hợp API + SPA, lập trì