#astro

Astro 7.2

Astro 7.2 bổ sung các tính năng thử nghiệm như incremental static builds, tùy chọn tắt hỗ trợ session, chế độ nền cho astro preview cùng các entrypoint logger tương đối.

Nếu bạn đang phát triển ứng dụng web với Astro và muốn tối ưu hóa hiệu suất, giảm thời gian build và kiểm soát tốt hơn về tính bảo mật, câu hỏi về session support và cách chấm dứt preview trong chế độ nền trong phiên bản mới này sẽ giúp bạn áp dụng các cải tiến hiệu quả ngay từ lần triển khai tiếp theo.

What's new in Astro - July 2026

Tháng 7/2026 giới thiệu cuộc thi CodeTV GSAP Webflow, sự kiện Astro Germany cùng những cập nhật mới khác.

Là người phát triển web muốn tối ưu hiệu suất, tính tương tác và tương thích đa nền tảng cho dự án của mình, bạn nên đọc bài này để cập nhật những tính năng mới nhất của Astro—cung cấp công cụ mạnh mẽ để xây dựng trang web nhanh hơn, an toàn hơn và tương thích hơn với các công nghệ hiện đại.

Astro 7.0

Phiên bản Astro 7.0 tập trung tối ưu hiệu suất với tốc độ build nhanh hơn 15–61%, nhờ compiler Rust mới thay thế Go cũ, pipeline Markdown/MDX bằng Sätteri (Rust), Vite 8 + Rolldown (nhanh gấp 10–30 lần Rollup), cùng cơ chế rendering hàng đợi ổn định. Tính năng Routing nâng cấp với src/fetch.ts, hỗ trợ middleware Hono, cache CDN từ Netlify/Vercel/Cloudflare, và cải tiến AI agent với chế độ dev nền, phát hiện tự động cùng logging JSON có cấu trúc.

Lập trình viên phát triển web nên đọc bài này vì Astro 7.0 mang đến những cải tiến công nghệ như Rust-based compiler và Vite 8 + Rolldown, giúp tối ưu hóa hiệu suất build và giao diện người dùng, đồng thời mở rộng khả năng quản lý lưu trữ và xử lý AI, giúp xây dựng ứng dụng web nhanh hơn và hiệu quả hơn.

Astro 7.1

Bản cập nhật Astro 7.1 mang đến nhiều cải tiến như hỗ trợ CSP, phân trang, server phát triển và collections nội dung.

Lập trình viên phát triển web nên đọc bài này để khám phá cách Astro 7.1 nâng cao kiểm soát CSP (Content Security Policy) và cải thiện hiệu suất với pagination và bộ nhớ cache nội dung, giúp tối ưu hóa ứng dụng web của mình một cách hiệu quả hơn.

Daily Prompt Is Out. Long Live Spellbook of Prompt

Spellbook of Prompt là dự án mã nguồn mở mới nhằm cung cấp bộ sưu tập prompts toàn diện và được tài liệu hóa kỹ lưỡng cho các mô hình AI, hữu ích cho nhà phát triển, nhà nghiên cứu và người đam mê.

Những lập trình viên muốn tối ưu hóa hiệu suất và sáng tạo trong việc sử dụng AI để giải quyết vấn đề công nghệ, tự động hóa hoặc phát triển ứng dụng mới sẽ tìm thấy trong Spellbook of Prompt những mẫu câu hiệu quả và cách thức áp dụng chúng một cách chuyên nghiệp.

What's new in Astro - June 2026

Tháng 6/2026, Astro ra mắt phiên bản 7 với Vite 8, trình biên dịch Rust mới và Advanced Routing, cùng Starlight 0.41 tương thích Astro 7. Bài viết cũng giới thiệu nhiều tích hợp cộng đồng, công cụ, chủ đề mới, hướng dẫn di chuyển, nghiên cứu trường hợp, sự kiện sắp tới ở Đức và bộ sưu tập lớn các trang web xây dựng bằng Astro.

