DEV Community

Alex Spinov
Alex Spinov

Posted on

Fresh 2 Has a Free API That Brings Zero-JS Pages to Deno With Island Architecture

Fresh is Deno's web framework. Zero JavaScript shipped to the client by default. Interactive parts are "islands" that hydrate independently. Fresh 2 adds Preact Signals, better plugins, and faster builds.

Quick Start

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

Zero JS by Default

Every Fresh page is server-rendered HTML. No JavaScript bundle. This page component ships 0 bytes of JS:

// routes/index.tsx
export default function Home() {
  return (
    <div>
      <h1>Hello Fresh</h1>
      <p>This page has zero client-side JavaScript.</p>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Islands (Interactive Components)

Only components in /islands/ get hydrated on the client:

// islands/Counter.tsx
import { useSignal } from "@preact/signals"

export default function Counter() {
  const count = useSignal(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode
// routes/index.tsx
import Counter from "../islands/Counter.tsx"

export default function Home() {
  return (
    <div>
      <h1>Static content (0 JS)</h1>
      <Counter />  {/* Only this hydrates */}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Data Loading with Handlers

// routes/posts/[id].tsx
import { Handlers, PageProps } from "$fresh/server.ts"

export const handler: Handlers = {
  async GET(_req, ctx) {
    const post = await fetchPost(ctx.params.id)
    if (!post) return ctx.renderNotFound()
    return ctx.render(post)
  }
}

export default function PostPage({ data }: PageProps) {
  return <article><h1>{data.title}</h1><p>{data.body}</p></article>
}
Enter fullscreen mode Exit fullscreen mode

Fresh vs Next.js vs Remix

Feature Fresh Next.js Remix
Runtime Deno Node Node
Default JS 0 bytes Bundle Bundle
Hydration Islands Full/Partial Full
State Preact Signals React React

The Bottom Line

Fresh is perfect for content-heavy sites that need minimal interactivity. Zero JS default + island architecture = fastest possible page loads.


Need to automate data collection or build custom scrapers? Check out my Apify actors for ready-made tools, or email spinov001@gmail.com for custom solutions.

Top comments (0)