首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >快速了解 Deno Fresh:下一代 Web 框架

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

作者头像
萌萌哒草头将军
发布2025-07-31 15:50:59
发布2025-07-31 15:50:59
23100
代码可运行
举报
文章被收录于专栏:前端框架前端框架
运行总次数:0
代码可运行

前言

大家好,今天给大家介绍一个我刚刚发现的热门库:Fresh

github star 历史
github star 历史

github star 历史

正文

什么是 Fresh?

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

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

上手 Fresh

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

  1. 安装 Deno:确保已安装最新版本的 Deno CLI。可以使用下面的命令下载并安装。
代码语言:javascript
代码运行次数:0
运行
复制
# Mac/Linux
curl -fsSL https://deno.land/install.sh | sh

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

下载 Deno

  1. 创建新项目:运行以下命令初始化一个 Fresh 项目:
代码语言:javascript
代码运行次数:0
运行
复制
deno run -A -r https://fresh.deno.dev
# 记得重载命令,否则不生效
source ~/.zshrc
创建项目
创建项目

创建项目

这将创建一个新项目目录(如 fresh-demo),并包含基本的项目结构。

目录结构
目录结构

目录结构

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

deno.json
deno.json

deno.json

  1. 启动开发服务器:进入项目目录,运行:
代码语言:javascript
代码运行次数:0
运行
复制
cd fresh-demo
deno task start

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

demo
demo

demo

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

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

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

Fresh 的核心概念

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

  • Island Architecture(岛屿架构)

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
// /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 渲染引擎。PreactReact 的轻量级替代品,提供相似的 API,但体积更小、性能更高。

  • Deno Deploy

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

  • 文件系统路由

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

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

代码语言:javascript
代码运行次数:0
运行
复制
import { Handlers } from "$fresh/server.ts";

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

效果:

/welcome 页面
/welcome 页面

/welcome 页面

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

例如下面的例子:

代码语言:javascript
代码运行次数:0
运行
复制
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>
  );
}

效果:

自定义 handler
自定义 handler

自定义 handler

最后

Deno Fresh 以其简洁、高效和现代化的设计,为开发者提供了一种全新的 Web 开发方式, 希望这篇文章可以帮助大家学习 Fresh!

今天的分享就到这里,感谢大家的阅读!如果文章中有任何错误或需要改进的地方,欢迎指正!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-07-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌萌哒草头将军 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • 什么是 Fresh?
    • 上手 Fresh
    • Fresh 的核心概念
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档