Full-stack development with Fresh 2

Fresh 2 is a full-stack framework built on Web standards, Deno, and Preact. Pages render on the server by default; only interactive components placed in islands/ send their corresponding JavaScript to the browser.

Create a project

deno run -Ar jsr:@fresh/init
cd my-fresh-app
deno task dev

The current generated structure includes routes/ (with the _app.tsx wrapper), islands/, components/, static/, main.ts, client.ts, and vite.config.ts. To tell whether a guide still targets Fresh 1.x, look for these signals: the presence of fresh.gen.ts, dev.ts, or fresh.config.ts means 1.x; Fresh 2 replaced them with vite.config.ts and client.ts (routes/_app.tsx exists in both versions and is not a distinguishing marker).

Page route

import { define } from "@/utils.ts";

export default define.page(() => (
  <main>
    <h1>About</h1>
    <p>This HTML is rendered on the server.</p>
  </main>
));

Island

import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>Count: {count}</button>;
}

Create an island only for browser state, events, or effects. Keep navigation, headings, and product details server-rendered to preserve Fresh's low-client-JavaScript advantage.

APIs, middleware, and deployment

API routes return Web Response objects. Put authentication, request IDs, and security headers in middleware. Run deno task check and project tests before deployment. Fresh runs on the new Deno Deploy, Docker, and other places that run Deno.

Official references: Fresh introduction, Getting started, and Deployment.