Qwik Resumability Pattern

Build a production-ready instant-loading application using Qwik with resumability, zero hydration, and fine-grained reactivity for the following requirements:

Application Overview

App Name: [e.g., BlogPlatform, E-commerce, Dashboard]
App Purpose: [What does this application do?]
Target Users: [Who will use this app?]
Performance Goal: [Sub-second TTI / Instant interaction / Custom target]
Deployment: [Vercel / Netlify / Cloudflare Pages / Node.js / Custom]

Core Features & Pages

Define 5-10 main pages/features:

Page 1: [PageName, e.g., Home]

Route: [/ or /path]
Page Type: [Landing / List / Detail / Dashboard / Form]
Data Loading: [Static / Server-side / API / Real-time]
Interactivity: [High / Medium / Low]
Key Components: [Hero, ProductList, ContactForm, etc.]
Server Functions Needed: [Data fetching, mutations, etc.]

Page 2: [PageName, e.g., Product Detail]

Route: [/products/[id] or similar]
Page Type: [Type of page]
Data Loading: [How data is loaded]
Interactivity: [Level of interactivity]
Key Components: [List components]
Server Functions Needed: [List server functions]

Page 3: [PageName]

Route: [Route pattern]
Page Type: [Type]
Data Loading: [Method]
Interactivity: [Level]
Key Components: [Components]
Server Functions Needed: [Functions]

[Continue for 5-10 pages]

Data & State Management

Data Sources

