Astro là gì?
Astro framework là một công cụ cho phép bạn xây dựng trang website bằng các framework JavaScript mà bạn yêu thích, nhưng nó sẽ không gửi bất kỳ đoạn JavaScript nào đến trình duyệt của người dùng ngay lần đầu. Điều này có nghĩa là trang web sẽ tải nhanh hơn vì không cần tải bất kỳ tập tin JavaScript nào, nhưng vẫn có thể sử dụng các tính năng và công nghệ mà framework JavaScript cung cấp cho việc xây dựng trang web. Để làm được điều này, Astro nâng cấp từ Server-Side Rendering, Progressive Hydration lên một tầm cao mới và đặt tên nó là Islands Architecture.
Designed by pikisuperstar / Freepik
Server-Side Rendering thì đã quá rõ ràng, mình sẽ bỏ qua trong bài viết này.
Progressive Hydration là gì?
Hình: https://blog.logrocket.com/
Progressive Hydration là một khái niệm trong lĩnh vực xây dựng trang web app và đề cập đến việc sử dụng kỹ thuật hydration để xây dựng trang web tĩnh nhưng cho phép các thành phần JavaScript được kích hoạt trên trình duyệt theo từng giai đoạn.
Với Progressive Hydration, các thành phần JavaScript được kích hoạt theo từng bước riêng biệt dựa trên nhu cầu của người sử dụng. Ví dụ, nếu người dùng chỉ truy cập vào phần trang chủ của trang web, chỉ các thành phần JavaScript cần thiết cho phần trang chủ mới được kích hoạt, trong khi các thành phần khác vẫn được giữ nguyên như trong trang web tĩnh. Khi người dùng truy cập vào phần khác của trang web, các thành phần JavaScript cần thiết cho phần đó mới được kích hoạt.
Việc sử dụng Progressive Hydration cũng có thể giúp cho việc phát triển và bảo trì trang web trở nên dễ dàng hơn bởi vì bạn có thể tách riêng các phần của trang web ra làm các "cụm" riêng biệt và xây dựng chúng với các kỹ thuật và công nghệ khác nhau. Điều này cũng có thể giúp cho việc tối ưu hóa hiệu suất trang web vì bạn có thể tập trung vào việc tối ưu hóa các thành phần cụ thể của trang web mà không cần phải lo lắng về việc tối ưu hóa toàn bộ trang web cùng lúc.
Islands Architecture là gì?
Hình: patterns.dev
Islands Architecture là một kỹ thuật xây dựng giao diện người dùng cho website và ứng dụng di động. Nó bắt đầu từ việc chia các giao diện người dùng thành các "hòn đảo" riêng biệt, mỗi hòn đảo là một thành phần đơn lẻ có thể được tái sử dụng và điều chỉnh một cách độc lập trên các trang khác nhau.
Điểm mạnh của Islands Architecture là nó cho phép bạn xây dựng các thành phần giao diện người dùng độc lập và tái sử dụng chúng trên nhiều trang khác nhau, giúp tiết kiệm thời gian và công sức khi xây dựng trang web. Nó cũng cho phép bạn dễ dàng điều chỉnh và cập nhật các thành phần giao diện người dùng một cách độc lập, giúp giảm thiểu sự phụ thuộc giữa các trang và giúp cho quá trình phát triển trang web trở nên hiệu quả hơn.
Về cơ bản Islands Architecture cũng có thể coi là Progressive Hydration nhưng nó chia các thành phần của trang web ra một cách rõ ràng và chi tiết hơn. Bạn có thể vừa dùng Vue vừa dùng React (aka micro-frontend) trong app miễn là chúng nằm ở các đảo khác nhau.
Bài viết nay tới đây thôi, bữa sau mình hướng dẫn cài đặt nhé!