Fresh框架：下一代全栈开发新选择

如果你已经对这些问题感到厌倦：

每次安装依赖都要等待很长时间
打包后的文件体积动不动就几百KB
想要部署到边缘节点还要研究各种平台的配置

那么可以花几分钟了解一下Fresh这个新框架。

什么是Fresh？

Fresh是Deno官方团队开发的全栈Web框架。它的特点是无需配置、默认不包含客户端JS、支持边缘部署。

核心技术特点：

运行环境：直接运行在Deno上，不是Node.js，天然支持TypeScript
渲染方式：基于Preact，首屏是纯html，零JS；交互区域使用Islands架构按需激活
部署方案：官方推荐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提供了一个全新的选择。它简化了配置流程，优化了开发体验，让开发者能够更专注于业务逻辑而不是工具配置。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12973