Fresh — Web Framework for Deno with Island Architecture

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