deno run -A -r https://fresh.deno.dev
Introducing Fresh:
Fresh is designed to be easy to use by building on the best well-known tools, conventions, and web standards.
Fresh routes are dynamically server-rendered Preact components, so there's zero JavaScript shipped to the browser by default.
Simple to write; fast to run.
export default function HomePage() {
const time = new Date().toLocaleString();
return (
<p>Freshly server-rendered {time}</p>
);
}
Freshly server-rendered Sep 12, 2024, 11:38:51 AM UTC
Fresh ships plain HTML to the client, then hydrates with JavaScript only where needed.
Because it's Preact, you get best-in-class performance, plus the convenience of Signals.
Learn more about islandsimport { useSignal } from "@preact/signals";
export default function Counter(props) {
const count = useSignal(props.start);
return (
<div>
<h3>Interactive island</h3>
<p>The server supplied the initial value of {props.start}.</p>
<div>
<button onClick={() => count.value -= 1}>-</button>
<div>{count}</div>
<button onClick={() => count.value += 1}>+</button>
</div>
</div>
);
}
The server supplied the initial value of 3.
Don't fight the browser. Fresh helps you handle form submissions and other dynamic requests server-side, from any route.
Since Fresh is built on Deno, it's built on web standards.
Forms in Freshimport { Handlers } from "$fresh/server.ts";
export const handler: Handlers = {
async POST(req) {
const form = await req.formData();
// Do something with the form data here,
// then redirect user to thank you page
const headers = new Headers();
headers.set("location", "/thanks");
return new Response(null, {
status: 303,
headers,
});
},
};
Fresh Partials let you fetch HTML and slot it directly into the page, without a full page reload—perfect for interactive elements and dynamic apps.
Learn more about Partialsimport { Partial } from "$fresh/runtime.ts";
export const Recipes = () => (
<div f-client-nav>
<aside>
<button f-partial="/recipes/lemonade">
Lemonade
</button>
<button f-partial="/recipes/lemon-honey-tea">
Lemon-honey tea
</button>
<button f-partial="/recipes/lemondrop">
Lemondrop Martini
</button>
</aside>
<main>
<Partial name="recipe">
Click a recipe to stream HTML into this spot
</Partial>
</main>
</div>
);
Fresh is the secret sauce behind production-grade, enterprise-ready software like Deco.cx, Brazil's top eCommerce platform
“The team also used Fresh, a next-gen Deno-native full stack web framework that sends zero JavaScript to the client, for its modern developer experience and snappy performance…
This stack unlocked 5x faster page load speeds and a 30% jump in conversion rates for their clients.”
Deno is the next evolution of server-side JavaScript, with stronger security, a robust built-in toolchain, and zero-config TypeScript support. (It's faster than Node, too.)
Learn more about DenoJump right in and build your website with Fresh. Learn everything you need to know in seconds.
Get started