Astro
What are Astro Actions and how do they work?
Astro Actions are type-safe backend functions that you define once on the server and then call from the browser as if they were ordinary async fu
Dive Deeper
What are Astro adapters and which one should you choose?
An Astro adapter is an integration that builds the server part of your project for a specific runtime, such as Node.js, Vercel Functions, Netlify
Dive Deeper
How to build API endpoints in Astro?
To build an API endpoint in Astro, create a .js or .ts file in src/pages/ and export a function named after an HTTP method, such as GET or
Dive Deeper
How to add user authentication to an Astro site?
To add user authentication to an Astro site, install an adapter so pages can run on demand, choose an auth library such as Better Auth or a h
Dive Deeper
How to add pagination to an Astro blog?
To add pagination to an Astro blog, create a dynamic page such as src/pages/blog/[...page].astro, load and sort your posts inside `getStaticPaths()
Dive Deeper
How to cache on-demand rendered pages in Astro?
To cache on-demand rendered pages in Astro, configure a cache provider with the top-level cache option in astro.config.mjs, then tell Astro w
Dive Deeper
How to style child components with class:list in Astro?
To style a child component with class:list in Astro, make the child accept a class prop, combine it with its own classes using `class:list={["a
Dive Deeper
What do client:load, client:idle, and client:visible mean in Astro?
In Astro, client:load, client:idle and client:visible are client directives that decide when a UI framework component's JavaScript is d
Dive Deeper
How to use client:only for browser-only components in Astro?
To use client:only in Astro, add it to a framework component and pass the name of the component's framework as its value, for example `<Chart cli
Dive Deeper
How to reference one collection from another in Astro?
To reference one collection from another in Astro, use the reference() function from astro:content in your collection schema. For example, `a
Dive Deeper
How to define a content collection schema with Zod in Astro?
To define a content collection schema with Zod in Astro, import z from astro/zod and pass a z.object({...}) as the schema property of `de
Dive Deeper
How to pass props to an Astro component?
To pass props to an Astro component, write them as attributes when you use the component, such as <Greeting name="Sajjad" />, and read them inside
Dive Deeper
What is the component script (frontmatter) in an Astro component?
The component script is the block of JavaScript or TypeScript between the two --- fences at the top of an .astro file. People often call it t
Dive Deeper
How to use conditional rendering in Astro templates?
To use conditional rendering in an Astro template, write a JavaScript expression in curly braces that evaluates to markup or to nothing. The two
Dive Deeper
What are content collections in Astro?
Content collections are Astro's built-in system for managing groups of related content, such as blog posts, documentation pages, authors or produ
Dive Deeper
How to use the Content Layer API in Astro?
To use the Content Layer API in Astro, give every collection in src/content.config.ts a loader. For local files, use the built-in glob() or
Dive Deeper
How to read and set cookies in Astro?
To read and set cookies in Astro, use the Astro.cookies object in pages and components, or context.cookies in API endpoints, middleware a
Dive Deeper
How to improve Core Web Vitals in an Astro site?
To improve Core Web Vitals in an Astro site, work on each metric with the tool Astro already gives you. For Largest Contentful Paint (LCP), r
Dive Deeper
How to create a custom 404 page in Astro?
To create a custom 404 page in Astro, add a file named 404.astro (or 404.md) to src/pages/. Astro builds it to dist/404.html, which most st
Dive Deeper
How to load custom fonts efficiently in Astro?
The most efficient way to load custom fonts in Astro is the built-in Fonts API, which has been stable since Astro 6. You register each font in th
Dive Deeper
How to build a custom Astro integration?
To build a custom Astro integration, write a function that returns an object with a name and a hooks object, then add a call to that function
Dive Deeper
How to add dark mode to an Astro site?
To add dark mode to an Astro site, define your colours as CSS custom properties, give them dark values inside a prefers-color-scheme: dark medi
Dive Deeper
How to connect Astro to a database?
To connect Astro to a database, install a database client in your project, create the connection once in a module such as src/db/index.ts, and
Dive Deeper
How to pass CSS variables from frontmatter with define:vars in Astro?
To pass CSS variables from frontmatter in Astro, add the define:vars directive to a component's <style> tag and give it an object of values: `<
Dive Deeper
How to create dynamic routes with getStaticPaths in Astro?
To create a dynamic route in Astro, name a page file with a parameter in square brackets, such as src/pages/blog/[id].astro, and export a **getStat
Dive Deeper
How to use astro:env for type-safe environment variables?
To use astro:env, declare your environment variables in the env.schema option of astro.config.mjs using the envField helpers, givin
Dive Deeper
How to set environment variables in Astro?
To set environment variables in Astro, put them in a .env file in your project root, or set them in your shell or hosting dashboard, and re
Dive Deeper
How to fetch data at build time in Astro?
To fetch data at build time in Astro, call fetch() with await in the frontmatter script of any .astro page or component. Astro supports top
Dive Deeper
How does file-based routing work in Astro?
File-based routing in Astro means every supported file inside src/pages/ becomes a URL on your site, and the file's path decides what that URL
Dive Deeper
What are .astro files and how do they work?
.astro files are Astro's own component format. Each one has two parts: a component script between --- fences at the top, where you write Ja
Dive Deeper
Is Astro a good choice for content-heavy websites?
Yes, Astro is one of the best choices for content-heavy websites. It was designed specifically for content-driven sites such as blogs, documentat
Dive Deeper
How to use the Fragment component in Astro?
The Fragment component in Astro groups several elements together without adding a wrapper element to the HTML. You write `...</Fragment
Dive Deeper
How to add global styles in Astro?
The simplest way to add global styles in Astro is to create a CSS file, for example src/styles/global.css, and import it in the frontmatter of
Dive Deeper
How to use a headless CMS with Astro?
To use a headless CMS with Astro, fetch your content from the CMS's API and turn it into a content collection, either with a custom loader in `sr
Dive Deeper
How to mix prerendered and on-demand pages in Astro?
To mix prerendered and on-demand pages in Astro, install a server adapter and then control each route with the prerender export. In the def
Dive Deeper
How to add internationalized (i18n) routing in Astro?
To add internationalised routing in Astro, add an i18n object to astro.config.mjs with a list of locales and a defaultLocale, then create o
Dive Deeper
How to optimize images with the Astro Image component?
To optimize images with the Astro Image component, put your image files in src/ (for example src/assets/), import them into a component, and
Dive Deeper
What are Astro integrations and how to add them?
Astro integrations are packages that plug into Astro's build process and dev server to add features your project doesn't have out of the box, suc
Dive Deeper
How to add interactivity in Astro without a framework?
To add interactivity in Astro without a framework, put a <script> tag inside your .astro component and use standard browser APIs: find elemen
Dive Deeper
How does Astro's island architecture work?
Astro's island architecture works by rendering the whole page to static HTML on the server, then making only selected components interactive in t
Dive Deeper
How to add JSON-LD structured data in Astro?
To add JSON-LD structured data in Astro, build a JavaScript object that follows the schema.org vocabulary in your page's frontmatter, then output
Dive Deeper
How to loop over arrays in Astro components?
To loop over an array in an Astro component, call .map() on the array inside curly braces in the template and return markup for each item, for
Dive Deeper
How to write blog posts in MDX with Astro?
To write blog posts in MDX with Astro, install the official integration with npx astro add mdx, make sure your blog collection's glob() loade
Dive Deeper
What is Astro middleware and how to use it?
Astro middleware is a function that runs before a page or endpoint is rendered, letting you inspect the request, share data with the route, or re
Dive Deeper
How to mix multiple UI frameworks in one Astro project?
To mix multiple UI frameworks in one Astro project, install an integration for each one, for example npx astro add react vue svelte, then import co
Dive Deeper
How to nest layouts in Astro?
To nest layouts in Astro, make the inner layout render the outer layout in its template and put its own <slot /> inside it. For example, a `Blo
Dive Deeper
How to add Open Graph images in Astro?
To add Open Graph images in Astro, render an og:image meta tag in the <head> of each page with the absolute URL of a 1200 by 630 pixel im
Dive Deeper
How to pass data from Astro to a client-side script?
To pass data from Astro to a client-side script, write the data into the HTML on the server and read it back in the browser. The recommended way is *
Dive Deeper
How to use the Picture component for responsive images in Astro?
To use the Picture component in Astro, import Picture from astro:assets, import your image from src/, and render `<Picture src={image} alt=
Dive Deeper
What is the Astro project folder structure?
The Astro project folder structure has two main directories: src/, which holds the code and content Astro processes (pages, components, lay
Dive Deeper
How to protect routes in Astro with middleware?
To protect routes in Astro with middleware, create src/middleware.ts and export an onRequest handler that does two jobs: it loads the current
Dive Deeper
How to query and sort content collections in Astro?
To query a content collection in Astro, call getCollection("name") from astro:content to get every entry as an array, or **`getEntry("name",
Dive Deeper
How to use React components in Astro?
To use React components in Astro, install the official @astrojs/react integration with npx astro add react, then import your .jsx or .tsx c
Dive Deeper
How to calculate reading time for Astro blog posts?
To calculate reading time for Astro blog posts, count the words in each post and divide by an average reading speed, usually around 200 words per min
Dive Deeper
How to set up redirects in Astro?
To set up redirects in Astro, add a redirects object to astro.config.mjs that maps old paths to new ones, such as "/old-about": "/about". Tha
Dive Deeper
How to reduce JavaScript bundle size in Astro?
To reduce JavaScript bundle size in Astro, ship fewer and smaller islands. Every component with a client:* directive sends its framework runtim
Dive Deeper
How to load content from a remote API with an Astro loader?
To load content from a remote API with an Astro loader, write a function that returns a loader object with a name, a schema and an async `loa
Dive Deeper
How to use rest parameters for catch-all routes in Astro?
To create a catch-all route in Astro, use a rest parameter in the file name: three dots inside square brackets, such as `src/pages/docs/[...path]
Dive Deeper
How to create reusable layouts in Astro?
To create a reusable layout in Astro, make an ordinary Astro component, conventionally in src/layouts/, that contains the shared page shell (`<
Dive Deeper
What is route priority in Astro and how does it resolve conflicts?
Route priority is the set of rules Astro uses to decide which file handles a URL when more than one route could match it. In short, more specific
Dive Deeper
How to generate an RSS feed in Astro?
To generate an RSS feed in Astro, install the official @astrojs/rss package, set site in your Astro config, and create an endpoint such as `src
Dive Deeper
How to use Sass in an Astro project?
To use Sass in Astro, install the compiler with npm install -D sass (or sass-embedded), then add lang="scss" to any <style> tag in an `.a
Dive Deeper
How does scoped CSS work in Astro components?
Scoped CSS in Astro means that any <style> tag you write inside an .astro component only applies to the HTML in that same component. At build
Dive Deeper
How to add SEO meta tags in Astro?
To add SEO meta tags in Astro, create a small Seo.astro component that accepts a title, description and image as props and renders the `
Dive Deeper
What is server islands in Astro and when to use it?
A server island in Astro is an Astro component marked with the server:defer directive, which tells Astro to render it on the server *separa
Dive Deeper
How to enable server-side rendering in Astro?
To enable server-side rendering in Astro, install an adapter for the runtime you deploy to, for example with npx astro add node, `npx astro add
Dive Deeper
How to use sessions in Astro?
To use sessions in Astro, make sure your project has an adapter and a session driver, then read and write data with Astro.session in on-dem
Dive Deeper
How to render raw HTML safely with set:html in Astro?
To render raw HTML in Astro, add the set:html directive to an element or a Fragment and pass it the HTML string: <div set:html={html} /> or
Dive Deeper
How to share state between islands in Astro?
To share state between islands in Astro, put the state in a small store that lives outside any component, in its own module, and import that modu
Dive Deeper
How to generate a sitemap in Astro?
To generate a sitemap in Astro, install the official @astrojs/sitemap integration with npx astro add sitemap and set the site option in `as
Dive Deeper
What are slots in Astro and how to use named slots?
Slots in Astro are placeholders that let a component accept markup from whoever uses it. You put a <slot /> element in the component's template
Dive Deeper
How to add search to a static Astro site?
To add search to a static Astro site, the simplest reliable option is Pagefind: build your site as usual, run npx pagefind --site dist to i
Dive Deeper
What is the difference between static and on-demand rendering in Astro?
The difference between static and on-demand rendering in Astro is when the HTML is created. With static rendering (also called prerendering),
Dive Deeper
How to use Svelte components in Astro?
To use Svelte components in Astro, run npx astro add svelte to install the official @astrojs/svelte integration, then import a .svelte file i
Dive Deeper
How to add syntax highlighting to code blocks in Astro?
Syntax highlighting works in Astro out of the box. Every fenced code block in your Markdown and MDX files, such as one starting with three backti
Dive Deeper
How to add tags and category pages to an Astro blog?
To add tags and category pages to an Astro blog, store them in each post's frontmatter, declare them in your collection schema (for example `tags: z.
Dive Deeper
How to set up Tailwind CSS in Astro?
To set up Tailwind CSS in Astro, run npx astro add tailwind. The command installs tailwindcss and the official @tailwindcss/vite plugin, ad
Dive Deeper
How to test Astro components with Vitest?
To test Astro components with Vitest, create a vitest.config.ts that wraps your settings in Astro's getViteConfig() helper, then use the **Co
Dive Deeper
How to type component props with TypeScript in Astro?
To type component props in Astro, declare an interface or type named Props in the component script, then destructure Astro.props as usual: `i
Dive Deeper
How to add page transitions with the View Transitions API in Astro?
To add page transitions in Astro, import the <ClientRouter /> component from astro:transitions and place it in the <head> of a shared layou
Dive Deeper
What is the difference between Astro components and framework components?
The difference between Astro components and framework components is where they run. An Astro component (.astro) renders to HTML on the server,
Dive Deeper
What is the difference between Astro and Next.js?
The main difference between Astro and Next.js is what each one assumes about your pages. Astro assumes most of a page is static content: it r
Dive Deeper
How to use Vue components in Astro?
To use Vue components in Astro, run npx astro add vue to install the official @astrojs/vue integration, then import any .vue single-file comp
Dive Deeper
How does Astro ship zero JavaScript by default?
Astro ships zero JavaScript by default because every component, whether it's an .astro file or a React, Vue or Svelte component, is **rendered
Dive Deeper
How to create a new Astro project from scratch?
To create a new Astro project, make sure you have Node.js 22.23.4 or newer, then run npm create astro@latest in your terminal. The wizard a
Dive Deeper
How to deploy an Astro site to Cloudflare Pages?
You can still deploy a fully static Astro site to Cloudflare Pages: connect your repository in the Cloudflare dashboard, use npm run build
Dive Deeper
How to deploy an Astro site to Netlify?
To deploy an Astro site to Netlify, push your project to a Git provider, choose Add new site > Import an existing project in the Netlify dash
Dive Deeper
How to deploy an Astro site to Vercel?
To deploy an Astro site to Vercel, push your project to GitHub, GitLab or Bitbucket, import the repository at vercel.com/new, and accept the sett
Dive Deeper
How to deploy an Astro site with Docker and Node.js?
To deploy an Astro site with Docker and Node.js, add the @astrojs/node adapter in standalone mode, build the project inside a Node.js ima
Dive Deeper
What is Astro and why is it so fast?
Astro is an open-source web framework for building content-driven websites such as blogs, documentation, marketing sites, portfolios and online s
Dive Deeper
When should you not use Astro?
You should not use Astro when your project is mainly a highly interactive web application rather than a website: dashboards, editors, design
Dive Deeper