Fresh — Next-Gen Full-Stack Web Framework for Deno

Introduction

Fresh is a server-side rendered web framework built for Deno. It takes the islands architecture approach: pages are rendered entirely on the server, and only the interactive components (islands) ship JavaScript to the browser. This results in fast page loads with minimal client-side overhead.

What Fresh Does

• Renders pages on the server with zero client JS by default
• Uses file-system-based routing where the directory structure defines URL paths
• Supports interactive islands that hydrate independently on the client using Preact
• Provides built-in TypeScript and JSX support through Deno with no build step
• Includes middleware, layouts, and error pages as first-class concepts

Architecture Overview

Fresh processes requests through a pipeline of middleware and route handlers. Routes are defined by files in the routes/ directory, and each route exports a handler function (for data) and a default component (for rendering). Interactive components placed in the islands/ directory are automatically code-split and hydrated on the client. Since Fresh runs on Deno, it uses ES modules natively and requires no bundler or transpiler during development.

Self-Hosting & Configuration

• Requires Deno runtime (v1.35+ or Deno 2.x) installed on the host
• Deploy to Deno Deploy for zero-config edge hosting, or run on any server with Deno installed
• Configure project settings in deno.json (import maps, tasks, compiler options)
• Static assets are served from the static/ directory with automatic caching headers
• Environment variables are accessed via Deno.env.get() with no extra libraries needed

Key Features

• Islands architecture ships only the JavaScript that interactive components actually need
• No build step in development for instant server startup and hot reloading
• File-system routing with support for dynamic segments, route groups, and catch-all routes
• Built-in Preact integration for a lightweight and fast component model
• First-class TypeScript support with no configuration required

Comparison with Similar Tools

• Next.js — React-based with more features and larger ecosystem, but heavier and requires Node.js
• Astro — also uses islands architecture; supports multiple UI frameworks, not tied to Deno
• Remix — focuses on web fundamentals with progressive enhancement; Node.js-based
• SvelteKit — full-stack Svelte framework; different component model and build toolchain
• Hono — lightweight edge framework; no built-in rendering, better suited for APIs

FAQ

Q: Do I need to learn Deno to use Fresh? A: Basic familiarity helps, but if you know TypeScript and JSX, you can start immediately. Fresh handles most Deno-specific concerns for you.

Q: Can I use npm packages with Fresh? A: Yes. Deno 2.x supports npm packages natively via npm: specifiers, and Fresh projects can use them directly.

Q: How does performance compare to Next.js? A: Fresh typically has smaller page sizes and faster time-to-interactive because it ships less JavaScript. Server-side rendering speed depends on your handler logic.

Q: Is Fresh production-ready? A: Yes. It is used by Deno's own properties and various production sites. The Deno team actively maintains it.

Sources

• https://github.com/denoland/fresh
• https://fresh.deno.dev/