Astro là sự trở về với nền tảng cơ bản của web
(websmith.studio)"Astro là framework tốt nhất dành cho lập trình viên"
- Astro là một framework web thế hệ mới được tối ưu cho các website lấy nội dung làm trung tâm, mặc định theo đuổi chính sách Zero JavaScript, mang lại hiệu năng vượt trội và trải nghiệm phát triển đơn giản
- Với cách tiếp cận độc đáo gọi là Island Architecture, chỉ những phần cần thiết mới dùng JavaScript, còn lại được xử lý bằng HTML tĩnh nhanh gọn
- Các trang dùng Astro cho tốc độ tải nhanh hơn hơn 40% so với nền tảng React truyền thống, từ đó mang lại lợi ích thực tế về SEO, trải nghiệm người dùng và tỷ lệ chuyển đổi
- Khác với nhiều framework khác, logic dữ liệu và component frontend được tách biệt rõ ràng, đồng thời có thể kết hợp với nhiều framework như React·Vue
- Tuy vậy, trong những trường hợp cần SPA, quản lý trạng thái phức tạp hoặc routing quy mô lớn, các framework hiện có như Next.js có thể phù hợp hơn
Astro là gì
- Astro là một framework web xuất hiện từ năm 2021, được thiết kế tập trung vào các website lấy nội dung làm trung tâm, khác với các framework JS truyền thống vốn hướng đến ứng dụng phức tạp
- Triết lý cốt lõi là "ưu tiên nội dung, ưu tiên máy chủ, mặc định là Zero JavaScript", và hệ công cụ cũng trực quan, dễ dùng
Island Architecture
- Astro giới thiệu khái niệm "Island Architecture", theo đó JavaScript không được áp dụng cho toàn bộ trang mà chỉ cho một số phần thật sự cần thiết
- Với những trang chủ yếu là văn bản như bài blog, nội dung sẽ được render hoàn toàn bằng HTML, còn chỉ các phần cần tương tác như bình luận hoặc carousel mới tải JS
- Nhờ vậy, trang rất nhanh và nhẹ
Hiệu năng và tác động thực tế
- Các website xây trên Astro ghi nhận tốc độ tải nhanh hơn hơn 40% so với framework React truyền thống
- Cải thiện hiệu năng này dẫn đến kết quả kinh doanh rõ rệt như thứ hạng tìm kiếm, mức độ hài lòng của người dùng và tỷ lệ chuyển đổi
- Trên thiết bị chậm hoặc trong môi trường mạng yếu, khác biệt về tốc độ còn dễ cảm nhận hơn nữa
Trải nghiệm lập trình viên (Developer Experience)
- Việc thiết lập dự án đơn giản, và trợ lý thiết lập thân thiện tên “Houston” sẽ hướng dẫn bạn
- Component Astro hỗ trợ logic chỉ chạy ở build time (ví dụ: fetch dữ liệu, gọi API, v.v.)
- Không cần bận tâm quá nhiều đến quản lý trạng thái phức tạp, lifecycle hay hook; bạn có thể chỉ dùng JS phía client khi thật sự cần
Khả năng tương thích với nhiều framework
- Có thể kết hợp tự do các framework phổ biến như React, Vue với Astro
- Ví dụ: dashboard quản trị dùng React, trực quan hóa dữ liệu dùng Vue, phần còn lại dùng Astro
Các tính năng tiện dụng thực sự “dùng được”
- Có thể import trực tiếp Markdown như một component để sử dụng
- Hỗ trợ pipeline build hiện đại như TypeScript, Sass, tối ưu ảnh, hot module replace, v.v.
- Có thể chọn static site / SSR / render kết hợp, linh hoạt áp dụng theo tính chất dự án
Những lĩnh vực Astro tỏa sáng
- Website marketing, blog, catalog thương mại điện tử, portfolio và các website lấy nội dung làm trung tâm đều đạt hiệu năng xuất sắc
- Đặc biệt lý tưởng trong môi trường không cần quản lý trạng thái phía client quá phức tạp
Đánh đổi
- Với những dự án mà SPA, routing phức tạp hoặc chia sẻ trạng thái giữa các component là yếu tố quan trọng, các framework khác như Next.js sẽ phù hợp hơn
- Quy mô hệ sinh thái vẫn còn nhỏ, và routing dựa trên file có thể tạo cảm giác hạn chế trong các dự án lớn
Cách bắt đầu nhanh
- npm create astro@latest my-site
- Khi cần, thêm framework bằng
npx astro add react - Thêm trang vào
src/pages/, thêm component vàosrc/components/rồi bắt đầu phát triển
Ý nghĩa của Astro
- Trong bối cảnh các framework JS gần đây ngày càng phức tạp, Astro đưa web trở về nền tảng cốt lõi của nó (nhanh, dễ truy cập và lấy nội dung làm trung tâm), đồng thời vẫn đảm bảo sự thuận tiện cho lập trình viên
- Triết lý thiết kế “site nhanh là mặc định, chỉ thêm tính tương tác ở nơi cần thiết, tự do dùng framework mình muốn” mang lại sự hài lòng cho lập trình viên
- Từ blog đến thương mại điện tử, Astro là lựa chọn rất đáng khuyến nghị cho các dự án lấy nội dung làm trung tâm
1 bình luận
Ý kiến trên Hacker News
Các framework web truyền thống luôn “hydrate” toàn bộ trang bằng JavaScript; ví dụ, ngay cả khi một bài blog đơn giản chỉ có một widget tương tác duy nhất thì toàn bộ trang vẫn bị xử lý bằng JavaScript. Trong khi đó, Astro mặc định dùng HTML tĩnh và chỉ cho những phần cần thiết hoạt động như các “JavaScript island”. Trước đây cách này được gọi là “progressive enhancement” hoặc đơn giản là “trang web”, và đó từng là tiêu chuẩn khi xây dựng website. Sau đó SPA xuất hiện nên progressive enhancement dần ít được dùng hơn. Bây giờ người ta gọi là “JavaScript island”, nhưng rốt cuộc chỉ là quay lại cách làm cũ. Với những lập trình viên web mới quan tâm tới chủ đề này, tôi muốn giới thiệu khái niệm progressive enhancement
Rất nhiều khi ai đó nghe mô tả tính năng của một công cụ mới rồi tưởng nhầm nó chỉ là thứ ta đã làm từ trước. Nhưng giá trị thực sự của Astro là nó có thể tích hợp với nhiều framework JavaScript khác nhau và để mỗi framework chỉ xử lý một subtree HTML riêng biệt. Lúc này trạng thái ban đầu được render thành chuỗi và được hydrate ở phía client bằng dữ liệu đã lấy sẵn. Nó phát huy giá trị khi bạn muốn chỉ dùng các framework như React/Svelte/Solid/Vue cho một phần của trang và muốn tải sẵn dữ liệu từ server. Tuy nhiên cách này không phải là “progressive enhancement”. HTML trước khi hydrate không nhất thiết phải hoạt động đúng; ví dụ một
<form>có thể không chạy nếu không có JavaScript. Chính những chi tiết như vậy là thứ chỉ có thể nhận ra khi tiếp cận với sự tò mò thay vì thái độ hoài nghi mỉa maiHoàn toàn đồng ý, Astro là một công cụ rất hay, nhưng điều khó nhất với tôi lại là phải hiểu đủ loại thuật ngữ do các lập trình viên vào nghề sau năm 2010 tạo ra để mô tả cách web hoạt động
Đây không phải khái niệm mới, nhưng cách làm hiện nay cho cảm giác tinh tế hơn nhiều. Trước đây tôi từng làm web tương tác bằng PHP và jQuery, tức là thời kỳ trước khi React và SPA xuất hiện. Nghĩ lại thì về mặt kiến trúc, cách làm ngày xưa còn thanh lịch hơn, nhưng lúc đó việc debug hay DX thật sự rất tệ. Tôi không muốn quay lại khoảng thời gian phải debug frontend bằng PHP nữa. SPA vẫn còn chỗ dùng cho các dashboard phức tạp hay ứng dụng tương tác cao. Astro cho phép quản lý code server và client ở cùng một nơi, đồng thời ranh giới cũng rõ ràng, nên không cần phải parse dữ liệu bằng PHP rồi chuyển sang JS nữa, nhờ đó DX được cải thiện đáng kể
Tôi nhớ thời mà người ta gọi thứ này là AJAX. Cảm giác như chúng ta đã hoàn toàn lạc mất mạch rồi
Tôi nghĩ các framework web thời kỳ đầu thật sự đã đi đúng hướng trong chuyện website không trạng thái và server rendering
Cá nhân tôi rất khuyến nghị Astro. Ban đầu tôi nghĩ nó chỉ là “công cụ thêm tính năng include vào html và css”, nhưng sau khi dùng để làm website cá nhân và làm mới website Matrix Conference, tôi thấy nó thật sự rất vui vì dùng hầu như không hề phiền phức
Các ưu điểm chính của Astro:
Nếu Astro lấy html và css làm trung tâm và chỉ thêm js khi cần, thì việc tự tạo trực tiếp các file .html, .css, .js trong thư mục rồi deploy cũng mang lại trải nghiệm tương tự. Thậm chí còn có thể nhanh hơn vì không có dev-time overhead hay bloat không cần thiết. Ngoài ra, tôi cũng nghi ngờ việc inline CSS từng là vấn đề hiệu năng lớn đến mức đó. Qua kinh nghiệm với hàng trăm website, rất hiếm khi CSS là nút thắt cổ chai; thực tế vấn đề gần như luôn là mạng
Chỉ có đúng một điểm khiến tôi tiếc là khi routing trở nên phức tạp hơn thì mức độ trừu tượng hóa tăng rất nhanh và ngược lại làm mọi thứ rối hơn. Vì độ phức tạp luôn đi kèm friction, cuối cùng tôi đã chọn cách khác
Nếu bạn cần “tính năng include cho html và css”, thì có thể bật server-side include trên một web server thông thường như nginx là được. Đó là giải pháp đã ổn định hơn 20 năm và gần như không cần bảo trì. Cũng không có thêm rủi ro bảo mật kiểu template engine, vẫn tránh được redundancy mà không phải lo lỗ hổng backend vì nó chỉ là include thuần túy
Sau 20 năm chỉ làm data/backend, tôi quay lại vì một dự án frontend. Sau khi vật lộn với React, tôi chuyển sang Astro+Svelte và kết quả rất thành công. Vì nó lấy HTML/CSS làm trung tâm nên cấu trúc code dễ đoán và gọn gàng; ngay cả khi tôi bàn giao frontend cho một lập trình viên có kinh nghiệm React thì họ cũng gần như thích nghi ngay lập tức
Việc dùng cụm “framework truyền thống” để chỉ các framework SPA/Virtual DOM làm tôi cảm nhận rất rõ khoảng cách thế hệ. Backbone, jQuery mới thật sự là framework web truyền thống, và chúng mới là thứ hoạt động đúng như mô tả trong bài về blog post
Tôi nghĩ “truyền thống” rốt cuộc phụ thuộc vào việc bạn sinh ra khi nào. Với tôi, Internet truyền thống là modem 56k, forum vbulletin, mod GTA:VC, IRC... Với thế hệ lớn tuổi hơn có thể là BBS, còn với người trẻ hơn thì Discord sẽ là Internet “truyền thống”. Trong chính trị cũng có hiện tượng tương tự: ai cũng có xu hướng nghĩ thời mình còn trẻ là tốt nhất
Tôi nhớ Backbone hướng tới client MVC cho pure SPA
Tôi thắc mắc vì sao các framework SSR như Astro, NextJS lại không hỗ trợ static page có dynamic route giống SvelteKit. Ví dụ một trang như /todos/[todoId] thì trong NextJS không thể đưa thẳng vào static bundle được. Trong khi đó SvelteKit dùng 404.html nên dù về mặt kỹ thuật là 404, nó vẫn hoạt động hoàn hảo trên Cloudflare hay trong môi trường mobile webview. Tính năng này đặc biệt hữu ích khi bundle cho mobile webview
Tôi đồng ý một phần, nhưng kiểu thiết kế này cũng có nhược điểm. Nếu hard reload một URL như /todos/123 trong SPA, trình duyệt sẽ yêu cầu xem file đó có thật trên server hay không, và nếu không có thì sẽ nhận về 404. Vì vậy trang 404 phải dùng client routing để tải lại dữ liệu và xử lý, mà như vậy thì nhất định cần cấu hình HTTP server như nginx. Nói cách khác, chỉ dùng file tĩnh thuần túy là không thể. Ngoài ra, theo HTTP spec thì browser cache sẽ không bao giờ lưu response 404. Vì vậy khi hard reload hoặc mở bookmark, bạn sẽ không bao giờ tận dụng được cache. Nếu thấy kiểu cấu hình này là gánh nặng thì dùng query parameter như /todo?id=123 có khi còn hợp lý hơn
Có thể tôi hiểu sai, nhưng tôi từng triển khai dynamic routing/page trong static build của Next hay Astro. Khi dùng CMS như contentful hoặc storyblok, tôi để editor tự do tạo route và component, rồi dùng pattern [...slug] để bao phủ mọi route. Tôi tận dụng hàm getStaticPaths để pre-generate toàn bộ page. Nếu bật tùy chọn ISR/ISP thì cả những page chưa biết ở build time cũng sẽ được prerender động. Trong Next thì gọi là dynamic routes, còn Astro gọi là dynamic pages
Tham khảo: Next dynamic routes, Astro dynamic pages
Có thể tôi đang hiểu nhầm, nhưng hàm
getStaticPathscủa Astro có vẻ hỗ trợ đúng thứ bạn muốnTham khảo
Tôi cũng thích deploy tĩnh nên chia sẻ thêm để tham khảo: NextJS cũng hỗ trợ tạo tham số tĩnh
Tôi không dám nói là mình hiểu hoàn toàn Astro hay các framework khác, nhưng có lẽ bạn nên xem thử server islands của Astro có gần với điều bạn đang cần không
Tôi thấy bản thân các cuộc thảo luận về frontend quá hỗn loạn. Điều mà bài viết đang nói rốt cuộc quy về câu hỏi “dùng trình duyệt như HMI hay như application runtime?”. Nhưng phần lớn tranh luận lại toàn là những phát biểu mơ hồ như “mới mẻ”, “load nhanh”. Tôi nghĩ bầu không khí quảng bá framework như một thương hiệu quá giống ngành thời trang
Tôi cho rằng chính ngành thời trang là phép so sánh hay nhất để mô tả các cuộc thảo luận về frontend framework. Rất hiếm khi người ta mổ xẻ những tuyên bố như “content-driven”, “server-first” theo nghĩa kỹ thuật một cách nghiêm ngặt
Tôi không hiểu tại sao lại xem “load nhanh” là điều hão huyền; đó rõ ràng là một yếu tố quan trọng trong thực tế
Gần đây tôi làm một website cho cơ sở y tế bằng Astro, và nó dễ hơn rất nhiều so với thời trước dùng Wordpress. Lại còn có thể host miễn phí trên những nơi như Netlify nên không phải lo bị hack. Tôi còn làm cả một CMS đơn giản dựa trên git để khách hàng tự sửa nội dung được. Cảm giác web development đúng là đã tiến bộ rất nhiều
Không biết đây có phải là website bạn làm vì người quen nhờ không, hay bạn thường kiếm các hợp đồng làm website cho cơ sở y tế bằng cách nào?
Hãy cẩn thận vì phí băng thông của Netlify cao hơn Vercel
Điểm mạnh lớn nhất của Astro là có thể làm việc chỉ bằng HTML hoặc Web Component mà không phụ thuộc vào các framework khác như React hay Vue. Tuy nhiên Astro cũng giống Next, Nuxt ở chỗ hỗ trợ SSR, ISR, SSG và middleware
Điểm khác biệt là kiến trúc island, nhờ đó có thể triển khai micro frontend
Ví dụ trong một công ty, nhiều team khác nhau có thể lần lượt làm phần thanh toán, giỏ hàng, trang sản phẩm rồi tích hợp chung vào một trang, đồng thời có thể tự kiểm soát cách render. Cũng có thể chia sẻ global state, nên mỗi team có thể độc lập chịu trách nhiệm toàn bộ và phát triển/deploy theo từng phần
Tất nhiên đây là kiểu giải pháp chỉ cần cho dự án lớn. Nếu mọi team đều tự dùng React theo cách khác nhau thì sẽ dẫn tới tình trạng trộn lẫn nhiều version, còn nếu tách theo kiến trúc như Astro thì giải quyết được vấn đề đó
Cá nhân tôi không chắc nó có thay đổi hoàn toàn web hay không. Cảm giác như Next/Nuxt nhưng bỏ bớt sự phụ thuộc vào framework và thêm kiến trúc island. Dù vậy tôi vẫn khuyên nên thử
Nếu bạn muốn rời khỏi React/Vue để chuyển sang web-component hoặc muốn thay thế Next/Nuxt, Astro là lựa chọn tốt để đi từng bước
Với tôi Astro không hoàn hảo trong mọi tình huống. Có những lúc nếu chỉ cần offline rendering thì thật sự không có lý do gì phải cố dùng JavaScript
Kiến trúc island cũng có giới hạn, và output sau build nhiều khi bị inline quá mức
Thành thật mà nói, tôi thấy hype của Astro phần lớn nhờ Vite hơn. Vite thật sự rất tuyệt
Tôi không muốn Next.js được khuyến nghị như framework tiêu chuẩn của React. Frontend cần tư duy phản biện nhiều hơn. Remix (React Router v7) hay TanStack là những lựa chọn thay thế tốt hơn hẳn
Tôi cũng đồng ý. Next.js đúng là từng có tiềm năng, nhưng từ sau khi Vercel can thiệp thì tôi thấy nó thụt lùi rất nhiều. Tôi dùng từ v10, đã trải qua giai đoạn hỗn loạn của v13 và cả tới v15, nên thật sự khá thất vọng. React và Next.js thay đổi quá nhanh đến mức không thể theo kịp, và tôi thấy có quá nhiều thay đổi chỉ để thay đổi hơn là vì thật sự cần thiết
Tôi thậm chí còn muốn ngừng khuyến nghị chính React như framework mặc định. Theo tôi, HTML/CSS/JS tốt hơn nhiều cho frontend development
Tôi nghĩ Remix/React Router v7 đang đi đúng hướng. Đặc biệt nếu Remix dùng preact và tập trung vào web standard thì có thể sẽ đưa chúng ta trở lại cách làm website vững chắc hơn. Tuy nhiên quá trình chuyển từ Remix sang RR7 không được mượt mà, nên tôi đã phải rewrite dự án
Tôi nghĩ những nguyên tắc nền tảng của web vẫn còn nguyên giá trị. Với các lập trình viên dùng PHP, Spring, Quarkus, ASP.NET MVC, có thể họ không cảm nhận rõ môi trường phát triển web dựa trên JS framework đã trở nên vất vả đến mức nào. Do bầu không khí ngành nghề bị dẫn dắt bởi xu hướng thời trang, tôi thấy quay về với các nguyên tắc cơ bản không hề dễ dàng