下一代全栈框架: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
相关推荐
snows_l3 小时前
MacOS 通过Homebrew 安装nvm
前端·macos
CUGGZ3 小时前
前端部署,又有新花样?
前端·javascript
Zz_waiting.3 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者3 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者3 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
Java中文社群4 小时前
面试官:如何实现动态线程池的任务编排?
java·后端·面试
脚踏实地的大梦想家4 小时前
【Go】P2 Golang 常量与变量
开发语言·后端·golang
BillKu4 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391934 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js