# Fresh — Web Framework for Deno with Island Architecture

> Build fast server-rendered web applications on Deno with zero build step and island-based client hydration. Fresh ships zero JavaScript to the client by default and only hydrates interactive components, resulting in extremely fast page loads.

## Install

Save as a script file and run:

# Fresh — Web Framework for Deno with Island Architecture

## Quick Use
```bash
deno run -A -r https://fresh.deno.dev my-app
cd my-app
deno task start
```

## Introduction
Fresh is the official web framework for Deno, designed around just-in-time server rendering and an islands architecture. It sends zero JavaScript to the browser by default, hydrating only the interactive components (islands) that need client-side behavior, resulting in fast page loads and minimal bundle sizes.

## What Fresh Does
- Renders pages on the server with no build step required for development or production
- Implements islands architecture where only interactive components ship JavaScript
- Uses file-system routing with support for dynamic routes, layouts, and middleware
- Provides built-in TypeScript and JSX support via Deno's native capabilities
- Includes Preact as the rendering library for lightweight component authoring

## Architecture Overview
Fresh uses a request-response model where every page is server-rendered on demand. The framework distinguishes between static route components (rendered purely on the server) and island components (marked with a special file convention that signals client-side hydration). During rendering, the server outputs full HTML and only includes JavaScript bundles for declared islands. This approach avoids shipping a full framework runtime to the client and eliminates the hydration mismatch problems common in universal rendering frameworks.

## Self-Hosting & Configuration
- Initialize projects with the scaffolding command which creates routes, islands, and config files
- Define routes in the `routes/` directory using file-system conventions (index.tsx, [slug].tsx)
- Place interactive components in the `islands/` directory to enable client-side hydration
- Configure the project in `fresh.config.ts` for plugins, middleware, and build options
- Deploy to Deno Deploy for edge hosting or self-host with `deno run -A main.ts`

## Key Features
- Zero build step for development with instant server startup
- Islands architecture ships minimal client JavaScript by default
- Native TypeScript without compilation or configuration
- File-system routing with layouts, groups, and middleware support
- Tight integration with Deno Deploy for edge-first hosting

## Comparison with Similar Tools
- **Next.js** — requires Node.js and a build step; Fresh runs on Deno with no build and uses islands instead of full hydration
- **Astro** — similar islands architecture; Fresh is Deno-native and uses Preact while Astro supports multiple frameworks
- **Remix** — focuses on progressive enhancement with full hydration; Fresh hydrates only island components
- **SvelteKit** — uses Svelte compilation; Fresh leverages Preact with Deno's native TypeScript/JSX
- **Hono** — lightweight Deno/edge framework for APIs; Fresh provides full page rendering and islands architecture

## FAQ
**Q: Why does Fresh use Preact instead of React?**
A: Preact is significantly smaller (3kB vs 40kB+) which aligns with Fresh's goal of shipping minimal JavaScript. Its API is compatible with React so the transition is straightforward.

**Q: Can I use Fresh without Deno Deploy?**
A: Yes. Fresh apps are standard Deno programs that can run anywhere Deno runs, including Docker containers, VMs, or any server with Deno installed.

**Q: How do islands communicate with each other?**
A: Islands can share state through signals (Preact's reactive primitive), URL state, or by passing serializable props from the server-rendered parent layout.

**Q: Does Fresh support static site generation?**
A: Fresh is primarily designed for server-side rendering on each request. For static content, you can use response caching or deploy behind a CDN for equivalent performance.

## Sources
- https://github.com/denoland/fresh
- https://fresh.deno.dev/docs

---
Source: https://tokrepo.com/en/workflows/asset-494c7ccc
Author: Script Depot