Cộng đồng phát triển web đang tham gia vào một cuộc thảo luận sôi nổi về việc liệu các tính năng CSS hiện đại như View Transitions API có thể loại bỏ nhu cầu sử dụng Single-Page Applications ( SPAs ) hay không. Cuộc tranh luận này bắt nguồn từ một bài viết gần đây cho rằng các khả năng gốc của trình duyệt đã khiến việc định tuyến phía client trở nên lỗi thời, nhưng các nhà phát triển đang phản bác với những quan điểm sắc nuắt về thời điểm SPAs vẫn cần thiết.
Cuộc trò chuyện này tiết lộ sự chia rẽ cơ bản trong cách các nhà phát triển nhìn nhận mục đích và giá trị của SPAs trong phát triển web hiện đại.
Các tính năng CSS hiện đại cho chuyển tiếp trang:
- View Transitions API: Cho phép chuyển tiếp trang gốc, khai báo giữa các tài liệu mà không cần JavaScript
- Speculation Rules: Cho phép trình duyệt tải trước hoặc hiển thị trước các trang dựa trên hành vi người dùng (di chuột, chạm vào liên kết)
- Back/Forward Cache (bfcache): Chụp ảnh toàn bộ trang để khôi phục tức thì trong quá trình điều hướng
- Chuyển tiếp fade giữa các trang: Có thể thực hiện chỉ với CSS, không cần định tuyến phía client
- Chuyển tiếp phần tử được chia sẻ: Tạo hiệu ứng động cho các phần tử giữa các trang bằng thuộc tính CSS
view-transition-name
Mục đích thực sự của SPAs vượt xa những chuyển tiếp mượt mà
Nhiều nhà phát triển cho rằng bài viết gốc đã hiểu sai lý do tại sao SPAs tồn tại ngay từ đầu. Cộng đồng nhấn mạnh rằng SPAs không được tạo ra chủ yếu cho những chuyển tiếp trang bắt mắt, mà để giải quyết những vấn đề cơ bản hơn xung quanh việc quản lý trạng thái ứng dụng và trải nghiệm người dùng.
Một hiểu biết quan trọng từ cuộc thảo luận tập trung vào các ứng dụng nặng về phiên làm việc, nơi người dùng dành thời gian dài tương tác với các giao diện phức tạp. Hãy nghĩ đến các ứng dụng như Gmail , Slack , hoặc các công cụ cộng tác nơi việc duy trì trạng thái phía client và giảm thiểu các yêu cầu server trở nên quan trọng cho hiệu suất. Những ứng dụng này được hưởng lợi từ việc tải một bundle code đáng kể một lần, sau đó hoạt động với lưu lượng mạng tối thiểu cho các tương tác tiếp theo.
Cuộc tranh luận cũng làm nổi bật cách SPAs vượt trội trong các tình huống có điều kiện mạng kém. Đối với người dùng có kết nối không ổn định hoặc mạng độ trễ cao, việc tải xuống toàn bộ frontend một lần và lưu cache cục bộ có thể cung cấp trải nghiệm tốt hơn nhiều so với việc liên tục tải các trang được render từ server.
So sánh hiệu suất SPA và MPA:
- Lợi ích của SPA: Tải một gói mã duy nhất, logic phía client được cache, ít yêu cầu mạng tiếp theo, khả năng offline tốt hơn
- Lợi ích của MPA: Tải trang ban đầu nhanh hơn, SEO tốt hơn, kiến trúc đơn giản hơn, tối ưu hóa trình duyệt tự nhiên
- Nhược điểm của SPA: Kích thước gói ban đầu lớn (thường là hàng megabyte JavaScript), quản lý state phức tạp, overhead hydration
- Nhược điểm của MPA: Nhiều yêu cầu server cho việc điều hướng, khả năng xảy ra layout shift, rendering hybrid phức tạp hơn
Sự đánh đổi về độ phức tạp trong phát triển hiện đại
Các thành viên cộng đồng chỉ ra rằng bối cảnh hiện tại thực sự đã chuyển hướng về Multi-Page Applications ( MPAs ) thay vì SPAs . Các framework như Next.js và Nuxt đã trở thành lựa chọn mặc định cho các dự án mới, đại diện cho việc quay trở lại server-side rendering với việc cải tiến client-side có chọn lọc.
Tuy nhiên, sự chuyển đổi này đi kèm với những thách thức phức tạp riêng. Các nhà phát triển lưu ý rằng việc triển khai kiến trúc MPA phù hợp với các framework hiện đại có thể khó khăn hơn đáng kể so với việc xây dựng SPAs truyền thống. Nhu cầu quản lý cẩn thận ranh giới server-client và xử lý các tình huống rendering lai thêm các lớp phức tạp mà nhiều đội ngũ gặp khó khăn.
Làm MPA nghiêm ngặt khó hơn làm SPA , khó hơn rất nhiều. Bạn phải quan sát sự phân biệt server/client chặt chẽ hơn nhiều, vì cùng một trang có thể được chia đôi về mặt server/client rendered.
Kiến trúc Component và trải nghiệm nhà phát triển
Ngoài các cân nhắc về hiệu suất, cuộc thảo luận tiết lộ rằng nhiều nhà phát triển đánh giá cao SPAs vì kiến trúc dựa trên component và trải nghiệm phát triển của chúng. Khả năng tạo ra các component có thể tái sử dụng, được đóng gói với styling có phạm vi đã trở thành nền tảng của quy trình phát triển web hiện đại.
Khía cạnh này của cuộc tranh luận chạm đến những câu hỏi rộng hơn về năng suất nhà phát triển và tổ chức code. Trong khi các web component gốc tồn tại như một giải pháp thay thế, hệ sinh thái và công cụ xung quanh các component dựa trên framework vẫn trưởng thành và được áp dụng rộng rãi hơn.
Hướng dẫn trường hợp sử dụng:
- Chọn SPA cho: Các ứng dụng tương tác ( Gmail , Slack , công cụ cộng tác), ứng dụng có nhiều phiên làm việc, điều kiện mạng kém, trạng thái phức tạp ở phía client
- Chọn MPA cho: Trang web tĩnh, trang marketing, blog, trang web tập trung vào nội dung, ứng dụng quan trọng về SEO
- Phương pháp kết hợp: Render phía server với cải tiến có chọn lọc ở phía client sử dụng các framework hiện đại như Next.js hoặc Nuxt
Tìm kiếm công cụ phù hợp cho công việc
Sự đồng thuận của cộng đồng dường như đang hướng tới một cách tiếp cận sắc nuắt hơn: chọn kiến trúc phù hợp dựa trên trường hợp sử dụng cụ thể thay vì mặc định một giải pháp. Các trang web tĩnh, trang marketing và các site tập trung vào nội dung được hưởng lợi từ server-side rendering với các cải tiến CSS . Trong khi đó, các ứng dụng tương tác với quản lý trạng thái phức tạp, tính năng thời gian thực hoặc khả năng offline vẫn biện minh cho cách tiếp cận SPA .
Cuộc thảo luận cũng nhấn mạnh tầm quan trọng của việc hiểu sự phân biệt giữa website và web application. Nhiều nhà phát triển cho rằng xu hướng của ngành trong việc đối xử với tất cả các dự án web như các ứng dụng đã dẫn đến việc over-engineering các site đơn giản với độ phức tạp không cần thiết.
Khi khả năng trình duyệt tiếp tục phát triển với các tính năng như View Transitions API và Speculation Rules , bối cảnh có thể sẽ thấy sự tinh chỉnh thêm. Hiểu biết quan trọng từ cuộc tranh luận cộng đồng này là cả hai cách tiếp cận đều có vị trí của chúng, và phát triển web thành công đòi hỏi việc khớp kiến trúc với các yêu cầu và ràng buộc cụ thể của từng dự án.
Tham khảo: It's time for modern CSS to kill the SPA