下一代全栈框架:Deno + Vite 的结合体!

写给还在纠结用 Next 还是 Nuxt 的你

如果你已经厌倦了:

  • 每次 npm install 都要等半天
  • 打包体积动不动就几百 KB 起步
  • 想部署到边缘节点还得研究 VercelNetlify 各种配置

那可以花三分钟了解一下 Fresh

它是 Deno 官方做的全栈框架 ,口号简单粗暴:"不写一行配置,也能跑得快。"

只需要一条命令,就能拥有 React 的开发体验、Next.js 的 SSR 能力,以及 Vite 的秒级热更新------这就是 Fresh 2 带来的全新范式。

Fresh 是什么?

FreshDeno 官方团队 打造的全栈 Web 框架,主打 零配置、零客户端 JS 默认、边缘部署

  • 运行时 :直接跑在 Deno(而非 Node.js)上,天然支持 TypeScript。
  • 渲染 :基于 Preact ,首屏纯 HTML,零 JS;交互区域采用 Islands 架构 按需 Hydrate,体积最小化。
  • 部署 :官方推荐 Deno Deploy,一键推送到全球 30+ 边缘节点;也可自建 Docker。

Fresh 2 Beta:从「尝鲜版」到「准正式版」

2024 年 9 月,Fresh 宣布 2.0 进入 Beta(RC)阶段

  • API 已冻结,向后兼容得到保证;
  • 稳定性 接近正式版,鼓励生产试用;
  • 里程碑 :内置 Vite 插件模式,把开发体验再提一档。

Vite 模式:三大升级,一键开启

只需在 fresh.config.ts 里加一行:

ts 复制代码
export default {
  build: { target: "vite" },   // 打开 Vite 模式
};
升级点 体验变化
HMR 热更新 保存即刷新,毫秒级反馈,告别整页重载。
极速冷启动 Dev Server 从秒级降到毫秒级,低端机也能秒开。
插件生态 直接复用 Vite 全量插件:UnoCSS、mdx、svg、PWA......随装随用。

30 秒上手体验

bash 复制代码
# 1. 创建项目
deno run -A -r https://fresh.deno.dev my-app

# 2. 进入目录
cd my-app

# 3. 启动开发服务器
deno task start          # 默认 Deno 原生模式
# 或
deno task start:vite     # 进入 Vite 模式(HMR & 极速冷启)

浏览器打开 http://localhost:8000 即可看到首页。

部署:Deno Deploy vs Cloudflare Pages

  • Deno Deploy(官方推荐)
bash 复制代码
  deno deploy       # 一键推送,全球边缘节点
  • Cloudflare Pages / Workers (Vite 模式专享)
    推送到 GitHub 后,Pages 自动识别 vite.config.ts 并构建,5 分钟上线。

写在最后

Fresh 2Deno 的简洁Vite 的极速 合二为一:

  • 开发Vite 一样爽快;
  • 产物Deno 一样轻量;
  • 部署边缘函数一样无服务器。

现在就把 build.target 设为 "vite",提前体验 "下一代全栈框架" 的终极形态!

  • Fresh 官网https://fresh.deno.dev/
  • Fresh 2.0https://deno.com/blog/fresh-and-vite
  • Github 地址https://github.com/denoland/fresh
相关推荐
郑州光合科技余经理42 分钟前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒1 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche15002 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情6732 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
SoonITer2 小时前
怎样构建一个 Agent-friendly 的网站
前端·agent
颜进强2 小时前
01 · NestJS 是什么:用途、解决什么问题、与热门框架对比
前端·后端·ai编程
wendZzoo2 小时前
前端工程师的 3D 第一课:一个模型如何进入网页
前端
isfox2 小时前
MapReduce Shuffle 深度解析:数据从 Map 到 Reduce 的完整旅程
后端
颜进强2 小时前
04 · NestJS 依赖注入:你在 `@Module` 写的 providers,和构造参数里那个类型,是怎么"对上"的?
前端·后端·ai编程
谁在黄金彼岸2 小时前
Ollama-使用速查
后端