skills.rest
ccediland
ccedilandCOMMUNITY
Explore all skills by this author →
GitHub

data-layer

Wire external data into Astro sites via build-time content-collection loaders and zod schemas.

Updated Jun 17, 2026
Search Tags:#supabase#zod#cloudflare workers#astro#content collections#build-time data#deploy hook
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill data-layer-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-layer
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/data-layer
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill data-layer-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @supabase/supabase-js, and includes references (resource) components.

What problem does it solve? Adding external or business data (catalogs, menus, pricing, schedules) to a static Astro site usually forces a bad trade-off: ship a database client to the browser, or go stale. This Skill establishes a build-time-first data layer where a content-collection loader reads a seed JSON or Supabase at build time, one zod schema is the contract, and freshness comes from a rebuild trigger instead of client-side fetching. ## Core Features & Use Cases - Tiered data architecture: A four-tier ladder from a committed seed JSON (tier 0) to a custom Supabase build-time loader (tier 1), client-side reads (tier 2), and live collections (tier 3), with the byte, CSP, and deploy-shape cost of each escalation stated explicitly. - One zod schema as the contract: A single hand-written zod schema validates both the seed file and Supabase rows via parseData, so schema drift fails the build instead of shipping wrong pages. - Rebuild-on-change wiring: A Supabase Database Webhook (pg_net) POSTs a Cloudflare Workers Builds Deploy Hook, with the hook URL secured in Supabase Vault, giving fresh data within minutes without shipping any data-fetching JavaScript. - Use Case: A restaurant site needs a menu that the owner edits in Supabase. The loader reads the table at build time, pages consume getCollection('catalog'), and a webhook-triggered rebuild publishes edits automatically. ## Quick Start Set up a build-time data layer for my Astro site that loads a product catalog from Supabase through a content-collection loader with a zod schema and rebuilds the site when rows change.

Frequently Asked Questions about data-layer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load Supabase data into Astro content collections?▼

Write a custom loader using Astro's Content Loader API that creates a supabase-js client, queries the table at build time, and calls parseData to validate each row against a zod schema before storing it. Pages consume the data with getCollection and never change when the source changes.

Should I fetch data at build time or client-side in Astro?▼

Default to build time: the site stays fully prerendered, ships zero data-fetching JavaScript, and keeps CSP at connect-src 'self'. Client-side supabase-js reads cost roughly 53 KB gzip and a widened CSP, justified only for per-visitor or high-frequency data a rebuild cannot serve.

How do I rebuild an Astro site when Supabase data changes?▼

Create a Supabase Database Webhook using pg_net that POSTs to a Cloudflare Workers Builds Deploy Hook on insert, update, or delete. Store the hook URL in Supabase Vault since the unauthenticated URL is itself the deploy credential, and use a statement-level trigger to avoid build storms.

Does Astro 7 still support @astrojs/db?▼

No. @astrojs/db is deprecated on npm and was removed in Astro 7. The replacement pattern is a content-collection loader over a seed file or Supabase with a zod schema, which avoids the second database and libSQL lock-in.

Can I use Supabase generated TypeScript types instead of zod?▼

Generated types are only a cross-check, never the source of truth, because they vanish at runtime and validate nothing. A hand-written zod schema imported from astro/zod validates both seed files and Supabase rows at build time, failing the build on contract violations.

When should I use Astro live content collections instead of build-time loaders?▼

Only when per-request freshness is the product itself, such as true dashboards or inventory-critical pages. Live collections require on-demand rendering, flipping the Worker from assets-only to assets plus main entry, which changes the deploy shape, latency, and cost.

Related Skills

Explore More Software Engineering Skills→
savvaszisavvaszi

building-emdash-site

Build and customize EmDash CMS sites on the Astro framework.

Community
Advanced
Wahidul123Wahidul123

backend

Create server-side API routes and backend endpoints for Astro projects.

Community
Intermediate
blockblock
49

client-boundaries

Detect forbidden cross-app imports and console.log calls in frontend code.

Official
Intermediate
brendadeeznuts1111brendadeeznuts1111

sveltia-cms

Integrate Sveltia CMS into static site projects with Git-native workflows.

Community
Intermediate