Trong mô hình web truyền thống ở trên, mỗi khi người dùng gửi một yêu cầu lên phía máy chủ web, máy chủ web tiếp nhận, xử lý yêu cầu và gửi lại cho phía người dùng nội dung trang web bao gồm các thành phần như HTML, CSS, JavaScript cùng với dữ liệu. Phía máy chủ làm tất cả mọi nhiệm vụ để phục vụ cho bên người dùng. Mô hình hoạt động này được gọi là “kết xuất phía máy chủ” hay “server-side rendering” (SSR) [16]. Ở đây, mỗi khi người dùng chuyển từ một trang web này sang một trang web khác, toàn bộ nội dung của trang mới sẽ được nạp lại từ đầu và nó sẽ làm ảnh hưởng
26
đến băng thông của hệ thống cũng như tính trải nghiệm người dùng. Để giải quyết một số vấn đề gặp phải như việc nạp lại toàn bộ trang hay cần nâng cao tính tương tác của người dùng, người ta đưa ra một kỹ thuật lập trình có tên là Ajax [17], được sử dụng kết hợp với một số thư viện lập trình bằng JavaScript như Jquery. Tuy nhiên, tất cả những thay đổi này vẫn chưa thể đáp ứng đủ các yêu cầu ngày càng cao của ứng dụng web. Thêm vào đó, mô hình SSR bộc lộ khá nhiều nhược điểm và cần một phương pháp khác để thay thế.
Nhằm giảm thiểu gánh nặng cho việc xử lý phía máy chủ, mô hình “kết xuất phía máy khách” hay “client-side rendering” (CSR) ra đời [18]. Trong mô hình CSR, các tác vụ như tạo nội dung trang HTML, xử lý và hiển thị dữ liệu cũng như điều hướng trang được thực hiện ở phía trình duyệt. Ứng dụng web theo cơ chế này được gọi là “ứng dụng một trang” hay “single-page application” (SPA) [19]. Nói một cách ngắn ngọn, SPA cho phép tất cả các thao tác của người dùng được thực hiện trên một trang duy nhất, và cấu trúc của một trang web sẽ được nạp một lần mà không cần nạp lại kể cả khi thực hiện chuyển trang.
Khi dùng SPA, mô hình phổ biến được sử dụng hiện nay là việc tách biệt giữa hai phần:
• Phần dịch vụ: tập trung xử lý các logic về nghiệp vụ, tiếp nhận các yêu cầu từ phía giao diện, xử lý các yêu cầu và gửi trả lại dữ liệu cho phía giao diện thông qua các Web API.
• Phần giao diện (SPA): tiếp nhận dữ liệu trả về từ phía dịch vụ, sử dụng dữ liệu này để kết xuất ra nội dung hiển thị cho trang web.
Với cách thức này, người ta đã tách được ứng dụng thành hai phần riêng biệt. Sơ đồ trong hình 2.3 mô tả nguyên lý hoạt động của mô hình CSR.
27 Cơ chế CSR được diễn giải như sau:
• Lần đầu tiên khi có yêu cầu gửi tới máy chủ web, nội dung của toàn bộ trang HTML được nạp về phía trình duyệt.
• Ở những lần tiếp theo, khi có yêu cầu chuyển trang hoặc thực hiện một tác vụ nào đó, máy khách sẽ gửi các yêu cầu Ajax lên máy chủ web. Máy chủ tiếp nhận, xử lý yêu cầu này và gửi lại dữ liệu cần thiết cho phía máy khách.
• Phía máy khách nhận dữ liệu trả về và thực hiện việc cập nhật các phần nội dung trên trang web bằng cách sử dụng JavaScript và DOM để tương tác với tài liệu HTML. Dữ liệu thay đổi phần nào thì sẽ cập nhật lại phần đó, mà không cần phải nạp lại toàn bộ trang như trong mô hình web truyền thống. Phát triển web theo hướng SPA hiện nay đang là một xu thế. Nhiều hãng công nghệ lớn trên thế giới như Google, Facebook đều lựa chọn SPA để tạo ra những ứng dụng web nhằm tận dụng tối đa những lợi ích mà nó đem lại, đồng thời làm tăng tính trải nghiệm cho người dùng.