Fresh框架：下一代全栈开发新选择
如果你已经对这些问题感到厌倦：
每次安装依赖都要等待很长时间
打包后的文件体积动不动就几百KB
想要部署到边缘节点还要研究各种平台的配置
那么可以花几分钟了解一下Fresh这个新框架。
什么是Fresh？
Fresh是Deno官方团队开发的全栈Web框架。它的特点是无需配置、默认不包含客户端JS、支持边缘部署。
核心技术特点：
运行环境：直接运行在Deno上，不是Node.js，天然支持TypeScript
部署方案：官方推荐Deno Deploy，一键推送到全球30多个边缘节点；也支持Docker自建部署
Fresh 2.0 Beta版：从尝鲜到实用
2024年9月，Fresh宣布2.0进入Beta阶段：
api已经稳定，保证向后兼容
稳定性接近正式版，可以在生产环境中试用
重要更新：内置Vite插件模式，大幅提升开发体验
Vite模式：三大改进
只需要在配置文件中添加一行代码就能开启Vite模式：
// fresh.config.ts
export default {
build: { target: "vite" }, // 开启Vite模式
};主要改进：
热更新体验
保存文件后立即刷新页面，响应速度达到毫秒级，不再需要整个页面重新加载。
极速启动
开发服务器的启动时间从秒级缩短到毫秒级，配置较低的电脑也能快速启动。
插件生态
可以直接使用Vite的所有插件：Unocss、mdx、svg、PWA等，安装后立即使用。
快速开始
创建新项目
deno run -A -r https://fresh.deno.dev my-app进入项目目录
cd my-app启动开发服务器
deno task start # 默认Deno原生模式
# 或者
deno task start:vite # Vite模式（支持热更新和快速启动）在浏览器中打开 http://localhost:8000 就能看到首页。
项目结构说明
典型的Fresh项目结构：
my-app/
├── routes/ # 页面路由
├── islands/ # 交互式组件
├── static/ # 静态资源
├── dev.ts # 开发入口
└── fresh.config.ts # 配置文件创建第一个页面
在routes目录下创建文件：
// routes/about.tsx
export default function AboutPage() {
return (
<div>
<h1>关于我们</h1>
<p>这是一个使用Fresh框架创建的页面</p>
</div>
);
}访问 http://localhost:8000/about 就能看到这个页面。
创建交互式组件
在islands目录下创建可交互组件：
// islands/Counter.tsx
import { useState } from "preact/hooks";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数: {count}</p>
<button onClick={() => setCount(count + 1)}>
点击增加
</button>
</div>
);
}在页面中使用这个组件：
// routes/home.tsx
import Counter from "../islands/Counter.tsx";
export default function HomePage() {
return (
<div>
<h1>欢迎来到首页</h1>
<Counter />
</div>
);
}数据获取和处理
API路由
创建API端点很简单：
// routes/api/users.ts
import { HandlerContext } from "$fresh/server.ts";
export const handler = {
async GET(_req: Request, _ctx: HandlerContext) {
const users = [
{ id: 1, name: "张三" },
{ id: 2, name: "李四" }
];
return new Response(JSON.stringify(users), {
headers: { "Content-Type": "application/json" }
});
}
};页面数据获取
// routes/users.tsx
import { Handlers, PageProps } from "$fresh/server.ts";
interface User {
id: number;
name: string;
}
export const handler: Handlers<User[]> = {
async GET(_req, ctx) {
const users: User[] = await fetchUsers(); // 模拟数据获取
return ctx.render(users);
}
};
export default function UsersPage({ data }: PageProps<User[]>) {
return (
<div>
<h1>用户列表</h1>
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
async function fetchUsers(): Promise<User[]> {
// 实际项目中这里可能是数据库查询
return [
{ id: 1, name: "张三" },
{ id: 2, name: "李四" }
];
}部署方案
Deno Deploy（官方推荐）
deno deploy # 一键部署到全球边缘节点Cloudflare Pages（支持Vite模式）
将代码推送到GitHub后，Cloudflare Pages会自动识别vite.config.ts文件并进行构建，5分钟左右就能上线。
其他部署方式
Docker部署：
FROM denoland/deno:latest
WORKDIR /app
COPY . .
RUN deno cache main.ts
EXPOSE 8000
CMD ["run", "-A", "main.ts"]性能优势
零客户端JS默认
Fresh默认不向客户端发送任何JavaScript，这意味着：
首屏加载速度极快
更好的seo支持
更少的网络传输量
Islands架构
只在需要交互的组件中加载JS，而不是整个页面。这显著减少了客户端需要处理的JavaScript代码量。
边缘部署
通过Deno Deploy，你的应用可以运行在全球30多个边缘节点上，为用户提供更快的访问速度。
适用场景
适合使用Fresh的情况
内容为主的网站（博客、文档站、企业官网）
需要良好SEO的Web应用
希望快速部署到全球边缘节点的项目
想要极简配置的开发体验
可能不适合的情况
需要大量客户端交互的复杂应用
依赖特定Node.js生态库的项目
团队对Deno生态不熟悉
学习资源
官方文档：https://fresh.deno.dev/
Fresh 2.0介绍：https://deno.com/blog/fresh-and-vite
GitHub仓库：https://github.com/denoland/fresh
示例项目：https://github.com/denoland/fresh/tree/main/examples
总结
Fresh 2.0将Deno的简洁和Vite的速度完美结合：
开发体验像Vite一样流畅
产物体积像Deno一样轻量
部署过程像边缘函数一样简单
现在就可以尝试将build.target设置为"vite"，提前体验下一代全栈框架的强大能力。无论你是想要更快的开发体验，还是更好的性能表现，Fresh都值得一试。
对于还在纠结选择Next.js还是Nuxt的开发者来说，Fresh提供了一个全新的选择。它简化了配置流程，优化了开发体验，让开发者能够更专注于业务逻辑而不是工具配置。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
