下一代全栈框架: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
相关推荐
GISer_Jing2 分钟前
两种AI交互方式深度解析——浏览器书签&插件
前端·人工智能·ai·prompt
哈__8 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-device-info
javascript·react native·react.js
SuniaWang11 分钟前
《Spring AI + 大模型全栈实战》学习手册系列· 专题二:《Milvus 向量数据库:从零开始搭建 RAG 系统的核心组件》
java·人工智能·分布式·后端·spring·架构·typescript
前端布鲁伊12 分钟前
零代码上线一个图片处理网站,我是如何使唤AI干活的?
前端·ai编程
庄小焱12 分钟前
React——React基础语法(2)
前端·javascript·react.js
张小洛14 分钟前
Spring 常用类深度剖析(工具篇 02):ReflectionUtils——优雅操作反射的利器
java·后端·spring·工具类·spring常用类
终端鹿15 分钟前
Vue3 核心 API 深度解析:ref / reactive / computed / watch
前端·javascript·vue.js
console.log('npc')22 分钟前
partial在react接口定义中是什么意思
前端·javascript·typescript
SuperEugene23 分钟前
前端 utils 工具函数规范:拆分 / 命名 / 复用全指南,避开全局污染等高频坑|编码语法规范篇
开发语言·前端·javascript
C澒26 分钟前
微前端容器标准化 —— 公共能力篇:通用请求
前端·架构