Framework Applications Hub

Explore different application architectures and patterns using Astro, SolidJS, and Svelte. Learn about client islands, server islands, SPAs, and hydration strategies.

Application Architectures

Single Page Applications

Full client-side applications with routing, state management, and complete framework hydration.

🔥 SolidJS SPA 🎯 Svelte SPA 👄 Qwik SPA

Client Islands

Interactive components hydrated only when needed, keeping the majority of the page static.

🏝️ Interactive Islands ⏰ Lazy Load Islands 👁️ Visible Islands

Server Islands

Server-side rendered components with dynamic content, perfect for SEO and performance.

🚀 Dynamic Content 🔗 API Integration 🗄️ Database Queries

Astro's Functionality

Astro supports a lot of integrations out of the box other than the obvious server and client islands

⚡ Astro Actions 🎬 View Transitions 🚀 Astro's SPA 🧩 Astro Partials + HTMX

Routing

Explore Astro's file-based routing system with static and dynamic routes, redirects, and rewrites.

🛣️ Routing Examples

Astro File Types

Explore Astro's versatile file system support. Create pages using your preferred format - from Astro components to Markdown, HTML, and even API endpoints.

.astro Components

Astro's powerful component format combining HTML, CSS, JavaScript, and server-side code.

View .astro Demo
MD

.md Markdown

Write content in Markdown and let Astro transform it into beautiful HTML pages.

View .md Demo
MDX

.mdx Enhanced Markdown

Markdown with JSX components for interactive content and advanced layouts.

View .mdx Demo

.html Plain HTML

Standard HTML files served as-is, perfect for static content or legacy pages.

View .html Demo

.js/.ts API Endpoints

Create REST API endpoints that return JSON, handle forms, or serve dynamic data.

Test API Endpoint

Error Pages

Custom 404 and 500 error pages for better user experience and branding.

Test 404 Page

Pages & Demos

Explore the various page types and demos we've built to showcase Astro's capabilities. Each example demonstrates different patterns and best practices.

File Type Demos

Live examples of different file types Astro supports.

  • .astro component pages
  • Markdown & MDX content
  • API endpoints

Framework Integrations

Working examples of different framework integrations.

  • SolidJS applications
  • Svelte components
  • Qwik SPAs

Special Pages

Error handling and edge cases.

  • Custom 404 page
  • Custom 500 error page
  • Dynamic routes

Hydration Strategies

Partial Hydration

Ship only the JavaScript you need. Most of your site remains static HTML for optimal performance.

client:load - Hydrate immediately
client:idle - Hydrate when browser is idle
client:visible - Hydrate when in viewport

Full Hydration

Traditional SPA approach where the entire application is hydrated on the client side.

Complete framework runtime
Client-side routing
Global state management

CloudFlare Integration Examples

Workers API

Serverless functions at the edge

D1 Database

SQLite at the edge

R2 Storage

Object storage for assets

KV Store

Global key-value storage

Start Building with ASSQ-CloudFlare

Choose your preferred architecture and framework combination. Each approach is optimized for different use cases.

Read Documentation Try Framework Demo