Lập trình viên nên đọc để cập nhật những tiến bộ mới nhất trong Astro 7, từ cải tiến hiệu năng đến các công cụ mới như Vite 8 và Rust compiler, giúp tối ưu hóa dự án web của mình hiệu quả hơn.

Different hydration and rendering strategies

Bài viết cung cấp hướng dẫn toàn diện về các chiến lược rendering và hydration trên web, từ static generation, CSR, SSR, streaming SSR, islands architecture, React Server Components (RSC), đến fine-grained reactivity (SolidJS, Svelte 5) và Qwik's resumability. Nó so sánh ưu nhược điểm của từng phương pháp bằng ví dụ code, đồng thời giới thiệu các tính năng mới trong Next.js 16.3 như Cache Components và Partial Prefetching nhằm tối ưu trải nghiệm điều hướng. Cuối cùng, bài viết đưa ra khuyến nghị lựa chọn: static + islands cho website nội dung, RSC cho ứng dụng, và các chiến lược chuyên biệt chỉ khi cần giải quyết vấn đề cụ thể.

Lập trình viên nên đọc bài này để tìm hiểu cách tối ưu hóa hiệu suất và trải nghiệm người dùng trong ứng dụng web bằng cách so sánh các chiến lược khác nhau, từ cơ bản đến tiên tiến, giúp chọn lựa phương pháp phù hợp với yêu cầu thực tế của dự án.

Getting started with implementing my music collection

Đang chuyển đổi bộ sưu tập nhạc hiện có sang định dạng mới sử dụng Astro, bằng cách tích hợp markdown và front matter.

Lập trình viên nên đọc bài này để chuyển đổi từ cách quản lý tập nhạc truyền thống sang Astro, một công cụ hiện đại giúp tích hợp dễ dàng với các trang web hiện đại, tối ưu hóa hiệu suất và mở rộng khả năng tương tác với dữ liệu âm nhạc một cách hiệu quả.

I launched Vibecode It Yourself

Tôi đã ra mắt Vibecode It Yourself, một dịch vụ đăng ký kiểm toán giúp thay thế các ứng dụng trả phí bằng phần mềm chuyên biệt do AI lập trình viên tạo ra.

Là một lập trình viên, bạn nên đọc bài này để khám phá cách tự động hóa và tối ưu hóa công cụ phát triển bằng cách sử dụng các công cụ mã hóa tự động, giúp tiết kiệm thời gian và chi phí trong quá trình phát triển ứng dụng.

Astro is fine I guess

Một nhà phát triển web chia sẻ trải nghiệm sử dụng Astro làm trình tạo trang tĩnh cho website công ty mới. Sau những khó khăn ban đầu với LSP trên Zed editor và cách xử lý khoảng trắng, họ đánh giá tài liệu của Astro tốt nhưng thái độ chung khá thờ ơ do hệ sinh thái JavaScript kém hấp dẫn và lo ngại từ việc Cloudflare mua lại Astro.

Bạn nên đọc bài này để hiểu cách đánh giá thực tế về Astro như một công cụ thay thế cho các công nghệ truyền thống trong phát triển trang web, đặc biệt khi nó có thể giúp tối ưu hóa hiệu suất và giảm sự phụ thuộc vào JavaScript client-side.

Whitespace in Astro 7.0

Astro 7.0 giới thiệu trình biên dịch dựa trên Rust mới, thay đổi cách xử lý khoảng trắng giữa các phần tử JSX liền kề. Để khắc phục tình trạng mất khoảng trắng, có thể thêm {' '} giữa các phần tử hoặc thiết lập compressHTML: true trong file astro.config.mjs.

Lập trình viên nên đọc bài này để hiểu cách mới về cách xử lý khoảng trắng giữa các phần tử JSX trong Astro 7.0, giúp họ điều chỉnh và tối ưu hóa bố cục UI của ứng dụng mà không cần thay đổi mã nguồn trực tiếp.

How Astro is built

Khi chạy lệnh astro build, Astro sẽ chuyển đổi file .astro thành HTML tĩnh trong thư mục dist thông qua quá trình biên dịch, tối ưu hóa và render.

Lập trình viên nên đọc bài này để hiểu cách Astro tự động chuyển đổi các file .astro thành HTML hiệu quả, tiết kiệm thời gian và nguồn lực khi xây dựng dự án web với sự kết hợp giữa HTML, JSX và các tính năng hiện đại.

The Index: Issue #193

Bản tin tuần này (#193) tổng hợp những liên kết hữu ích (Good Links™) do Retcon tài trợ.

Lập trình viên nên đọc bài này để khám phá những công cụ, kỹ thuật và xu hướng mới nhất trong ngành, giúp nâng cao hiệu suất làm việc và giữ cho kiến thức về công nghệ phần mềm luôn hiện đại và hiệu quả.

I launched HostingPicker

HostingPicker là công cụ tư vấn hosting miễn phí, cung cấp giá cả đã kiểm tra thủ công, sự đánh đổi minh bạch và đề xuất dựa trên nhu cầu dự án của bạn.

Là người phát triển cần tìm giải pháp hosting phù hợp với dự án mà không phải so sánh hàng trăm dịch vụ một cách mệt mỏi và bị lừa bởi quảng cáo hay đánh giá không khách quan.

How we built a software factory to drive Astro’s GitHub issue count to zero

Họ xây dựng một "software factory" (nhà máy phần mềm) tự động hóa việc xử lý các GitHub issue bằng các AI subagents chạy trên GitHub Actions, giúp giảm 85% số issue đang mở. Bài viết giải thích kiến trúc đằng sau quá trình tự động tái hiện lỗi, xác minh bản vá và phát hành preview releases.

Lập trình viên muốn tự động hóa kiểm tra và giải quyết vấn đề trong dự án để tiết kiệm thời gian và giảm thiểu lỗi thủ công, đặc biệt khi cần tối ưu hóa quy trình phát triển với các công cụ CI/CD hiện đại.

Astro’s GitHub issue backlog is heading to zero for the first time in 5 years. Now Cloudflare is open-sourcing the tool that did it.

Sau 6 tháng Cloudflare mua lại đội ngũ Astro, công cụ AI agent do họ phát triển đã giúp giảm đáng kể khối lượng backlog issues của Astro—lần đầu tiên trong 5 năm. Dù AI xử lý phần lớn công việc, giai đoạn quan trọng nhất vẫn do con người đảm nhiệm.

Lập trình viên nên đọc bài này để hiểu cách AI hỗ trợ tự động hóa quản lý công việc phát triển, giúp giảm bớt công sức quản lý issue và tập trung vào những nhiệm vụ sáng tạo, đồng thời khám phá cách Cloudflare kết hợp công nghệ mới với quy trình truyền thống để tối ưu hiệu quả phát triển phần mềm.

How I auto-publish scheduled posts with a Cloudflare Worker cron

Tác giả chia sẻ cách tự động xuất bản bài viết đã lên lịch trên site tĩnh Astro bằng cách sử dụng Cloudflare Worker cron. Worker này kích hoạt quá trình rebuild Pages hàng ngày thông qua deploy hook, đảm bảo lịch trình hoạt động chính xác kể cả khi có thay đổi múi giờ.

Lập trình viên muốn tự động hóa công việc phát hành bài viết định kỳ trên trang web static mà không phụ thuộc vào thời gian thay đổi giờ mùa đông/năm đông sẽ tìm hiểu cách sử dụng Cron trong Cloudflare Worker để giải quyết vấn đề hiệu quả.

I launched Events Logger

Tôi đã ra mắt Events Logger, một bảng điều khiển theo dõi sự kiện tự lưu trữ với REST API, CLI, biểu đồ và thẻ thông tin KPI trên SQLite.

Là người phát triển muốn tự động hóa và tối ưu hóa việc theo dõi sự kiện ứng dụng hoặc website mà không cần phụ thuộc vào các công cụ bên ngoài, Events Logger sẽ giúp bạn tiết kiệm thời gian và kiểm soát toàn bộ dữ liệu một cách hiệu quả.

How I made this Astro site build faster and cut its deploy size

Tác giả đã tăng tốc độ build của trang Astro 4.000 trang lên 25% và giảm kích thước artifact deploy đi 34% nhờ sử dụng kỹ thuật concurrency, chia sẻ hình ảnh OG, và Cloudflare R2.

Lập trình viên muốn tối ưu hóa hiệu suất ứng dụng web hoặc giảm kích thước deploy nhanh chóng nên đọc bài này để học cách áp dụng các kỹ thuật như concurrency và sử dụng Cloudflare R2 để cải thiện tốc độ xây dựng và giảm dung lượng bộ nhớ.

I launched waitinglists.dev: self-hostable waiting lists

Tác giả đã phát triển waitinglists.dev, một dịch vụ danh sách chờ (waiting list) có tính năng double-opt-in, có thể tự lưu trữ (self-hostable), sắp tới sẽ cung cấp mã nguồn và hướng dẫn tùy chỉnh agent.

Là lập trình viên phát triển ứng dụng cần quản lý chờ đợi khách hàng, bài này giúp bạn tự xây dựng giải pháp an toàn, linh hoạt và tiết kiệm chi phí bằng cách tự host và tùy chỉnh hệ thống chờ theo nhu cầu dự án của mình.

I launched Payment Stack Guide: choose how to get paid

Tôi đã ra mắt Payment Stack Guide, một hướng dẫn dựa trên bằng chứng về Merchant of Record và các nhà cung cấp thanh toán trực tiếp, kèm theo so sánh và công cụ quyết định.

Một lập trình viên cần đọc bài này để hiểu cách chọn và tích hợp các giải pháp thanh toán phù hợp với mô hình kinh doanh của ứng dụng, từ đó tối ưu hóa quy trình thanh toán và giảm thiểu rủi ro kỹ thuật.

I launched Disaster Lab: know what to do when something breaks

Tác giả đã ra mắt Disaster Lab, một thư viện miễn phí cung cấp các hướng dẫn thực tế (playbook) phòng ngừa và khắc phục thảm họa kỹ thuật số cho cá nhân và doanh nghiệp.

Một lập trình viên nên đọc bài này để có thể ứng phó nhanh chóng và hiệu quả khi hệ thống hoặc dự án của mình gặp sự cố kỹ thuật, từ đó giảm thiểu thiệt hại và tiết kiệm thời gian sửa chữa.

How to build an Astro integration

Hướng dẫn xây dựng một Astro integration từ đầu bằng cách sử dụng hooks, cập nhật cấu hình, chèn routes/scripts, metadata package và kiểm thử cục bộ.

Một lập trình viên muốn mở rộng khả năng của Astro bằng cách tạo các plugin hoặc extensions riêng cho dự án của mình sẽ tìm hiểu cách xây dựng một integration Astro từ cơ bản đến nâng cao.

I launched migratingto.dev: exact playbooks for moving between platforms

Người viết đã ra mắt migratingto.dev, một thư viện chứa các hướng dẫn di chuyển phiên bản giữa các nền tảng, bao gồm ma trận mất mát, timeline, kế hoạch rollback và kiểm tra xác minh.

Một lập trình viên cần đọc bài này để hiểu cách tối ưu hóa quá trình chuyển đổi hệ thống từ một nền tảng sang nền tảng khác với các kịch bản chi tiết, đánh giá rủi ro và kế hoạch khôi phục nhanh chóng, giúp giảm thiểu rủi ro và tăng hiệu quả trong dự án.

The Islands Architecture Is a Confession: If You Need Partial Hydration, You Already Lost

Kiến trúc Islands ra đời nhằm khắc phục nhược điểm của full client-side hydration chứ không phải để cải thiện nó, theo quan điểm của Jason Miller, Jessica Janiuk và Ryan Carniato.

Những lập trình viên phát triển frontend nên đọc bài này để hiểu cách xử lý hiệu quả vấn đề hydration mismatch trong ứng dụng React, tránh những lỗi không mong muốn khi kết hợp client-side hydration với các tính năng mới như Next.js 13+ hay SSR.

How I built Notion to Site, and how I'd build it today

Năm 2022, tác giả xây dựng Notion to Site nhưng chỉ dùng nội bộ, sau đó rút ra bài học từ code và nhận thấy AI agents có thể biến nó thành sản phẩm thương mại ngày nay.

Đọc bài này để hiểu cách chuyển đổi một dự án nhỏ từ nội bộ thử nghiệm thành một sản phẩm thương mại hiệu quả, đặc biệt là cách áp dụng công nghệ hiện đại như AI agent để tối ưu hóa quy trình phát triển và mở rộng.

Self-drawing SVG connection lines

Tạo hiệu ứng SVG với các đường kết nối tự vẽ khi cuộn trang, sử dụng kỹ thuật staggered edges, IntersectionObserver và hỗ trợ prefers-reduced-motion.

Lập trình viên cần đọc bài này để khám phá cách tạo hiệu ứng liên kết đường viền SVG tự động vẽ khi cuộn trang, tối ưu hóa hiệu suất với IntersectionObserver và hỗ trợ người dùng có nhu cầu giảm động lực.

Dynamic sitemap.xml in Astro SSR

Tạo file sitemap.xml và robots.txt động trong Astro SSR mà không cần plugin @astrojs/sitemap, sử dụng API routes, registry có kiểu dữ liệu và các hàm thuần có thể kiểm thử.

Lập trình viên muốn tối ưu hóa SEO cho ứng dụng Astro SSR mà không phụ thuộc vào thư viện astrojs/sitemap sẽ tìm hiểu cách tạo sitemap và robots.txt một cách linh hoạt, từ API route đến các hàm đăng ký kiểu dáng và kiểm thử, để kiểm soát và tự động hóa công việc này một cách hiệu quả.

Polar payments in an Astro app

Ứng dụng Astro hỗ trợ thanh toán Polar cho mua một lần và đăng ký thông qua các route thanh toán phía server, tạo khách hàng "lazy" và kiểm tra quyền lợi (entitlement) trên D1.

Lập trình viên muốn xây dựng ứng dụng thanh toán nhanh chóng và an toàn với các giao dịch đơn lẻ và đăng ký, đặc biệt khi kết hợp Astro với D1 và Polar, nên đọc bài để hiểu cách triển khai route thanh toán bên server, tối ưu hóa tạo khách hàng theo yêu cầu và kiểm tra quyền sử dụng hiệu quả.

Better Auth in Astro on Cloudflare Workers

Cài đặt Better Auth cho Astro SSR trên Cloudflare Workers cải tiến với adapter D1 Drizzle, route bắt tất cả (catch-all) cho auth, quản lý session trong middleware, và không phụ thuộc vào Node.

Lập trình viên muốn triển khai ứng dụng SSR với Astro trên Cloudflare Workers nên đọc bài này để tìm cách triển khai hệ thống xác thực hiệu quả mà không cần phụ thuộc vào Node.js, tối ưu hóa cho môi trường serverless và sử dụng các công cụ như D1, Drizzle ORM để quản lý dữ liệu và session một cách đơn giản.

Astro SSR with D1 and Drizzle ORM

A practical setup guide for wiring Cloudflare D1 (SQLite at the edge) into an Astro SSR app using Drizzle ORM. Covers creating and binding a D1 database in wrangler.jsonc, defining a TypeScript schema with Drizzle, creating the Drizzle client, accessing the D1 binding in Astro 7 routes via the cloudflare:workers module, generating and applying migrations with drizzle-kit, and running a local dev workflow with Miniflare. Also notes D1 batch limitations versus full Postgres transactions and tips for keeping migrations safe.

Workers Cache: a cache in front of your Cloudflare Worker

Cloudflare launched Workers Cache, a tiered caching layer that sits in front of Cloudflare Workers. When enabled via a single line in wrangler.jsonc, cache hits skip Worker execution entirely, saving CPU time and cost. Caching is controlled via standard Cache-Control headers, supports stale-while-revalidate for instant responses, and allows tag-based purging scoped to the Worker. The cache is two-tiered by default, works across service bindings between Workers, and supports per-user cache keys via ctx.props. Astro's Cloudflare adapter already integrates it. Available on all plans including free.

How the Cloudflare Pages build cache works

Cloudflare Pages build cache is opt-in and only restores specific directories for known package managers (npm, pnpm, yarn) and frameworks (Astro, Next.js, Gatsby, Nuxt). Custom tool caches stored outside these directories are discarded after every build. The fix is to redirect any custom cache into a directory Cloudflare already preserves — for Astro, that's node_modules/.astro. A real-world example shows redirecting an OG image cache from node_modules/.astro-og-canvas into node_modules/.astro/astro-og-canvas, cutting build time from ~45 seconds to ~12 seconds.

How I generate an Open Graph image for every post

A practical walkthrough of generating unique Open Graph preview images for every blog post at build time using Astro and the astro-og-canvas library. The setup involves creating a dynamic file route at src/pages/og/[...route].ts, fetching all posts from a content collection, and passing titles and descriptions to OGImageRoute to produce per-post PNG images. Key gotcha: OGImageRoute is async and requires await or Astro can't find getStaticPaths. The generated images are static files with no runtime dependency. A note on build performance: with 1700+ posts, image generation adds time, but astro-og-canvas caches unchanged posts — with a caveat around cache location on Cloudflare Pages.

How I added search to my static site with Pagefind

Pagefind is a zero-cost, server-free search solution for static sites. It indexes your built HTML at build time and runs entirely in the browser, downloading only the small index chunks needed per query. Setup involves installing Pagefind as a dev dependency, appending it to the build script pointing at the output folder, and dropping a ready-made UI component into a search page. Using the data-pagefind-body attribute scopes indexing to actual content, excluding nav and footer noise. The index only exists after a full build, so local testing requires building first then previewing.

Issue #747: CSS that picks its own readable text color — Frontend Focus

Frontend Focus issue #747 covers CSS techniques for readable text color selection, Astro 7.0's release with a Rust-powered compiler and 15–61% faster builds, Mozilla's PACT proposal for privacy-preserving bot rate-limiting, accessibility pitfalls of CSS Grid Lanes and WCAG 2.4.3 compliance, animating the dialog element with View Transitions API, AI coding agents' poor accessibility output, and several tools including a lightweight Web Component framework, an accessible HTML5 media player, and a browser fingerprinting demo page.

Serving a website with Cloudflare Workers static assets

Cloudflare Workers có thể phục vụ toàn bộ website thông qua tính năng static assets, bao gồm cả các ứng dụng SPA nhờ tùy chọn not_found_handling: single-page-application. Khi cần logic động, có thể kết hợp Worker với static files, điều chỉnh quyền ưu tiên theo route. Đối với ứng dụng Astro, adapter chính thức của Cloudflare tự động xử lý toàn bộ cấu hình, triển khai chỉ bằng lệnh wrangler deploy.

Lập trình viên nên đọc bài này để khám phá cách tối ưu hóa triển khai ứng dụng web bằng Cloudflare Workers, từ việc phục vụ toàn bộ trang web tĩnh đến xử lý logic động một cách linh hoạt, đặc biệt là với các ứng dụng SPA và Astro.