Build Faster Websites with Astro and Sanity

Why this combination works

Content-driven sites shouldn't ship megabytes of JavaScript to display text and images. Astro sends zero client-side JavaScript by default. Your pages are static HTML unless you explicitly opt into interactivity, so blogs, marketing pages, and documentation load fast without extra optimization work.

Sanity stores your content as structured data using Portable Text, which Astro renders server-side with no hydration cost. You query exactly the fields you need with GROQ:

*[_type == "post"]{ title, slug, excerpt, "author": author->name }

The @sanity/astro integration connects the two. You get GROQ-powered queries, stega encoding for visual editing, and the option to embed Sanity Studio directly on an Astro route.

What Astro brings to the table

Astro is built for content websites. A few ideas make that concrete:

• Islands architecture — Interactive components hydrate independently. The rest of your page stays as static HTML. A search widget gets JavaScript; your blog post content doesn't.
• Content layer — A type-safe API for fetching content from any source, including Sanity, with built-in schema validation.
• View transitions — SPA-like page navigation without shipping a JavaScript framework to the browser.
• Built-in i18n routing — First-class support for multilingual sites with automatic locale-based routing.
• Server islands — Mix cached static shells with dynamic, personalized content on the same page.
• SSG and SSR modes — Choose static generation for maximum performance or server-side rendering (SSR) for dynamic content. You can decide per-project or per-route.

How Sanity handles the content side

Sanity is a structured content platform that gives you full control over the content model and editing experience.

You define your schema in TypeScript, and the Studio generates an editing interface from it:

Example: Astro Component with Sanity Data

---
import { sanityClient } from "sanity:client";
import { urlFor } from "../utils/image";

const posts = await sanityClient.fetch(
  `*[_type == "post"] | order(_createdAt desc) [0...3]`
);
---

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/post/${post.slug.current}`}>
        <img src={urlFor(post.mainImage).width(400).url()} alt="" />
        <h2>{post.title}</h2>
      </a>
    </li>
  ))}
</ul>