DEV Community

Alex Spinov
Alex Spinov

Posted on

Fresh Has a Free Deno Web Framework — No Build Step Required

Fresh is Deno's web framework with islands architecture. No build step, no node_modules, TypeScript by default.

Why Fresh Is Different

Most web frameworks make you choose: server-rendered (fast first load, slow interactivity) or client-rendered (slow first load, fast interactivity).

Fresh uses Islands Architecture: pages render on the server, but specific interactive components (islands) hydrate on the client. Everything else stays as static HTML.

What You Get for Free

Zero build step — no webpack, no Vite, no bundler config. Write code, refresh browser
TypeScript by default — no tsconfig needed, Deno handles it
No node_modules — dependencies from URLs or deno.json import maps
File-based routingroutes/about.tsx = /about
Islands architecture — only interactive components ship JS to client
Preact under the hood — 3KB runtime for islands

Quick Start

deno run -A -r https://fresh.deno.dev my-app
cd my-app
deno task start
Enter fullscreen mode Exit fullscreen mode

That's it. No npm install. No config files. Server starts in <1 second.

Islands in Practice

// routes/index.tsx (server-rendered, zero JS)
export default function Home() {
  return <div>
    <h1>Welcome</h1>
    <p>This paragraph ships zero JavaScript.</p>
    <Counter start={5} />
  </div>;
}

// islands/Counter.tsx (hydrated on client)
import { useSignal } from "@preact/signals";
export default function Counter({ start }: { start: number }) {
  const count = useSignal(start);
  return <button onClick={() => count.value++}>{count}</button>;
}
Enter fullscreen mode Exit fullscreen mode

Only the Counter ships JavaScript. The rest is pure HTML.

Performance

  • First load: typically <50KB total JS (most pages: 0KB)
  • Deploy to Deno Deploy: globally distributed, cold start <10ms
  • No bundle analysis needed — you control exactly which components ship JS

When to Use Fresh

  • Content sites with sprinkles of interactivity
  • Landing pages that need perfect Lighthouse scores
  • Projects where you want TypeScript without toolchain complexity
  • Edge deployment on Deno Deploy

If you're tired of configuring build tools — Fresh eliminates the problem entirely.


Need web scraping or data extraction? Check out my tools on Apify — get structured data from any website in minutes.

Custom solution? Email spinov001@gmail.com — quote in 2 hours.

Top comments (0)