Question 1

Is Astro a good choice in 2026 compared to Next.js?

Accepted Answer

For content-focused sites (blogs, docs, marketing, e-commerce catalogs), Astro is the better default — smaller bundles, better Lighthouse scores, faster builds. For app-heavy products (dashboards, SaaS), Next.js is still stronger. Many companies in India use BOTH: Astro for the marketing site, Next.js for the product app. They're complementary, not competitive.

Question 2

How much does an Astro developer earn in India?

Accepted Answer

₹6-20 LPA in 2026 for mid-to-senior frontend developers with Astro experience. Most Astro roles are part of broader 'frontend engineer' positions — pure Astro-only roles are rare. Companies hiring: Razorpay, Postman, Zomato, and many JAMstack-focused agencies. SEO/marketing-focused teams pay at the upper end.

Question 3

Can I use Astro with my existing React component library?

Accepted Answer

Yes — that's one of Astro's biggest strengths. Add `@astrojs/react`, then import any `.jsx`/`.tsx` component into `.astro` files. Most React libraries that don't depend on Next.js-specific APIs (like `next/image` or `next/link`) work out of the box. For component libraries like shadcn/ui, MUI, Mantine — all work. The main gotcha is libraries that require a client-only environment (charts, editors); use `client:only='react'` for those.

Question 4

Does Astro support TypeScript?

Accepted Answer

Yes — TypeScript is first-class in Astro since 1.0. `.astro` files support TypeScript in the frontmatter section by default. Run `tsc --noEmit` or `astro check` in CI to type-check the project. Content Collections give you typed frontmatter via Zod schemas. Most production Astro projects in 2026 use TypeScript end-to-end.

Question 5

How big can an Astro project get before performance suffers?

Accepted Answer

Build time scales roughly linearly with page count and image processing. A 1,000-page site builds in 30-60 seconds; a 10,000-page site can take 5-15 minutes. At that scale, use ISR (Vercel/Netlify) or split into multiple projects. Runtime performance doesn't degrade — every page is just static HTML, served by the CDN. The Guardian runs millions of pages on Astro; Cloudflare's docs site has thousands.

Question 6

What is Astro and what problem does it solve?

Accepted Answer

Astro is a content-focused web framework created by Fred K. Schott in 2021. It solves a specific problem: most modern frameworks (Next.js, Nuxt, SvelteKit) are 'app-first' and ship a JavaScript runtime to the browser even for pages that don't need it — blogs, docs, landing pages — resulting in heavy bundles and worse Core Web Vitals. Astro flips this: it's 'content-first' and renders pages to HTML at build time (or on demand), shipping zero JavaScript by default. When a page does need interactivity, you opt in per component using `client:*` directives — this is the Islands Architecture. The result: blogs and marketing sites built in Astro typically score 100/100 on Lighthouse out of the box, while sites built in Next.js need careful optimization to hit the same numbers.

Question 7

What is an `.astro` file and how does it differ from a JSX component?

Accepted Answer

An `.astro` file is Astro's single-file component format. It has three parts: a code fence (`---`) at the top for the component script that runs at build time, an HTML-like template body, and an optional `<style>` block scoped by default. Unlike JSX, the script section runs only on the server — never in the browser — so you can `await` database queries, read filesystem files, or import Node-only packages directly. The template uses JSX-like expressions (`{}`) but renders as plain HTML. There's no `useState`, no `useEffect`, no client-side runtime for the `.astro` component itself.

Question 8

What is the Islands Architecture in Astro?

Accepted Answer

Islands Architecture (coined by Katie Sylor-Miller, popularized by Astro) is a rendering pattern where a page is mostly static HTML, with small interactive 'islands' of JavaScript scattered throughout. Each island is independently hydrated — the rest of the page stays static. Contrast this with Next.js or Nuxt, where the entire page is hydrated as one React/Vue tree even if 95% of it is static content. In Astro, your homepage might be 100% HTML with a single interactive React component for the search bar; only the search bar's JS gets shipped, parsed, and executed. This dramatically reduces JavaScript payload — typical Astro sites ship 0-10 KB of JS vs 100-300 KB for equivalent Next.js sites.

Question 9

What are the `client:*` directives and when do you use each?

Accepted Answer

`client:*` directives tell Astro how and when to hydrate a UI framework component. There are five: `client:load` hydrates immediately on page load (use for above-the-fold interactivity), `client:idle` waits for `requestIdleCallback` (good for non-critical components like analytics buttons), `client:visible` uses IntersectionObserver to hydrate only when the component scrolls into view (best for below-the-fold widgets), `client:media={query}` hydrates when a media query matches (e.g. mobile-only nav), and `client:only={framework}` skips server rendering entirely and renders client-side only (use sparingly, breaks SEO). Without any directive, the component renders to HTML at build time and ships zero JS — this is the default.

Question 10

How do you use React components inside an Astro project?

Accepted Answer

