深入解读新一代全栈框架 Fresh

最新推荐文章于 2024-05-10 10:03:32 发布

炫酷盖茨猫先生

最新推荐文章于 2024-05-10 10:03:32 发布

阅读量1.1k

点赞数

分类专栏：后端文章标签：前端 javascript 前端框架 java dubbo

本文链接：https://blog.csdn.net/m0_73088370/article/details/126525267

版权

Fresh是一个基于Deno的全栈Web框架，强调其Bundle-less特性、Islands SSR架构和对Preact的支持。文章详细介绍了Fresh的框架定位、上手体验，包括自动路由、Deno工具链的优势，以及优劣势分析。尽管Fresh在某些方面仍存在不足，如仅支持Preact和缺乏HMR，但其创新特点使其在特定用户群体中颇具吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

框架定位

首先，从定位上来看，Fresh 属于 Web 全栈开发框架。是不是对于这个词非常眼熟呢？相信你已经想到了，像现在大名鼎鼎的 Next.js 以及新出的 Remix 都是走的这个路线。那么作为 Next.js 和 Remix 的竞品， Fresh 有哪些值得一提的亮点，或者说有哪些差异点呢？主要包括如下的几个方面:

首先，Fresh 基于 Deno 运行时，由 Deno 原班人马开发，享有 Deno 一系列工具链和生态的优势，比如内置的测试工具、支持 http import 等等。

其次是渲染性能方面，Fresh 整体采用 Islands SSR 架构(之前介绍的 Astro 也是类似)，实现了客户端按需 Hydration，有一定的渲染性能优势。

当然，还有一个比较出色的点是构建层做到了 Bundle-less，即应用代码不需要打包即可直接部署上线，后文会介绍这部分的具体实现。

最后，不同于 Next.js 和 Remix，Fresh 的前端渲染层由 Preact 完成，包括 Islands 架构的实现也是基于 Preact，且不支持其它前端框架。

上手体验

在使用 Fresh 之前，需要在机器上先安装 Deno:

如何没有安装的话可以先去 Deno 官方安装一下: https://deno.land/。

接下来可以输入如下的命令初始化项目:


deno run -A -r https://fresh.deno.dev my-projec

项目的工程化脚本在 deno.json 文件中:

{
  "tasks": {
    // -A 表示允许 Deno 读取环境变量
    "start": "deno run -A --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json"
}

接下来你可以执行deno task start 命令启动项目:

终端里面显示 Fresh 从文件目录中扫描出了 3 个路由和 1 个 island 组件，我们可以来观察一下项目的目录结构:

.
├── README.md
├── components
│   └── Button.tsx
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── import_map.json
├── islands
│   └── Counter.tsx
├── main.ts
├── routes
│   ├── [name].tsx
│   ├── api
│   │   └── joke.ts
│   └── index.tsx
├── static
│   ├── favicon.ico
│   └── logo.svg
└── utils
    └── twind.ts

你可以关注 routes 和 islands 两个目录，[name].tsx、api/joke.ts 和 index.tsx 分别对应三个路由，而 islands 目录下的每个文件则对应一个 island 组件。

而开发者并不需要手写路由文件，Fresh 可以自动地生成服务端的路由到文件的映射关系。很明显 Fresh 实现了约定式路由的功能，跟 Next.js 类似。

每个 island 组件需要有一个 default 导出，用来将组件暴露出去，使用比较简单，就不展开介绍了。而