projectsShipped
0+
Astro sites shipped
projectsShipped: z.number() .int() .min(38) .describe('shipped to prod'),
Stack Innovations
Start a project
Stack Innovations
Start a project
Most "modern" sites ship 400 KB of framework before a single byte of content. We build with Astro — static HTML by default, JavaScript only on the islands that need it. Content Collections typed with Zod, view transitions baked in, multi-framework where it makes sense, and Lighthouse 100s as a starting line, not a goal.
Each stat is a Zod field in our Content Collections schema. Hover any to see the schema definition. Counters scrub with scroll — z.number().min(...) validating every claim.
projectsShipped: z.number() .int() .min(38) .describe('shipped to prod'),
contentEntries: z.number() .int() .min(2400),
avgLighthouse: z.number() .min(95) .max(100),
jsByDefault: z.literal(0) .describe( 'before any island hydrates' ),
Click the file tree on the left — the active capability opens in the editor pane, rendered as a real .astro file or config. Each pane is a working pattern we've shipped.
Astro renders everything to static HTML at build time. Then for the small parts that need interactivity (a form, a cart, a search box), you opt-in with client:load, client:visible, client:idle, or client:only. The page ships maybe 4 KB of JS instead of 400 KB.
client:visible for below-the-foldclient:idle for low-priority widgetsclient:only="react" for client-only libsEvery Markdown / MDX file is typed with a Zod schema. getCollection() returns fully-typed entries. We design the collection schemas like database tables — with refinements, refs, defaults — so writers can't ship malformed frontmatter.
reference('authors')[...slug].astroAstro doesn't pick a winner — React, Vue, Svelte, Solid, Preact, all coexist. We pick the right framework per island: React where the team's skill is, Svelte where bundle size matters, Solid where we need fine-grained reactivity. Every island is its own tree, no shared runtime.
Astro's static-by-default model + image optimization + prefetch on viewport + critical CSS inlining + zero hydration cost = real Lighthouse 100s on real devices. We layer in JSON-LD, Open Graph, sitemaps, hreflang, and CI perf budgets that fail the build on regressions.
strategy: 'viewport'Astro's <ViewTransitions /> ships native browser View Transition API support out of the box. We design transition pairs — hero images, titles, sticky headers — so navigations feel like an SPA without ever becoming one.
transition:name="hero" across routesStatic, hybrid, or fully server — pick the runtime that fits the page. We ship pages on Cloudflare for global edge, API routes on Vercel functions, marketing pages purely static, all from the same monorepo. Adapter swap is a one-line config change.
output: 'hybrid' · per-route modeThis is what makes Astro itself: every interactive component is opt-in. Cycle the hydration directive on each island below — the rendered page on the right shows hydration boundaries, and the JS budget at the bottom updates in real time. Anime.js spring on directive change, Mo.js burst on the build button.
Same framework, two astro.config.mjs files. The diff tells the story.
import { defineConfig } from 'astro/config' export default defineConfig({}) // no integrations // no image config // no prefetch // no view transitions // no adapter // shipped to prod — everywhere.
import { defineConfig } from 'astro/config' import react from '@astrojs/react' import svelte from '@astrojs/svelte' import sitemap from '@astrojs/sitemap' import vercel from '@astrojs/vercel' export default defineConfig({ site: 'https://stackinnovations.com', integrations: [react(), svelte(), sitemap()], prefetch: { prefetchAll: true, defaultStrategy: 'viewport', }, image: { domains: ['cdn.stackinnovations.com'], formats: ['avif', 'webp'], }, output: 'hybrid', adapter: vercel({ webAnalytics: true }), experimental: { serverIslands: true, contentLayer: true, }, build: { inlineStylesheets: 'auto' }, })
Astro doesn't pick a winner. Below: four counter components, each authored in a different framework, each its own island, all on the same page. Click the buttons — each counter has its own state because each island is its own runtime tree. No leaks, no shared store.
Each island has its own state because each is its own framework runtime. Clicking React's button does nothing to Vue's counter — they're isolated by design. To share state, you reach for HTML attributes, URL state, or a tiny shared store. Architectural isolation is the feature, not a bug.
Lighthouse baseline of the existing site, content audit, Zod schema design for Content Collections, IA review.
Astro 5 scaffolded, TypeScript strict, Tailwind, framework integrations, design tokens, perf budgets in CI.
.astro components for the static spine, framework-of-choice islands for interactivity, view transitions across routes, MDX for long-form.
Image pipeline (AVIF / WebP / responsive), prefetch tuning, JSON-LD, sitemaps, hreflang. CI fails on perf regression.
Content migration via Content Layer or migrate-as-you-go. astro build, adapter wired, DNS cutover.
Astro version bumps, framework integration upgrades, perf monitoring, monthly review. Features, not tickets.