Các ứng dụng web có nhiều dạng khác nhau và sử dụng nhiều mẫu kết xuất khác nhau để hiển thị nội dung cho người dùng. Các mẫu này quyết định cách ứng dụng được xây dựng, cách ứng dụng được phục vụ cho người dùng và cách ứng dụng tương tác với trình duyệt.
Trong bài đăng này, chúng ta sẽ khám phá một số mẫu kết xuất phổ biến nhất được sử dụng trong phát triển web, bao gồm các trang web tĩnh, ứng dụng một trang, kết xuất phía máy chủ (SSR), tạo trang web tĩnh (SSG), tái tạo tĩnh gia tăng (ISR), hydrat hóa, hydrat hóa một phần, đảo, SSR phát trực tuyến và khả năng tiếp tục lại.
1. Trang web tĩnh
Các trang web tĩnh là loại ứng dụng web cơ bản nhất. Chúng bao gồm các tệp HTML, CSS và JavaScript được kết xuất trước và phục vụ trực tiếp cho trình duyệt của người dùng. Điều này có nghĩa là mọi trang trên trang web là một tệp riêng biệt và mỗi lần người dùng yêu cầu một trang, máy chủ chỉ phục vụ tệp đó. Các trang web tĩnh nhanh và nhẹ, nhưng chúng thiếu tính tương tác và nội dung động.
2. Trang web một trang
Ứng dụng trang đơn (SPA) trái ngược với các trang web tĩnh. Thay vì phục vụ một tệp HTML mới cho mỗi trang, một tệp HTML duy nhất được tải khi người dùng truy cập trang web lần đầu tiên. Tất cả các tương tác tiếp theo với trang web đều được xử lý bằng mã JavaScript cập nhật DOM (Mô hình đối tượng tài liệu) trực tiếp. Điều này có nghĩa là trang không bao giờ tải lại và người dùng có thể điều hướng giữa các phần khác nhau của trang web mà không cần yêu cầu HTTP mới. SPA có tính tương tác cao và có thể cung cấp trải nghiệm người dùng liền mạch, nhưng chúng cũng có thể tải chậm và khó tối ưu hóa cho các công cụ tìm kiếm.
3. Kết xuất phía máy chủ (SSR)
Server-side rendering (SSR) là một kỹ thuật cho phép máy chủ tạo HTML cho một trang web một cách động. Điều này có nghĩa là thay vì phục vụ một tệp HTML được dựng sẵn, máy chủ sẽ tạo HTML ngay lập tức để phản hồi yêu cầu của người dùng. SSR cho phép nội dung động hơn các trang web tĩnh, nhưng không tương tác bằng SPA. SSR thường được sử dụng kết hợp với SPA để cung cấp thời gian tải ban đầu nhanh hơn và tối ưu hóa công cụ tìm kiếm tốt hơn.
4. Tạo trang web tĩnh (SSG)
Tạo trang tĩnh (SSG) là một kỹ thuật dựng trước tất cả các trang trên một trang web trước khi chúng được phục vụ cho người dùng. Điều này tương tự như các trang web tĩnh, nhưng SSG cho phép nội dung động hơn bằng cách sử dụng các công cụ tạo mẫu và nguồn dữ liệu để tạo các trang. SSG nhanh hơn SSR vì tất cả các trang đều được tạo trước, nhưng vẫn thiếu tính tương tác của SPA. Các trang web được xây dựng bằng kỹ thuật này thường được gọi là các trang JAMStack.
5. Tái tạo tĩnh gia tăng (ISR)
Tái tạo tĩnh gia tăng (ISR) là sự kết hợp giữa SSG và SSR cho phép thêm nội dung động vào các trang được tạo trước. Với ISR, máy chủ sẽ tạo HTML cho từng trang ban đầu, nhưng sau đó cập nhật trang theo định kỳ bằng dữ liệu mới khi bộ nhớ đệm bị vô hiệu hóa. Điều này có nghĩa là người dùng có thể thấy nội dung mới mà không cần phải đợi toàn bộ trang tải lại. ISR là sự kết hợp tốt giữa tốc độ của SSG và tính tương tác của SSR.
6. Sự ngậm nước
Hydration là quá trình chuyển đổi một trang HTML được dựng sẵn thành một SPA hoàn toàn tương tác. Khi người dùng lần đầu truy cập một trang web sử dụng SSR hoặc SSG, máy chủ sẽ gửi một tệp HTML được dựng sẵn. Tệp này chứa tất cả các HTML, CSS và JavaScript cần thiết để dựng trang trên phía máy khách. Tuy nhiên, trang này không hoàn toàn tương tác cho đến khi mã JavaScript được thực thi. Hydration là quá trình thực thi mã JavaScript để chuyển đổi HTML được dựng sẵn thành một SPA hoàn toàn tương tác. Vấn đề với bất kỳ khuôn khổ nào sử dụng hydrat hóa là khi tải trang ban đầu, ứng dụng có thể có cảm giác như bị đóng băng trong khi Javascript vẫn đang thực thi để tiếp quản quá trình dựng. Để giải quyết vấn đề này, chúng ta có hydrat hóa một phần.
7. Hydrat hóa một phần
Cấp nước một phần là kỹ thuật cho phép chỉ cấp nước cho một phần của trang. Điều này có nghĩa là thay vì cấp nước cho toàn bộ trang, chỉ những phần cần tương tác mới được cấp nước. Điều này có thể hiệu quả hơn so với việc cấp nước cho toàn bộ trang, đặc biệt là đối với các trang lớn cần nhiều mã JavaScript để thực thi. Cấp nước một phần cũng có thể cải thiện hiệu suất của SPA bằng cách giảm lượng mã cần thực thi trên mỗi tương tác.
8. Đảo
Islands là các phần độc lập của ứng dụng web có thể được hiển thị riêng biệt và sau đó kết hợp lại với nhau ở phía máy khách. Điều này cho phép hiển thị hiệu quả hơn, vì chỉ những phần của trang đã thay đổi mới cần được hiển thị lại. Islands có thể được sử dụng kết hợp với SSR hoặc SSG để cung cấp trải nghiệm tương tác hơn mà không làm giảm hiệu suất.
9. Phát trực tuyến SSR
Streaming SSR là một kỹ thuật cho phép máy chủ gửi HTML đến máy khách ngay khi có sẵn, thay vì phải đợi toàn bộ trang được tạo. Điều này có thể cải thiện tốc độ nhận thức của trang web, vì người dùng có thể xem nội dung ngay khi có sẵn. Streaming SSR cũng có thể cải thiện hiệu suất của các trang web trên mạng chậm hoặc không đáng tin cậy. Kỹ thuật này được hỗ trợ trong Next.js 13 với thư mục ứng dụng.
10. Khả năng tiếp tục
Nếu có cách nào đó để chúng ta có thể loại bỏ hoàn toàn hydrat hóa vì nó có vẻ như là nguồn gốc của rất nhiều vấn đề thì sao? Vâng, đó là nơi mà khả năng tiếp tục xuất hiện, một mô hình kết xuất mới đang được tiên phong bởi khuôn khổ Qwik. Nó có một cách tiếp cận thú vị, trong đó một trang web và tất cả dữ liệu của nó, thậm chí cả những thứ như trình lắng nghe sự kiện JavaScript được tuần tự hóa thành HTML, sau đó mã JavaScript thực tế được chia thành hàng tấn các phần nhỏ, nghĩa là quá trình tải trang ban đầu luôn là HTML tĩnh, không cần hydrat hóa, bất kỳ JavaScript nào cần thiết cho tính tương tác đều được tải chậm trong nền.
Phần kết luận
Tóm lại, các ứng dụng web có nhiều dạng khác nhau, mỗi dạng có ưu và nhược điểm riêng. Việc lựa chọn đúng mẫu kết xuất cho một ứng dụng web đòi hỏi phải cân nhắc các yếu tố như hiệu suất, tính tương tác và tối ưu hóa công cụ tìm kiếm. Bằng cách hiểu các mẫu kết xuất khác nhau có sẵn, các nhà phát triển có thể tạo ra các ứng dụng web cung cấp trải nghiệm người dùng nhanh, phản hồi và thú vị.