repository·main·Indexed 12 days ago
https://github.com/denoland/freshA high-performance web framework for the Deno runtime featuring an island-based architecture for client-side interactivity and zero JavaScript by default. It provides built-in TypeScript support, file-system routing, and Ahead-of-Time (AOT) builds for optimized deployment to Deno Deploy. Includes official plugins for Tailwind CSS and Vite.
Fresh is a next-generation web framework built for speed, reliability, and simplicity. Key features include:
Fresh is a full-stack modern web framework for JavaScript and TypeScript developers. It is designed to build high-quality, performant, and personalized web applications such as blogs, e-commerce shops, or large-scale web applications.
Core characteristics include:
For more complex application structures, Fresh provides:
<body> tag.ctx.render() across different routes.Fresh is built around several fundamental abstractions:
Response. They can set headers or pass state. If a middleware returns a response without calling the next one, it acts as a handler.A middleware is a function that intercepts a request and returns a response. It receives a Context object containing the Request.
Middlewares are typically used for:
ctx.stateMiddlewares can be chained, allowing you to perform actions both before and after the next handler in the chain by awaiting ctx.next().
const app = new App<{ greeting: string }>()
.use((ctx) => {
// Middleware to pass data via ctx.state
ctx.state.greeting = "Hello world";
return ctx.next();
})
.use(async (ctx) => {
// Middleware to modify the response after the next handler finishes
const res = await ctx.next();
res.headers.set("server", "fresh server");
return res;
})
.get("/", (ctx) => {
// A handler (a form of middleware that responds)
return ctx.render(<h1>{ctx.state.greeting}</h1>);
});Context instance is a shared object passed through all middlewares in Fresh. It provides a unified interface to access the incoming Request, the requested URL, route parameters, and application state, while also providing helper methods to trigger redirects or render JSX into HTML responses.The app wrapper is the outermost component in Fresh's rendering hierarchy. It is rendered only on the server and defines the shared <html, <head>, and <body> tags for every page in your application.
Use an app wrapper to:
<html lang="en">).<meta> tags, fonts, or stylesheets.<body> class or data attribute.Middleware can attach data to ctx.state, which is then accessible to all downstream handlers and page components. This is useful for sharing information like user sessions across your application.
// routes/_middleware.ts
import { define } from "@/utils.ts";
export default define.middleware(async (ctx) => {
const session = await getSession(ctx.req);
ctx.state.user = session?.user ?? null;
return ctx.next();
});
// routes/dashboard.tsx
import { page } from "fresh";
import { define } from "@/utils.ts";
export const handler = define.handlers({
GET(ctx) {
if (!ctx.state.user) {
return ctx.redirect("/login");
}
return page();
},
});
export default define.page((ctx) => {
return <h1>Welcome, {ctx.state.user.name}</h1>;
});Route groups allow you to group related routes under a shared layout without affecting the URL structure. To create a route group, wrap a folder name in parentheses, such as (marketing) or (info).
Inside a group folder, a _layout.tsx file will apply to all routes within that group. This is useful when different sets of routes need different layouts (e.g., a marketing layout vs. an admin layout) even if they share similar URL segments.
Warning: Avoid creating routes in different groups that map to the same URL (e.g., (group-1)/about.tsx and (group-2)/about.tsx), as this creates ambiguity in route matching.
└── <root>/routes
├── (marketing)
│ ├── _layout.tsx # applies to about.tsx and career.tsx
│ ├── about.tsx
│ └── career.tsx
└── (info)
├── _layout.tsx # applies to archive.tsx and contact.tsx
├── archive.tsx
└── contact.tsxFresh renders components in a nested hierarchy. The app wrapper is the outermost layer, followed by layouts, and finally the specific page component:
_app.tsx): Outermost layer; provides <html>, <head>, and <body>._layout.tsx): Shared page chrome like navigation, sidebars, or footers.In this hierarchy, the app wrapper wraps the layouts, and the layouts wrap the page.
You can register multiple layouts for different paths. Layouts are inherited from parent paths based on specificity. A layout registered at "*" applies to all routes, and more specific layouts are layered on top of it.
For example, if you have a layout for "*" and a layout for "/admin/*", a request to /admin/dashboard will be wrapped by both: MainLayout will be the outer wrapper, and AdminLayout will be the inner wrapper.
const app = new App()
.layout("*", MainLayout) // Applied to all routes
.layout("/admin/*", AdminLayout) // Added on top for /admin/* routes
.get("/", (ctx) => ctx.render(<h1>Home</h1>))
.get("/admin/dashboard", (ctx) => ctx.render(<h1>Dashboard</h1>));