# pracht

> A full-stack Preact framework built on Vite with hybrid rendering (SSG, SSR, ISG, SPA) and a unified data-loading model.

## Docs

- [Adapters](https://pracht.resynapse.dev/docs/adapters): Adapters are thin layers that translate between a platform's native request handling and pracht's Web Request/Response interface. pracht ships adapters for Cloudflare Workers, Vercel Edge Functions, and Node.js.
- [API Routes](https://pracht.resynapse.dev/docs/api-routes): Standalone server endpoints that live alongside your pages. Export named HTTP method handlers or one default handler, then return <code>Response</code> objects directly.
- [CLI](https://pracht.resynapse.dev/docs/cli): The <code>@pracht/cli</code> package provides development, build, scaffolding, and doctor commands for your app.
- [Data Loading](https://pracht.resynapse.dev/docs/data-loading): pracht provides a unified data model that works across all rendering modes. Loaders fetch data on the server, API routes handle mutations, and client hooks give reactive access to route data — all with full TypeScript inference.
- [A full pracht app, end to end](https://pracht.resynapse.dev/docs/demo-comparison): A walkthrough of Launchpad — a realistic SaaS example that uses every render mode, both shells, auth middleware, and Markdown content negotiation in one codebase.
- [Deployment](https://pracht.resynapse.dev/docs/deployment): pracht apps deploy anywhere via platform adapters. Each adapter handles request conversion and asset serving for its runtime; Node also supports runtime ISG revalidation.
- [Getting Started](https://pracht.resynapse.dev/docs/getting-started): Get a pracht app running in under a minute. This guide covers project creation, development, and your first production build.
- [LLM Content Negotiation](https://pracht.resynapse.dev/docs/llms): Give AI agents first-class Markdown at the same URLs your readers use. pracht routes can negotiate on <code>Accept: text/markdown</code>, publish <code>/llms.txt</code>, and keep HTML as the browser default.
- [Middleware](https://pracht.resynapse.dev/docs/middleware): Server-side request interceptors that run before loaders and API routes. Use them for authentication, redirects, request validation, and context enrichment.
- [Migrating from Next.js](https://pracht.resynapse.dev/docs/migrate/nextjs): A practical guide to moving your Next.js App Router project to pracht. Covers routing, data loading, rendering modes, middleware, layouts, and API routes — with side-by-side code examples.
- [Performance](https://pracht.resynapse.dev/docs/performance): pracht optimizes page load performance through automatic code splitting, module preloading, and vendor chunk extraction — with zero configuration.
- [Prefetching](https://pracht.resynapse.dev/docs/prefetching): pracht prefetches route data before navigation so page transitions feel instant. Prefetching is automatic by default and can be configured per route.
- [Authentication](https://pracht.resynapse.dev/docs/recipes/auth): Protect routes with session-based auth using middleware, loaders, and API routes. This recipe covers login/logout flows, session management, and route guards.
- [Content Security Policy](https://pracht.resynapse.dev/docs/recipes/csp): Add a focused Content Security Policy with route or shell headers, then verify it against dynamic and prerendered pages.
- [Forms & Validation](https://pracht.resynapse.dev/docs/recipes/forms): Handle form submissions with progressive enhancement using pracht's <code>&lt;Form&gt;</code> component and API routes. Forms work without JavaScript and upgrade to fetch-based submissions when JS is available.
- [Full-Stack Cloudflare](https://pracht.resynapse.dev/docs/recipes/fullstack-cloudflare): Build a full-stack app on Cloudflare with D1 (SQLite), KV, and R2. This recipe covers project setup, database migrations, and wiring bindings into your loaders and API routes.
- [Full-Stack Vercel](https://pracht.resynapse.dev/docs/recipes/fullstack-vercel): Build a full-stack app on Vercel with Vercel Postgres (Neon), KV (Upstash Redis), and Blob storage. This recipe covers project setup, database provisioning, and accessing services from loaders and API routes.
- [Internationalization (i18n)](https://pracht.resynapse.dev/docs/recipes/i18n): Serve your app in multiple languages using middleware for locale detection, loaders for translated content, and context for passing the active locale through your app.
- [Logging & Observability](https://pracht.resynapse.dev/docs/recipes/logging): Capture request duration, status, and failures from loaders and API routes with one wrap-around middleware — no per-handler instrumentation.
- [Testing](https://pracht.resynapse.dev/docs/recipes/testing): Test your pracht app at every level — unit test loaders and API routes with Vitest, and run full E2E tests with Playwright to verify rendering, navigation, and hydration.
- [View Transitions](https://pracht.resynapse.dev/docs/recipes/view-transitions): Animate client-side route changes with the browser View Transitions API while keeping pracht's data loading, scroll restoration, and fallback behavior intact.
- [Rendering Modes](https://pracht.resynapse.dev/docs/rendering): pracht supports four rendering modes configured per route. Each route declares how and when its HTML is generated — giving you the right performance and freshness trade-off for every page in one app.
- [Routing](https://pracht.resynapse.dev/docs/routing): pracht uses a hybrid routing model: route modules live as files by convention, but their wiring — shells, middleware, render modes, and URL patterns — is declared explicitly in a single <code>src/routes.ts</code> manifest.
- [Shells](https://pracht.resynapse.dev/docs/shells): Layout wrappers that surround route content. Shells are decoupled from URL structure — a flat route like <code>/settings</code> can share a shell with <code>/dashboard</code> without nesting.
- [Styling](https://pracht.resynapse.dev/docs/styling): Pracht optimizes style loading for CSS that exists at build time. Prefer CSS Modules, Tailwind, or plain stylesheets over runtime CSS-in-JS — especially on server-rendered routes.
- [Why Pracht?](https://pracht.resynapse.dev/docs/why-pracht): How pracht compares to other full-stack frameworks — and when it's the right fit.