The speed difference is real but not magic. You save round trips, not database work. Fetching a list of 20 posts with authors via GROQ is one HTTP call instead of 21.

What Does a Basic GROQ Query Look Like?

Start with the document selector, then parentheses, then a projection.

*[_type == "post"] | order(publishedAt desc)[0...10]{
  title,
  "slug": slug.current,
  publishedAt,
  "authorName": author->name
}

Three things to notice. The brackets filter documents, the pipe operators sort and paginate, and the braces define what you actually want back. Anything not listed in the braces never crosses the wire.

How Do I Join Related Documents in One Query?

Use the arrow operator — author->name follows a reference and reads a field on the target document. This is the piece REST cannot do without extra requests.

That last pattern is how you get “all posts tagged with this topic” from a topic document. references() is a filter, not a join, so it scans documents — fine at a few thousand docs, painful at a hundred thousand.

How Do I Filter and Paginate Without Breaking Sorting?

Ordering and slicing always go in the pipe section, after the filter:

• *[_type == "post" && defined(slug.current)] — skip drafts with no slug.
• | order(_createdAt desc) — newest first; _createdAt is set by the system, so it always exists.
• | order(publishedAt desc)[0...12] — page one. For page two use [12...24].

Offset pagination drifts when editors publish between page loads. If that matters, cursor on a stable field: *[_type=="post" && publishedAt < $cursor] and pass the last item’s timestamp as a parameter.

Why Is My Query Slow or Capped?

Two usual suspects. First, querying the live API instead of the CDN: live is uncached and costs more units. Swap api.sanity.io for apicdn.sanity.io and published reads drop to near-instant.

Second, unbounded array projections. body on a long post can be 200 KB of portable text. Add body[]{_type, children[0...1]} or simply omit body from list queries and fetch it only on the detail page.

Sanity meters API requests on the free plan at 100,000 per month — 2,000 requests for a list view costs 2,000 units, and a misconfigured client component re-rendering on every keystroke gets there in a week.

How Should I Cache GROQ Results in Next.js or Astro?

Use incremental static regeneration with a tag-based revalidation webhook. In Next.js App Router, fetch with { next: { tags: ['post'], revalidate: 3600 } } and have a Sanity webhook hit your /api/revalidate route on publish. Pages stay static, content updates within seconds of publishing.

Astro users get the same with getStaticPaths plus a redeploy hook, but a full rebuild on every publish stops scaling past a few hundred pages.

Who Should Not Bother With GROQ?

If your content model is flat — one page type, no references — plain fetch() against the REST export is simpler and nobody on the team has to learn a query language. GROQ pays off specifically when content is relational. Teams that copy a 15-line GROQ query without understanding the arrow operator end up debugging empty arrays for an afternoon.

Quick Summary

• GROQ returns nested references in one request using the -> operator.
• Projections limit payload size — list queries should not include the full body.
• Query apicdn.sanity.io for published content; the live API is uncached.
• Offset pagination drifts; use cursor pagination for feeds.
• The free plan allows 100,000 API requests per month, so cache aggressively.

Sanity is a headless CMS, not a website builder. That distinction matters more than any feature list. You get a database with a query API and an editing UI, and you still have to build the front end. If you want a CMS that ships pages for you, this is the wrong tool.

What Is Sanity and What Does It Actually Give You?

Sanity is a content platform made of three parts: the Content Lake (hosted document database queried with GROQ), the Studio (open-source React editor you host), and the Asset Pipeline for images and files. Content lives as JSON documents. No rendered pages, no themes.

The free plan includes 10 GB of assets, 100,000 API requests per month, and two datasets. That covers a small blog or a marketing site comfortably. A content-heavy site with 50 editors will hit the request quota, and the next tier is usage-based, so budget it before you commit.

How Do I Install Sanity Studio Step by Step?

You need Node.js 20 or newer. Then run these commands in a terminal.

1. npm create sanity@latest — scaffolds studio/ with a project name you type in.
2. Choose the dataset name (production is the default) and confirm the schema template (“Clean project with no predefined schemas”).
3. Log in through the browser window that opens. Google, GitHub, or email all work.
4. cd studio && npm run dev — the Studio starts on http://localhost:3333.

If npm create hangs on a proxy, set npm config set proxy and npm config set https-proxy first. That failure mode looks like a frozen install but is really a network block.

How Do I Define a Schema and Add Fields?

Schemas live in schemaTypes/. Create post.ts with a defineType call:

export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({ name: 'title', type: 'string', validation: r => r.required() }),
    defineField({ name: 'slug', type: 'slug', options: { source: 'title' } }),
    defineField({ name: 'body', type: 'array', of: [{ type: 'block' }] }),
  ],
})

Register it in schemaTypes/index.ts, save, and the Studio hot-reloads with a “Post” item in the sidebar. The slug type auto-generates from the title when you click Generate, which saves you from writing a slugify function.

How Do I Publish Content and Query It From My Front End?

Click the pencil icon, create a Post document, fill in the title and body, then hit Publish. Drafts autosave every few seconds; Publish is what makes the document visible to the API.

Query it with GROQ over the CDN endpoint:

https://YOUR_PROJECT_ID.api.sanity.io/v2024-10-01/data/query/production?query=*[_type=="post"]{title,slug}

Add your project ID to .env as SANITY_PROJECT_ID rather than hardcoding it. If a query returns an empty array while the Studio clearly shows content, you almost certainly queried the wrong dataset name or forgot _type.

How Do I Deploy Sanity Studio for a Team?

Run npx sanity deploy. It asks for a hostname and publishes the Studio to your-name.sanity.studio. Your editors get a real URL and never touch Git.

The tradeoff is that every schema change needs a redeploy, so batch schema edits. Also remember the deployed Studio is public by default — turn on the project’s member roles before you share the link with outside writers.

Is Sanity Free, and Who Should Skip It?

Free tier: 10 GB assets, 100k API requests/month, 2 datasets, 3 users. Pricing beyond that is per-seat plus usage, and costs climb faster than a flat WordPress host once you add a dozen editors.

Skip Sanity if you want a working blog today with zero front-end work, or if your team only edits long-form pages and has no developer. Sanity earns its place when content gets reused across a website, a mobile app, and a docs site, because one document feeds all three.

Quick Summary

• Sanity Studio is a React editor you install locally and deploy with npx sanity deploy; content sits in the hosted Content Lake.
• Setup is four commands plus one schema file; you need Node.js 20+.
• The free plan gives 10 GB assets and 100,000 API requests per month.
• You must build your own front end — Sanity renders nothing for you.
• Query the CDN API endpoint, not the write endpoint, for public reads.