Primary Data Source: [REST API / GraphQL / Database / CMS / Static]
API Base URL: [https://api.example.com or placeholder]
Authentication: [JWT / Session / API Key / None]
Real-time Updates: [WebSocket / SSE / Polling / None]

Server Functions

Define server-side functions needed:

Server Function 1: [Name, e.g., fetchProducts]

Purpose: [What this function does]
Parameters: [Input parameters with types]
Data Source: [Database / API / File system]
Return Type: [What it returns]
Caching: [Cache strategy or none]

Server Function 2: [Name, e.g., createOrder]

Purpose: [What this function does]
Parameters: [Input parameters]
Data Source: [Where data goes]
Return Type: [Return type]
Caching: [Cache strategy]

[Define 3-8 server functions]

Client State

Global State: [Shopping cart / User preferences / Theme / None]
State Management: [useSignal / useStore / Context / None]
Persistence: [localStorage / sessionStorage / None]

Components Architecture

Reusable Components

Define 5-15 reusable components:

Component 1: [Name, e.g., ProductCard]

Purpose: [Display product information]
Props: [List props with types]
Interactivity: [Click, hover, form input, etc.]
Lazy Loading: [Visible task / Resource / None]
Server Integration: [Calls server functions / None]

Component 2: [Name, e.g., SearchBar]

Purpose: [Component purpose]
Props: [Props list]
Interactivity: [Interactions]
Lazy Loading: [Loading strategy]
Server Integration: [Server calls]

[Define 5-15 components]

Layout Components

Root Layout: [Header, Footer, Navigation structure]
Nested Layouts: [Dashboard layout, Auth layout, etc.]
Shared Elements: [Navigation, Sidebar, Breadcrumbs, etc.]

Routing & Navigation

Route Structure

/                           - [Home page]
/[route1]                   - [Page description]
/[route2]/[id]              - [Dynamic route description]
/[route3]/[...slug]         - [Catch-all route description]

Route Loaders

For each route that needs data:

Route: [Path]
Loader Function: [What data to load]
Data Source: [API / Database / Static]
Error Handling: [404 / Error page / Fallback]

Navigation Features

Navigation Type: [Top nav / Sidebar / Tabs / Breadcrumbs]
Active Link Styling: [Yes / No]
Prefetching: [On hover / On visible / Manual / None]
Loading States: [Progress bar / Skeleton / Spinner / None]

Performance Optimization

Lazy Loading Strategy

Component Visibility: [Load when visible / Eager / Manual]
Image Loading: [Lazy / Eager / Priority hints]
Route Prefetching: [Aggressive / Conservative / None]
Code Splitting: [Per route / Per component / Automatic]

Resumability Features

Interactive Elements: [Buttons, forms, modals to make resumable]
Event Handlers: [Click, submit, scroll, etc.]
State Serialization: [What state to serialize]
Progressive Enhancement: [Works without JS / Requires JS]

Caching Strategy

Static Assets: [CDN / Browser cache / Service worker]
API Responses: [Cache duration / Invalidation strategy]
Server Function Results: [Cache / No cache]

Server Integration

Backend Requirements

Backend Type: [Qwik City server / External API / Serverless / None]
Database: [PostgreSQL / MongoDB / Supabase / None]
ORM/Client: [Prisma / Drizzle / MongoDB driver / None]
Authentication: [NextAuth / Lucia / Custom / None]

Server Endpoints

Define API endpoints if needed:

Endpoint 1: [GET /api/products - List products]
Endpoint 2: [POST /api/orders - Create order]
[Additional endpoints]

Environment Variables

DATABASE_URL=...
API_KEY=...
AUTH_SECRET=...
[Additional vars]

UI/UX Design

Styling Approach

CSS Framework: [Tailwind / Vanilla CSS / CSS Modules / Styled components]
Design System: [Custom / Material / Shadcn-like / None]
Theme: [Light / Dark / Both with toggle]
Responsive: [Mobile-first / Desktop-first / Both]

Interactive Elements

Forms: [Contact, Login, Checkout, Search, etc.]
Modals/Dialogs: [Confirmation, Image viewer, etc.]
Animations: [Page transitions / Component animations / None]
Loading States: [Skeleton screens / Spinners / Progress bars]

Accessibility

ARIA Labels: [Comprehensive / Basic / None]
Keyboard Navigation: [Full support / Basic / None]
Screen Reader: [Optimized / Basic / None]
Focus Management: [Custom / Default]

Advanced Features

Progressive Enhancement

No-JS Fallback: [Full functionality / Partial / None]
Form Submission: [Works without JS / Requires JS]
Navigation: [Works without JS / Requires JS]

SEO & Meta

Meta Tags: [Dynamic per page / Static / None]
Open Graph: [Yes / No]
Structured Data: [JSON-LD / None]
Sitemap: [Auto-generated / Manual / None]

Analytics & Monitoring

Analytics: [Google Analytics / Vercel / Custom / None]
Error Tracking: [Sentry / Custom / None]
Performance Monitoring: [Web Vitals / Custom / None]

Code Generation Requirements

Generate a complete Qwik application including:

Project Setup:
- package.json with Qwik dependencies
- vite.config.ts for Qwik
- tsconfig.json with proper settings
- Environment variable template
Route Files:
- All page routes in src/routes/
- Dynamic routes with [param] syntax
- Layout files (layout.tsx)
- Route loaders with routeLoader$()
- Error boundaries (error.tsx)
Components:
- All reusable components with component$()
- Proper $ suffix for lazy loading
- useSignal for reactive state
- useStore for complex state
- useVisibleTask$ for visibility-based loading
- useResource$ for async data
Server Functions:
- All server$ functions for backend logic
- Database queries (if applicable)
- API integrations
- Authentication logic
- Data validation
Layouts:
- Root layout with header/footer
- Nested layouts for sections
- Navigation components
- Shared UI elements
Styling:
- Global styles
- Component styles
- Tailwind configuration (if using Tailwind)
- Theme implementation
- Responsive breakpoints
State Management:
- Global state with context (if needed)
- Local component state with useSignal
- Form state management
- Persistence logic
Configuration:
- Qwik City configuration
- Adapter configuration (Vercel, Netlify, etc.)
- Build optimization settings
- Environment variable handling
Utilities:
- Helper functions
- Type definitions
- Constants
- Validation schemas
Documentation:
- README with setup instructions
- Component documentation
- API documentation
- Deployment guide

Output production-ready Qwik code following resumability best practices with:

Proper use of $ suffix for lazy loading
Fine-grained reactivity with signals
Server functions for backend logic
Zero hydration overhead
Automatic code splitting
Progressive enhancement
SEO-friendly rendering
Type-safe TypeScript
Optimized bundle size
Instant interactivity
Sub-second Time to Interactive