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

> Fresh is a full-stack web framework for Deno that renders pages on the server by default and ships zero JavaScript to the client unless explicitly needed. It uses Preact for interactive islands and file-system routing for simplicity.

## Install

Save in your project root:

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

## Quick Use
```bash
# Requires Deno installed
deno run -Ar https://fresh.deno.dev my-app
cd my-app
deno task start
```

## 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/


---
Source: https://tokrepo.com/en/workflows/asset-2cc3d926
Author: AI Open Source