These Astro interview questions cover what a developer working on Astro sites should understand, from basics to advanced topics, with a model answer for each. They’re useful for preparing for an interview, for hiring managers writing one, and for checking your own understanding. Answers reflect Astro 7. Good answers explain the trade-off, not just the API name, so each includes what an interviewer is listening for.
Key Takeaways
- Expect questions on the rendering model: islands, directives and static vs on-demand.
- Content collections, loaders and schemas are core for content-site roles.
- Advanced questions focus on trade-offs: when not to hydrate, when not to use SSR.
- Debugging questions test whether you can read Astro’s error messages.
Basics
1. What problem does Astro solve?
Content sites built with single-page-app frameworks ship a JavaScript runtime even when most of the page is static. Astro renders components to HTML and only ships JavaScript for components that need it. Listening for: the cost of hydration, not just “it’s fast”.
2. What’s the difference between an .astro component and a React component in Astro?
An .astro component renders once on the server and has no client runtime, state or event handlers. A React component can render statically or hydrate as an island with a client:* directive. Listening for: frontmatter runs on the server only.
3. What does the frontmatter in an .astro file do?
It’s server code (TypeScript) that runs at build time or per request: imports, data fetching, props. None of it reaches the browser.
4. How do you pass data to a component and render children?
Props via Astro.props, typed with interface Props; children with <slot />, and named slots for multiple regions.
5. How does routing work?
File-based: files in src/pages/ become routes. Brackets make dynamic routes; [...rest] matches any depth; .ts files are endpoints.
Intermediate
6. What is an island, and how do you choose a client directive?
An island is an interactive component hydrated independently. Use no directive if it’s not interactive, client:visible below the fold, client:idle for non-urgent widgets, client:load for immediate controls, client:media for breakpoint-specific UI, client:only for browser-only code. Listening for: defaulting to the least JavaScript. See which client directive to use.
7. What does getStaticPaths() do, and when is it not needed?
It returns every params combination for a prerendered dynamic route, with optional props. It isn’t used on on-demand routes, which read Astro.params at request time.
8. Explain content collections.
Typed groups of content defined in src/content.config.ts with a loader (glob(), file() or custom) and a Zod schema. Queried with getCollection()/getEntry(), rendered with render(). Invalid content fails the build. See the content collections guide.
9. How do you optimise images?
Import local images and use <Image /> or <Picture /> from astro:assets for resizing, modern formats, dimensions and lazy loading; priority on the LCP image; allow remote domains in config.
10. How are styles scoped?
<style> in a component is scoped by default through generated attributes. :global() or is:global opt out; define:vars passes values into CSS.
11. How would you add a contact form to a static Astro site?
Either post to a third-party form endpoint (stays fully static) or add an adapter and an Astro Action. Listening for: awareness that server code needs an adapter.
Advanced
12. When would you render a page on demand instead of prerendering it?
When content differs per visitor (auth, carts), must be fresher than a rebuild, or the URL space is unknown. Otherwise prerender. Listening for: cost and failure modes of SSR. See which rendering mode a page needs.
13. What are server islands, and when are they better than an on-demand page?
Components with server:defer render per request after the page loads, so the page stays static and cacheable while one part is personal. Better when most of the page is shared.
14. How does middleware work, and where does it run?
onRequest in src/middleware.ts runs before on-demand routes, can modify locals, redirect, or change the response, and must return next() or a Response. On prerendered pages it runs once at build time.
15. What are Astro Actions?
Type-safe server functions with Zod-validated input, called from forms or client code, returning { data, error }. Need an adapter.
16. How would you share state between two islands?
They don’t share a component tree, so use a framework-neutral store (such as Nano Stores) or DOM events. Listening for: understanding that islands are isolated.
17. How do you keep an Astro site fast as it grows?
Audit islands and their directives, optimise images, self-host fonts, defer third-party scripts, cache on the CDN, measure field Core Web Vitals. See the Astro performance guide.
Debugging
18. A build fails with “getStaticPaths() function required for dynamic routes”. What happened?
A bracketed route is prerendered without exporting getStaticPaths(). Export it, or make the route on-demand. See the fix.
19. Content renders locally but the build fails on CI with “Image not found”. Why?
Most likely a file-name case mismatch: Linux file systems are case-sensitive. See Image not found.
20. A React island throws “window is not defined” during the build. How do you fix it?
The component touches window while rendering on the server. Move that code into an effect, or as a last resort use client:only="react".
For interviewers
Ask candidates to explain trade-offs out loud: “What would you not hydrate here?” reveals more than API recall. A short take-home of building a small collection-backed blog page with one island covers most of the above in an hour.
The Astro glossary defines the vocabulary, and the Astro docs are the reference candidates should know how to navigate.
FAQ
Do Astro roles require React experience?
Often, since many teams use React islands, but the core Astro skills are HTML, CSS, TypeScript and the rendering model.
What should a junior Astro developer know?
Components, props, slots, routing, content collections and images. Islands and SSR come next.