下一代全栈框架: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
相关推荐
会飞的战斗鸡5 分钟前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling38 分钟前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐41 分钟前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_177767371 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767371 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区1 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
橘子师兄1 小时前
C++AI大模型接入SDK—ChatSDK封装
开发语言·c++·人工智能·后端
RFCEO1 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
@ chen1 小时前
Spring事务 核心知识
java·后端·spring
烬头88212 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos