Using Astro Islands to Hydrate Only What You Need
Learn how Astro Islands let you hydrate only the components you need, reducing JavaScript payload while keeping pages fast.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how Astro Islands let you hydrate only the components you need, reducing JavaScript payload while keeping pages fast.
Stop bloating your frontend. Learn how to use Astro's Islands Architecture to selectively hydrate components and reduce Total Blocking Time.
Decide whether to use Astro’s built‑in <Image> component or an external service like Cloudinary for production image optimization, weighing build‑time vs runtime trade‑offs.
Learn how Astro's Islands Architecture eliminates unnecessary JavaScript by using partial hydration and client directives to improve page load speed and TBT.
Astro ships zero JavaScript by default; client directives decide when each interactive island hydrates. Learn what client:load, idle, visible, media and only actually do, with a worked chart example and the mistakes that quietly recreate SPA-sized bundles.
Astro’s islands model lets you hydrate only the components that need interactivity, keeping the rest of the page static and minimizing bundle size. This guide walks through the problem, the solution, a concrete example, and the trade‑offs to consider.
Goal In a site built with Astro’s ClientRouter (formerly ViewTransitions), I need to keep the scroll position of nested containers and arbitrary JavaScript state that lives outside of islands alive when the user navigates between pages using the client‑side router. Constraints Astro’s transition:persist attribute only preserves DOM elements that match by ID
When running astro dev , repeated page reloads in the browser appear to increase the Node process heap over time. The suspected culprit is Astro’s SSR cache, which keeps component instances alive across requests to speed up rendering. The dev workflow uses Vite’s hot‑module‑replacement and a Vite in‑memory file cache. Dynamic imports of large libraries are c
Goal: Minimize compute costs for a low‑traffic site An Astro project is deployed to Vercel. The site contains a handful of dynamic pages that require server‑side rendering, but the majority of content is static. The objective is to keep monthly compute usage (and thus cost) as low as possible while still supporting the dynamic routes. Astro offers two output