SPA/MPA là gì | Khái niệm SPA | ReactJS

Tóm tắt ngắn:

Video giới thiệu về khái niệm SPA (Single Page Application - ứng dụng một trang) và MPA (Multiple Page Application - ứng dụng nhiều trang). Điểm chính được thảo luận là sự khác biệt giữa hai kiến trúc này, tập trung vào cách thức hoạt động, trải nghiệm người dùng, và tối ưu hóa công cụ tìm kiếm (SEO). Các công nghệ được đề cập bao gồm ReactJS, và các ví dụ thực tế như Shopee, 30shine, Zing MP3. Video cũng trình bày chi tiết quá trình hoạt động của SPA thông qua demo, cho thấy cách một trang duy nhất có thể tạo ra nhiều giao diện khác nhau. Ứng dụng của SPA và MPA được phân tích dựa trên các yếu tố như tốc độ tải trang, trải nghiệm người dùng, và khả năng SEO. Video cũng giải thích các phương pháp tối ưu hóa hiệu suất cho SPA.

Tóm tắt chi tiết:

Video được chia thành các phần chính sau:

Giới thiệu SPA và MPA: Video bắt đầu bằng định nghĩa SPA là ứng dụng một trang, sử dụng thư viện như ReactJS, và được áp dụng rộng rãi bởi các ông lớn như Google, Facebook, Twitter, Shopee, 30shine, Zing MP3. MPA được giới thiệu như là kiến trúc ngược lại, ứng dụng nhiều trang.
Sự khác biệt giữa SPA và MPA: Điểm khác biệt chính được nhấn mạnh là SPA hiện đại hơn, không yêu cầu tải lại toàn bộ trang khi tương tác, trong khi MPA tải lại trang mỗi khi chuyển trang. Video sử dụng ví dụ trực quan để minh họa sự khác biệt này. "Thằng SPA nó sẽ không yêu cầu tải lại trang cho quá trình sử dụng". "Thằng MPA sẽ phải tải lại trang cho quá trình sử dụng".
Demo minh họa SPA: Phần này trình bày chi tiết hoạt động của SPA bằng cách phân tích cấu trúc file của một ứng dụng ReactJS. Video cho thấy file index.html duy nhất, nhưng vẫn tạo ra nhiều giao diện khác nhau nhờ việc xử lý JavaScript và cập nhật nội dung DOM. Video nhấn mạnh rằng "cái kiến trúc phía dưới của nó thì nó chỉ có single page thôi", giải thích tại sao SPA có thể có nhiều "trang" nhưng vẫn chỉ là một trang duy nhất về mặt kiến trúc.
Demo minh họa MPA: Video minh họa MPA bằng một ví dụ đơn giản với 3 file HTML (index, about, contact), cho thấy mỗi lần chuyển trang đều tải lại toàn bộ trang. "Khi mà các bạn bấm chuyển trang này, thực sự là nó tải xuống một cái file mới và nó tải lại từ đầu luôn."
So sánh SPA và MPA: Video so sánh hai kiến trúc dựa trên các tiêu chí: tốc độ, SEO, trải nghiệm người dùng, khả năng tái sử dụng code, và phụ thuộc giữa frontend và backend. SPA được đánh giá là nhanh hơn khi sử dụng, nhưng có thể chậm hơn trong lần tải đầu tiên nếu không được tối ưu tốt. MPA được đánh giá là thân thiện với SEO hơn, nhưng chậm hơn khi sử dụng. Về khả năng tái sử dụng code, SPA được đánh giá cao hơn.
Lựa chọn SPA hay MPA: Video kết luận rằng việc lựa chọn phụ thuộc vào yêu cầu cụ thể của dự án. Nếu cần tốc độ phát triển nhanh và trải nghiệm người dùng đơn giản, MPA là lựa chọn tốt. Nếu cần trải nghiệm người dùng tốt hơn, khả năng tái sử dụng code cao và sẵn sàng đầu tư nhiều hơn vào phát triển, SPA là lựa chọn phù hợp. Video cũng nhắc đến các vấn đề về hiệu năng server khi sử dụng SPA và MPA. Cuối cùng, video nhấn mạnh khái niệm "Server-Side Rendering (SSR)" và "Client-Side Rendering (CSR)" trong ngữ cảnh SPA.

Video sử dụng nhiều ví dụ thực tế và demo trực quan để giải thích các khái niệm, giúp người xem dễ dàng hiểu và phân biệt SPA và MPA. Giọng điệu của video thân thiện và dễ hiểu, phù hợp với người mới bắt đầu học về phát triển web.