Install the integration and add it to `astro.config.mjs`. Run `npx astro add react` and Astro will install `@astrojs/react`, React, and React DOM, then update the config. After that, you can import and use any `.jsx`/`.tsx` component inside `.astro` files. By default, React components render to static HTML at build time (no JS shipped). To make them interactive, add a `client:*` directive. The same pattern works for Vue (`astro add vue`), Svelte, Solid, Preact, Lit, and Alpine — and you can mix them in the same project, which is unique to Astro.

Question 11

How do you create dynamic routes in Astro?

Accepted Answer

Astro uses file-based routing in `src/pages/`. For dynamic routes, use square brackets in the filename — e.g. `src/pages/blog/[slug].astro` matches `/blog/anything`. For static site generation (the default), you must export a `getStaticPaths()` function that returns the list of routes to pre-render. For server-rendered or hybrid routes, you can access the slug via `Astro.params.slug` directly without `getStaticPaths`. Catch-all routes use `[...slug].astro` (matches `/blog/2026/01/post-title`).

Question 12

What are Content Collections in Astro?

Accepted Answer

Content Collections are Astro's first-class way to manage local content (Markdown, MDX, YAML, JSON). You define a schema with Zod in `src/content/config.ts`, place your content files in `src/content/<collection-name>/`, and Astro provides type-safe `getCollection()` and `getEntry()` APIs. The schema enforces frontmatter validity at build time — if a blog post is missing a required field, the build fails with a clear error. TypeScript autocompletion works on `post.data.title`, `post.data.publishDate`, etc. This is one of Astro's killer features for content-heavy sites — you get the DX of a CMS without running a CMS.

Question 13

How do you write Markdown and MDX content in Astro?

Accepted Answer

Plain Markdown works out of the box — drop a `.md` file in `src/pages/` and it becomes a page, or in a content collection for structured content. For MDX (Markdown + JSX, so you can embed components inside content), install the integration: `npx astro add mdx`. Then `.mdx` files can import and use Astro/React/Vue components inline. Frontmatter at the top (between `---` fences) is parsed into structured data. Astro's syntax highlighting uses Shiki by default — same highlighter as VS Code — and supports configurable themes.

Question 14

What's the difference between `Astro.props` and `Astro.params`?

Accepted Answer

`Astro.props` is the data passed to a component from its parent — like React props. `Astro.params` is the dynamic route segment values from the URL (e.g. `slug` from `[slug].astro`). For static routes generated via `getStaticPaths()`, you typically return both: `params` for the URL segments and `props` for any data the page needs (so you don't re-fetch in the template).

Question 15

How do scoped styles work in Astro?

Accepted Answer

Any `<style>` block inside an `.astro` component is automatically scoped — Astro adds a hash-based attribute to all selectors so styles don't leak. Global styles can be opted into with `<style is:global>`. You can also import CSS files directly (`import './styles.css'`) for global styles. Astro supports Sass/SCSS, PostCSS, and CSS-in-JS via integrations. Tailwind is added with `npx astro add tailwind` — extremely common in real-world Astro projects because Tailwind's utility classes pair well with the static-first approach (no runtime CSS-in-JS overhead).

Astro Interview Questions

What is Astro and what problem does it solve?

What is an `.astro` file and how does it differ from a JSX component?

What is the Islands Architecture in Astro?

What are the `client:*` directives and when do you use each?

How do you use React components inside an Astro project?

How do you create dynamic routes in Astro?

What are Content Collections in Astro?

How do you write Markdown and MDX content in Astro?

What's the difference between `Astro.props` and `Astro.params`?

How do scoped styles work in Astro?

What is the `<Fragment>` element in Astro and when do you need it?

How do you configure Astro's output mode (static vs server vs hybrid)?

How does Astro compare to Next.js, and when would you pick one over the other?

What are Server Islands in Astro 5.x and what problem do they solve?

Explain the Content Layer API introduced in Astro 5.x.

What are View Transitions and how do you enable them in Astro?

How do you handle environment variables in Astro?

How do you fetch data at build time vs at request time in Astro?

How do you set up API endpoints in Astro?

What is `Astro.glob()` and how is it different from `getCollection()`?

How do you implement layouts and slot-based composition in Astro?

How do you handle redirects and 404s in Astro?

How do you integrate Tailwind CSS with Astro?

What gotchas come up with `client:only` and how do you debug them?

How do you deploy an Astro site, and what's the difference between deploying static vs SSR?

How would you architect a large-scale content site (10,000+ pages) in Astro?

How does Astro's hydration model differ from React Server Components, and what are the trade-offs?

How do you implement i18n (internationalization) in a production Astro site?

How do you optimize a large Astro site for Core Web Vitals beyond the defaults?

How do you handle authentication and protected routes in Astro?

Companies Hiring Astro

Salary Insights

Frequently Asked Questions

Is Astro a good choice in 2026 compared to Next.js?

How much does an Astro developer earn in India?

Can I use Astro with my existing React component library?

Does Astro support TypeScript?

How big can an Astro project get before performance suffers?

Introduction