Best for: Simple brochure sites, portfolios, landing pages that need zero build complexity.
Pros
- Zero build step -- edit and deploy
- No dependencies to update or break
- Fastest possible TTFB
- Any developer can maintain it
- Smallest possible footprint
Cons
- No component reuse -- nav/footer duplicated in every file
- Adding pages means copy/pasting full HTML
- CSS gets unwieldy past ~20 pages
- No type safety or build-time checks
Limitations
No server-side rendering, no dynamic routes, no data fetching. Navigation updates require editing every file manually. Not practical for sites that change frequently or have >30 pages.
Best for: Content-heavy sites, blogs, marketing sites. Our top recommendation for most projects.
Pros
- Ships zero JS by default -- pure HTML output
- Component-based with any UI framework (React, Svelte, Vue)
- Islands architecture for selective interactivity
- Excellent content collections API
- Fastest build times we tested (531ms for 20 pages)
Cons
- Not ideal for highly interactive SPAs
- Smaller ecosystem than Next.js/Nuxt
- Template syntax has a learning curve
- Limited middleware/API route support vs full-stack frameworks
Limitations
Best for content/marketing sites, not complex web apps. Client-side state management requires bringing in a framework island. The .astro template format won't feel familiar to React/Vue developers at first.
Best for: Full-stack web apps, sites needing ISR/SSR, teams already using React.
Pros
- Largest ecosystem and community
- App Router with React Server Components
- Excellent TypeScript support
- Vercel deployment is seamless
- ISR for dynamic content with static speed
Cons
- Heavy -- bundles are larger than Astro/Eleventy
- Static export mode disables many features (ISR, middleware, API routes)
- Frequent breaking changes between major versions
- Complex mental model (server vs. client components)
Limitations
Static export (used here for Cloudflare Pages) strips out most of what makes Next.js powerful. If you're not using SSR/ISR, you're paying the complexity cost without the benefits. Image optimization disabled in export mode.
Best for: Interactive sites, dashboards, teams that value developer experience and small bundles.
Pros
- Smallest runtime of any JS framework -- compiles away
- Svelte 5 runes are intuitive and powerful
- Built-in animations and transitions
- Scoped CSS by default -- no CSS-in-JS needed
- Adapter-static works perfectly for Cloudflare Pages
Cons
- Smaller ecosystem -- fewer pre-built components
- Svelte 5 runes syntax is new (most tutorials use Svelte 4)
- Fewer job postings than React/Vue
- TypeScript integration improving but not as mature
Limitations
Smaller talent pool makes hiring harder. The Svelte 4 to 5 migration changed syntax significantly, so many community resources are outdated. Fewer third-party UI component libraries compared to React.
Best for: Performance-critical sites where every millisecond of TTI matters. Experimental projects.
Pros
- Resumability -- zero hydration cost
- Instant interactivity regardless of page size
- Familiar JSX syntax for React developers
- Fine-grained lazy loading at the component level
- Theoretical performance ceiling is unmatched
Cons
- SSR-first -- static export requires workarounds
- Small community, limited ecosystem
- Dollar-sign syntax (component$, useSignal$) is unusual
- Fewer deployment targets compared to mainstream frameworks
Limitations
Generating static HTML requires an SSR server or SPA fallback (we used SPA mode here). The $ convention for serialization boundaries is a mental model shift. Very few third-party component libraries exist. Not recommended for teams that need to hire easily.
Best for: Teams already using React Router who want file-based routing and SSR without Next.js.
Pros
- Built on web standards (fetch, FormData, Response)
- Progressive enhancement works with JS disabled
- Nested layouts and parallel data loading
- Prerender config makes static export straightforward
- Great error boundary handling
Cons
- Remix-to-React-Router rebrand caused ecosystem confusion
- Fewer integrations than Next.js
- Flat file routing can get messy with many routes
- Community documentation is fragmented across Remix and RR7
Limitations
The Remix/React Router merge created naming confusion -- tutorials and Stack Overflow answers reference both names. Static prerendering works but is less mature than Next.js. The flat route naming convention (dots for nesting) is polarizing.
Best for: Vue.js teams building full-stack apps. The Vue equivalent of Next.js with better DX.
Pros
- Auto-imports for components, composables, and utils
- nuxt generate produces clean static output
- Vue 3 Composition API is elegant and readable
- Excellent module ecosystem (SEO, images, fonts, auth)
- Nitro server engine is fast and flexible
Cons
- Magic auto-imports can confuse IDE tooling
- Slower build times than Astro/Eleventy
- Vue has less market share than React in US
- Nuxt-specific patterns don't transfer to other frameworks
Limitations
Vue ecosystem is strongest in Asia and Europe -- US hiring pool is smaller than React. Auto-import magic means you don't see explicit imports, which can confuse new team members. Build times are longer than static-first tools like Astro.
Best for: Content sites, documentation, blogs. The simplest SSG with maximum flexibility.
Pros
- Zero client-side JS by default -- pure HTML output
- Supports 10+ template languages (Nunjucks, Liquid, etc.)
- Incredibly fast builds
- No framework lock-in -- just HTML
- Data cascade is powerful for content-driven sites
Cons
- No built-in client-side interactivity
- Nunjucks/Liquid templates feel dated vs JSX/Svelte
- Adding interactivity requires manual JS wiring
- Configuration can be opaque for beginners
Limitations
Not a web app framework -- it generates static HTML and gets out of the way. If you need client-side state, routing, or real-time features, you'll need to bring your own solution. Template languages like Nunjucks feel old-school compared to modern component frameworks.
Best for: API-first sites, edge workers, developers who want full control over the HTTP layer.
Pros
- Ultra-lightweight -- smallest framework overhead
- Runs everywhere: Cloudflare Workers, Deno, Bun, Node
- Express-like API but built for edge runtimes
- Perfect for APIs alongside static HTML
- Web Standards API (Request/Response)
Cons
- No file-based routing -- manual route registration
- No built-in SSG or page generation
- Static HTML files require manual nav/footer updates
- Smallest community of all frameworks tested
Limitations
Hono is a server framework, not a frontend framework. We paired it with static HTML files, which means the same duplication problems as V1. Great for APIs and edge functions, but for a pure marketing site, you'd get more mileage from Astro or Eleventy.
Best for: Performance-focused SPAs, developers who want React-like DX without the virtual DOM.
Pros
- Fine-grained reactivity -- no virtual DOM diffing
- Familiar JSX syntax for React developers
- Signals-based state management is clean
- Smallest runtime of any JSX framework
- True reactive primitives (no stale closures)
Cons
- SolidStart (meta-framework) is still maturing
- SPA routing for static deploy required workarounds
- Smallest ecosystem of any JSX framework
- Component patterns differ subtly from React (no re-renders)
Limitations
SolidStart's SSG story is still evolving. We used SPA mode with client-side routing, which means no server-rendered HTML for SEO crawlers on initial load. The "looks like React but isn't" aspect catches developers off-guard -- destructuring props breaks reactivity.
Best for: Portfolio showcases, agency homepages, immersive brand experiences where the navigation IS the content.
Pros
- Zero build step -- single HTML file
- Cinematic, immersive user experience
- Light mode with hero imagery is visually polished
- Momentum-based horizontal navigation feels native
- Constellation layout is a unique spatial model
Cons
- Horizontal nav is non-standard -- users may be confused
- SEO limited -- single page, no crawlable route structure
- Mobile experience requires different interaction model
- Content capacity limited by blade count
Limitations
Horizontal blade navigation is a bold UX choice -- it prioritizes experience over convention. This works for portfolio/agency sites where the goal is to impress, but not for content-heavy sites where users need to find specific information quickly. Desktop-first by design.
Best for: Dashboard-style agency homepages, content-dense landing pages where every service needs visual presence without scrolling.
Pros
- Zero build step -- single HTML file
- Asymmetric bento grid is visually distinctive
- Click-to-expand tiles reveal deep content without page navigation
- 4-color accent system creates visual hierarchy
- Stat count-up animations add polish
Cons
- Complex CSS Grid template -- harder to modify layout
- Single page means limited SEO crawl surface
- Tile expand/collapse adds interaction complexity
- Content density may overwhelm on small screens
Limitations
The bento grid is a modern, visually striking layout but trades conventional navigation for a mosaic of expandable tiles. Great for making a strong first impression, but not suited for sites with deep content hierarchies or extensive page counts. Best as a single-page showcase.
Best for: Brand-forward agency sites, creative studios, and portfolio experiences where the scroll IS the product demo.
Pros
- Zero build step -- single HTML file
- Truly cinematic scroll experience with scene transitions
- Canvas light streaks create atmospheric highway visual
- Background gradient cross-dissolves are buttery smooth
- Scroll-driven pacing lets user control the "film"
Cons
- Complex scroll math -- hard to modify scene timings
- Single page with no crawlable routes limits SEO
- Content is sparse by design -- 80% visual, 20% text
- Very long scroll depth (~1850vh) may lose some users
Limitations
The cinematic scroll model is the most experiential layout in the collection but also the most opinionated. Every element is scroll-position-dependent, making content updates non-trivial. Best for agencies and creatives who want their homepage to feel like a brand film, not an information site.
Best for: A second take on the cinematic scroll -- same concept, completely different aesthetic. Shows how identical layouts can feel distinct through color, typography, and atmosphere.
Pros
- CSS-only bokeh orbs replace canvas for simpler maintenance
- Horizontal progress bar echoes video playback UI
- Scene counter (01/07) gives spatial awareness
- Warm amber palette feels premium and inviting
- Moving spotlight gradient adds depth without canvas overhead
Cons
- Same scroll-math complexity as V13
- Single page limits SEO crawlability
- CSS bokeh orbs can blur on low-end GPUs
- Long scroll depth (~2140vh) requires user commitment
Limitations
A companion piece to V13 that proves the cinematic scroll model is a flexible canvas, not a one-trick pony. The amber warmth and CSS-only background effects make it more approachable to maintain than V13's canvas-based streaks, while the horizontal progress bar and scene counter add wayfinding absent from the first version.
Best for: Editorial brands, creative agencies, luxury portfolios where the layout itself tells the story.
Pros
- Zero build step -- single HTML file
- 7 unique compositional spreads, no two alike
- Full-bleed imagery creates premium editorial feel
- Typographic wall and pull quotes add character
- Parallax layers create depth without canvas
Cons
- Desktop performance needs work (70 Lighthouse)
- Complex CSS Grid templates -- hard to modify layouts
- Single page limits SEO surface
- Content-heavy spreads require careful image optimization
Limitations
The magazine spread model is content-dense and visually rich but trades performance for aesthetics. Each spread has a unique grid template that must be maintained individually. Best for brands that want their homepage to feel like opening a luxury magazine.
Best for: Agency portfolios, tech companies, SaaS landing pages where progressive disclosure builds anticipation.
Pros
- Zero build step -- single HTML file
- Page builds itself as user scrolls -- unique experience
- Blueprint grid and border-draw cards feel technical
- Word assembly animation is memorable
- Glass panels and spotlight reveal add depth
Cons
- Scroll-dependent animations may confuse some users
- Content hidden until scroll position reached
- Accessibility score needs improvement (87)
- Complex scroll event handling
Limitations
The progressive reveal concept is bold -- the page literally constructs itself as you scroll. This creates a memorable first impression but means content is hidden by default, which can frustrate users looking for specific information. Scroll-dependent animations also mean the experience degrades on mobile.
Best for: Documentary-style brand stories, before/after narratives, dual-audience sites (e.g. creators + consumers).
Pros
- Zero build step -- single HTML file
- Dual-column parallax is visually striking
- Dark + light streams create natural contrast
- Documentary pacing keeps users engaged
- Differential scroll speeds add depth
Cons
- Lowest accessibility score in collection (78)
- Dual-column requires wide viewport -- poor mobile
- Differential scroll math is complex to maintain
- Content split between columns can be confusing
Limitations
The split stream model is one of the most visually distinctive layouts but has the lowest accessibility score (78) in the collection. The dual-column approach is inherently desktop-first and requires significant rethinking for mobile. Best for sites where the visual narrative is more important than information density.
Best for: Premium product companies, SaaS marketing, tech brands that want Apple-level presentation polish.
Pros
- Perfect 100 desktop performance -- fastest variant
- System fonts = zero font loading overhead
- Pinned scroll-driven stats section is impressive
- Billboard layout is proven and scannable
- Monochromatic palette is timeless
Cons
- System font stack limits typographic expression
- Monochromatic palette can feel austere
- Billboard sections require strong copy to work
- Pinned stats section needs careful scroll tuning
Limitations
The Apple-style billboard approach delivers maximum performance (100 desktop Lighthouse) by using system fonts and minimal CSS. The trade-off is typographic personality -- system fonts are clean but generic. The pinned scroll-driven stats section is the standout feature but requires precise scroll math. Best for brands that prioritize polish over personality.
Best for: DTC product brands, service companies with multiple product lines, lifestyle brands with rich visual stories.
Pros
- Product comparison cards are unique and scannable
- Horizontal feature grid with drag-to-scroll is engaging
- Community photo mosaic builds social proof
- Auto-advancing tabbed reassurance is conversion-focused
- Strong performance (92 desktop) despite complexity
Cons
- Most complex variant (~70KB HTML) -- hard to maintain
- 12+ sections may cause scroll fatigue
- Multiple interaction patterns (tabs, drag, scroll) to learn
- Warm neutral palette may feel too muted for some brands
Limitations
The product storyteller model packs the most content and interaction patterns into a single page. At ~70KB of HTML it's the largest variant, with 12+ sections, drag-to-scroll grids, auto-advancing tabs, and a photo mosaic. Great for DTC brands that need to tell a complete product story on one page, but the maintenance burden is significant.