快速了解 Deno Fresh：下一代 Web 框架

萌萌哒草头将军

发布于 2025-07-31 15:50:59

3510

文章被收录于专栏：前端框架前端框架

前言

大家好，今天给大家介绍一个我刚刚发现的热门库：Fresh ！

github star 历史

正文

什么是 Fresh？

Fresh 是一个基于 Deno 运行时和 Preact 的全栈 Web 框架，旨在为开发者提供简单、高效且安全的 Web 开发体验。

它采用岛屿架构，通过服务器端渲染（SSR）生成页面，并在需要时选择性地激活客户端交互组件，减少客户端的 JavaScript 开销！

上手 Fresh

Fresh 的上手过程非常简单，开发者只需几个步骤即可创建并运行一个 Fresh 项目：

安装 Deno：确保已安装最新版本的 Deno CLI。可以使用下面的命令下载并安装。

# Mac/Linux
curl -fsSL https://deno.land/install.sh | sh

# win
irm https://deno.land/install.ps1 | iex

下载 Deno

创建新项目：运行以下命令初始化一个 Fresh 项目：

deno run -A -r https://fresh.deno.dev
# 记得重载命令，否则不生效
source ~/.zshrc

创建项目

这将创建一个新项目目录（如 fresh-demo），并包含基本的项目结构。

目录结构

仔细看没有 package.json文件，可以看到 deno.json 文件，文件里规定了引入包地址

deno.json

启动开发服务器：进入项目目录，运行：

cd fresh-demo
deno task start

然后在浏览器中访问 http://localhost:8000 查看应用了！

demo

❝这里没有下载依赖的步骤是因为 deno task start 会从远程自动下载对应的包，并放到 node_modules 下！

部署到 Deno Deploy：

将项目推送到 GitHub 仓库。
在 Deno Deploy 创建一个新项目。
链接到仓库中的 main.ts 文件。
项目将自动部署到 fresh-demo.deno.dev 子域名。

❝子域名名称需要唯一，部署子域名是可以在项目里修改的

Fresh 的核心概念

Fresh 的设计围绕几个核心概念，这些概念共同构成了其高效的开发体验：

Island Architecture（岛屿架构）：

Fresh 的 Island Architecture 允许开发者创建客户端交互组件（称为“岛屿”），这些组件在需要时才在客户端激活，而页面其他部分保持静态。

你只需在 islands/ 目录下新建组件即可！

（components/ 目录下默认都是服务端渲染组件）

以下是一个简单的计数器 Island 示例：

// /islands/Counter.tsx
import { Island } from"$fresh/runtime.ts";
import { useState } from"preact/hooks";

exportdefaultfunction Counter() {
const [count, setCount] = useState(0);
return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
    </div>
  );
}

Preact：

Fresh 使用 Preact 作为 JSX 渲染引擎。Preact 是 React 的轻量级替代品，提供相似的 API，但体积更小、性能更高。

Deno Deploy

Fresh 专为边缘运行时（如 Deno Deploy）优化，提供低延迟和高性能的部署体验。边缘渲染确保用户无论身处何地都能获得快速响应。

文件系统路由

Fresh 的路由基于文件系统，开发者只需在 routes 目录下创建文件即可定义路由，简化了开发流程。

例如新增 routes/welcome.tsx 对应根路由 /welcome。以下是一个简单的页面示例：

import { Handlers } from "$fresh/server.ts";

export default function Welcome() {
  return (
    <div>
      <h1>欢迎体验 Fresh！</h1>
      <p>这是一个服务器端渲染的页面。</p>
    </div>
  );
}

效果：

/welcome 页面

你也可以在页面中提供自定义 handler 函数自定义服务端行为！

例如下面的例子：

import { Handlers } from"$fresh/server.ts";

exportconst handler: Handlers = {
async GET(_req, ctx) {
    // 请求数据
    // const data = await getData();
    // 页面组件会通过 props 参数接收到这个数据
    return ctx.render({ user: Math.random() }); 
  },
};

exportdefaultfunction Welcome() {
return (
    <div>
      <h1>欢迎体验 Fresh！</h1>
      <p>这是一个服务器端渲染的页面。</p>
    </div>
  );
}

效果：