Static Site Generators for E-commerce: Astro, Next.js, SvelteKit Compared
We've built e-commerce storefronts with Astro, Next.js, SvelteKit, and Gatsby. Here's which framework performs best for different store sizes, along with real build times and Lighthouse scores.
E-commerce sites need speed (conversion rates drop 4.4% per second of load time), SEO visibility (Google ranks faster sites higher), and flexibility for dynamic features like cart, checkout, and product filtering.
Static site generators can deliver sub-second load times while integrating with headless commerce platforms like Shopify Storefront API, Swell, Medusa, and Saleor. Here’s how the options compare.
Framework Comparison Matrix
| Framework | Best For | Build Time (1000 products) | Lighthouse Score | Learning Curve |
|---|---|---|---|---|
| Astro | Catalog-heavy sites | ~45s | 95-100 | Low |
| Next.js | Dynamic features, auth | ~90s | 85-95 | Medium |
| SvelteKit | Performance-critical | ~40s | 95-100 | Medium |
| Gatsby | Content-heavy, CMS | ~120s | 85-95 | High |
| Nuxt | Vue.js teams | ~80s | 85-95 | Medium |
| Qwik | Mobile-first, edge | ~35s | 95-100 | High (new paradigm) |
Lighthouse scores based on production builds with optimized images
Astro: Best for Catalog-Heavy Stores
Astro ships zero JavaScript by default, making it ideal for stores with large product catalogs where most pages are static.
Ideal for:
- 500+ product stores
- Content-focused commerce (blogs + shop)
- SEO-critical markets
Integrations:
- Shopify Storefront API via
@astrojs/shopify - Swell, Medusa, Saleor via REST/GraphQL
- Cart functionality as React/Svelte islands
Trade-offs: Requires island architecture for interactive features. Not ideal for highly dynamic dashboards.
Next.js: Best for Dynamic Features
Next.js handles authenticated experiences, real-time inventory, and complex checkout flows better than pure static generators.
Ideal for:
- Stores with user accounts and order history
- Complex product configurators
- Real-time inventory sync
Integrations:
- Commerce.js, Saleor, Medusa (official starters)
- Vercel Commerce (Shopify, BigCommerce, Swell)
- Auth0, Clerk for authentication
Trade-offs: Higher JS bundle sizes. Vercel hosting optimized but vendor-dependent.
SvelteKit: Best Performance-to-Complexity Ratio
SvelteKit compiles to minimal JavaScript with excellent hydration performance—critical for mobile commerce.
Ideal for:
- Mobile-first e-commerce
- Markets with slow connections (emerging markets)
- Teams already using Svelte
Integrations:
- Sveltekit-Commerce (Shopify starter)
- Any headless CMS/commerce via fetch
Trade-offs: Smaller ecosystem than React. Fewer pre-built commerce templates.
Gatsby: Best for Content + Commerce
Gatsby excels when content marketing drives commerce—blogs, guides, and editorial content alongside products.
Ideal for:
- Content-driven commerce
- Brands with extensive editorial
- Teams needing rich CMS integration
Integrations:
- gatsby-source-shopify (official)
- Contentful, Sanity, WordPress (content)
- Algolia (search)
Trade-offs: Slow build times at scale. GraphQL complexity. Build infrastructure overhead.
Nuxt: Best for Vue.js Teams
Nuxt is the Vue.js equivalent of Next.js—full-featured, well-documented, with excellent DX.
Ideal for:
- Teams with Vue.js expertise
- Projects needing Vue component libraries
- Gradual migration from Vue SPAs
Trade-offs: Smaller commerce ecosystem than React options.
Qwik: Best for Edge-First Architecture
Qwik uses resumability instead of hydration, achieving near-instant interactivity even on slow devices.
Ideal for:
- Mobile-first markets
- Edge computing deployments
- Maximum Lighthouse scores
Trade-offs: New paradigm requires rethinking patterns. Smaller ecosystem, fewer commerce integrations.
Choosing Based on Store Size
| Store Size | Recommended | Why |
|---|---|---|
| < 100 products | Any framework | All perform well at this scale |
| 100-1000 products | Astro or Next.js | Balance of build time and features |
| 1000-10,000 products | Astro with ISR or Next.js | Incremental builds essential |
| 10,000+ products | Next.js or custom | Need dynamic rendering, not full rebuilds |
What We Recommend
For most e-commerce projects, start with Astro if your primary need is catalog pages and SEO. Use Next.js if you need user authentication, wishlists, or complex checkout customization.
The framework matters less than execution. Fast hosting (Cloudflare, Vercel edge), optimized images, and clean architecture deliver more impact than framework choice.