Single Page Web Applications là gì? viết web SPA như thế nào?

Single Page Web Applications hay còn gọi tắt là SPA. Hay chúng ta còn thường gọi 1 trang web chỉ có duy nhất 1 webpage. Dữ liệu sẽ được đổ vào 1 trang chủ duy nhất.

Khi người dùng load lần đầu, dữ liệu sẽ được đẩy lên đầu tiên tương đương là trang chủ, sau đó phía sever chờ đợi phản hồi từ clien gửi về và dữ liệu lại được đẩy lên tiếp bên dưới mà không cần load lại toàn bộ trang khiến web khá nhẹ, load rất nhanh. Tạo cảm giác như đang sử dụng 1 ứng dụng chứ không phải website.

​

Trong cuốn “Single Page Web Applications” của tác giả Michael S. Mikowski & Josh C. Powell có một ví dụ rất hay, tạm dịch là: “Tại thời điểm bạn đang đọc những dòng này chúng ta đã tiêu tốn 35 triệu phút chỉ để chờ một trang web tải xong, thời gian này bằng 96 lần thời gian đi từ một nơi nào đó đến Sao Hỏa và quay trở lại.”

Thực tế là chúng ta chỉ mất vài giây để một trang web tải xong. Nhưng đằng sau đó là các máy chủ phải xử lý các request, việc này dẫn đến một sự hao phí lớn về tài nguyên. Vậy là để tiết kiệm, các lập trình viên sẽ quan tâm đến SPA.

Single-page Application (SPA) là gì?

Để có thể giải thích thật dễ hiểu, bạn hãy nhìn vào từ viết tắt của tên gọi này, là SPA. Đọc đến đây, hẳn ai cũng có thể biết được SPA là gì đúng không? Chính xác, SPA chính là việc làm giảm stress cho cơ thể, lưu thông tuần hoàn. Tất cả những thao tác của một nhân viên SPA chỉ tập trung trên một người, nhằm giúp người sử dụng dịch vụ này thoải mái nhất. Single-page Application cũng vậy, đó là một trang web hay một ứng dụng web, mà tất cả những thao tác xử lý của trang web đều được diễn ra trên một trang duy nhất. Với mục đích chính là nâng cao trải nghiệm người dùng tốt hơn, hiệu quả hơn, thoải mái hơn.

Cụ thể hơn, chúng ta có một trang vỏ và trong đó ta có thể tải nhiều trang con ở bên trong trang vỏ đó mà không ảnh hưởng hay động chạm gì tới trang vỏ ở bên ngoài. Tóm lại, Single-page Application là ứng dụng chạy bên trong trình duyệt.

Single-page Application khác gì so với một trang web truyền thống?

Với một trang web truyền thống, khi người dùng yêu cầu một trang web, thì server sẽ tính toán và trả về trang web đó cho người dùng toàn bộ trang web dưới dạng mã html. Hầu như không có bất kỳ sự liên kết nào giữa 2 yêu cầu gần nhau. Do đó khi có nhiều yêu cầu được diễn ra thì sẽ làm quá trình tính toán diễn ra lâu hơn, bởi hệ thống phải tính toán nhiều thành phần trước khi trả về một trang web hoàn chỉnh.

Với SPA lại khác, ở lần request đầu tiên, hệ thống sẽ trả về tất cả code xử lý cũng như code hiển thị của toàn bộ trang web, ở những yêu cầu tiếp theo client chỉ phải requets những phần nào mình cần, và server sẽ trả về dữ liệu dưới dạng thô, giúp rút ngắn thời gian truyền tải, giúp nâng cao trải nghiệm của người dùng hơn.

Một ví dụ đơn cử dễ hiểu là trang Facebook. Nếu bạn đang lướt News feed, hãy thử load lại. Bạn thấy đó, tất cả những gì thay đổi chỉ là bảng tin mới nhất được update. Bạn sẽ cảm giác đang trượt tuyết trên một làn băng duy nhất, và không phải mất công chuyển làn băng khác.

Tương tự với trang Google, khi bạn nhập những gì muốn tìm kiếm, tất cả những thay đổi chỉ là những kết quả được xuất ra, riêng khung Google bên trên vẫn đứng yên dù bạn có chuyển sang trang 2, 3 v.v…