DEV Community

Alex Spinov
Alex Spinov

Posted on

Fresh Has a Free Deno Framework With Zero Build Step — Island Architecture Like Astro, But Server-Rendered

The Build Step Problem

Next.js: 30-second builds. Nuxt: webpack/vite config. Remix: build pipeline. Every framework needs a compilation step before you can see changes.

Fresh has no build step. Server-rendered by default. TypeScript just works. Deploy to Deno Deploy in seconds.

What Fresh Gives You

No Build, No Bundle

deno run -A main.ts
# Server starts. No compilation. No node_modules.
Enter fullscreen mode Exit fullscreen mode

Edit a file → refresh the page → see the change. No HMR setup needed.

File-Based Routing

routes/
  index.tsx        → GET /
  about.tsx        → GET /about
  blog/
    [slug].tsx     → GET /blog/:slug
  api/
    users.ts       → GET/POST /api/users
Enter fullscreen mode Exit fullscreen mode

Islands (Interactive Components)

// islands/Counter.tsx — client-side interactive
import { useSignal } from '@preact/signals';

export default function Counter() {
  const count = useSignal(0);
  return (
    <button onClick={() => count.value++}>
      Count: {count}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode
// routes/index.tsx — server-rendered, zero JS
import Counter from '../islands/Counter.tsx';

export default function Home() {
  return (
    <div>
      <h1>Welcome</h1>  {/* Static HTML, no JS */}
      <Counter />        {/* Only this gets JS */}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Only files in islands/ ship JavaScript to the client.

Server-Side Data Loading

import { Handlers, PageProps } from '$fresh/server.ts';

export const handler: Handlers = {
  async GET(req, ctx) {
    const data = await fetch('https://api.example.com/posts').then(r => r.json());
    return ctx.render(data);
  },
};

export default function Blog({ data }: PageProps) {
  return (
    <ul>
      {data.map((post: any) => <li>{post.title}</li>)}
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

Instant Deploy

deno deploy --project=my-fresh-app main.ts
Enter fullscreen mode Exit fullscreen mode

Deno Deploy: edge deployment in 35+ regions. Free tier: 1M requests/month.

Quick Start

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

Why This Matters

Web frameworks shouldn't need 5-minute build pipelines. Fresh proves that server rendering + islands + TypeScript can work without any build step.


Need data for your Fresh routes? Check out my web scraping actors on Apify Store — structured data via API. For custom solutions, email spinov001@gmail.com.

Top comments (0)