Frontend
Astro
A framework for content sites: ships minimal JavaScript by default, with interactive islands on demand.
What it is
Astro launched in 2021 and focuses on fast content sites: blogs, documentation, marketing, storefronts. Pages render to HTML at build time (or on the server), and no JS goes to the browser by default.
The key idea is islands architecture. Interactive components (React, Vue, Svelte, Solid and others) become separate islands with directives like client:load and client:visible. The rest of the page stays static HTML.
It has typed Content Collections for Markdown and MDX, built-in image optimization, file-based routing and an SSR mode with adapters.
Use it when
- Blogs, documentation, landings and marketing sites where speed and SEO matter.
- You mix components from different frameworks on one page.
- Lots of Markdown content.
Avoid it when
- A highly dynamic app like a dashboard or editor: a full SPA framework fits better.
- Complex state that lives across pages.
Key concepts
- Islands
- Isolated interactive components on a static page that hydrate separately.
- Zero JS by default
- Astro components render to HTML, and JS ships only for islands.
- Content Collections
- Typed Markdown / MDX / JSON collections with a validation schema.
- Client directives
client:load,client:idleandclient:visibledefine when to hydrate.- Adapters
- SSR hookups for Node, Cloudflare, Vercel and others.
Example
Interview questions
1. What is islands architecture?
An approach where a page is mostly static HTML and interactive areas (islands) hydrate separately and independently. That means less JS in the browser.
2. How do you control hydration in Astro?
With directives on components:
client:loadimmediately,client:idlewhen the browser is idle,client:visiblewhen the block enters the viewport,client:onlyon the client only.3. Can React and Vue be used together?
Yes, Astro supports several UI frameworks at once through integrations, though in practice teams usually pick one.
4. How does Astro differ from Next.js?
Astro is content-oriented with minimal JS, while Next.js targets full React apps with server components. For blogs and docs Astro is usually lighter.
Related technologies
- ReactA library for building interfaces from components: UI as a function of state.
- SvelteAn interface compiler: turns components into minimal JavaScript without a heavy runtime.
- ViteA fast dev server and bundler for frontend, built on native ES modules.
- Next.jsA full-stack React framework: routing, SSR, static generation, API routes and server components.
- Tailwind CSSA utility-first CSS framework: styles are composed from small classes right in the markup.
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).