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

大家好，深入我是解读三元。今天给大家介绍一个新的新代框架 Fresh，由 Deno 作者出品，全栈在最近发布了 1.0 的框架正式版本，宣布支持了生产环境，深入并且在 Github 上热度也比较高，解读现在是新代时候给大家详细地介绍一下这个方案了。接下来会从框架定位、全栈上手体验、框架优劣势评估和源码实现这几个方面来给大家深入解读 Fresh 框架。深入

框架定位

首先，解读从定位上来看，新代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-project

项目的服务器租用工程化脚本在 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 导出，用来将组件暴露出去，使用比较简单，就不展开介绍了。而路由组件则更加灵活，既可以作为一个 API 服务，也可以作为一个组件进行渲染。接下来，我们以脚手架项目的几个文件示例来分析一下。

首先是 api/joke.ts 文件，这个文件的作用是提供服务端的数据接口，并不承载任何的前端渲染逻辑，你只需要在这个文件里面编写一个 handler 函数即可，云南idc服务商如下代码所示:

// api/joke.ts

import { HandlerContext } from "$fresh/server.ts";

const JOKES = [

// 省略具体内容

];

export const handler = (_req: Request, _ctx: HandlerContext): Response => {

// 随机返回一个 joke 字符串

return new Response(body);

};

当你访问/api/joke 路由时，可以拿到 handler 返回的数据:

接下来是index.tsx和[name].tsx​ 两个文件，第一个文件对应根路由即/，访问效果如下:

后者则为动态路由，可以拿到路由传参进行渲染:

export default function Greet(props: PageProps) {

return

Hello { props.params.name};}

访问效果如下:

同时，你也可以在路由组件同时编写前端组件和 handler 函数，如下代码所示:

// 修改 [name].tsx 的内容如下

/** @jsx h */

import { h } from "preact";

import { HandlerContext, PageProps } from "$fresh/server.ts";

export function handler(req: Request, ctx: HandlerContext) {

const title = "一些标题数据";

return ctx.render({ title });

}

export default function Greet(props: PageProps) {

return

获取数据: { props.data.title};}

从 handler 的第二个参数(ctx 对象)中，我们可以取出 render 方法，传入组件需要的数据，手动调用完成渲染。效果如下:

以上我们就体验了 Fresh 的几个核心的功能，包括项目初始化、路由组件开发、服务端接口开发、组件数据获取​以及约定式路由，相信从中你也能体会到 Fresh 的简单与强大了。

优劣势分析

那么，就如 Fresh 官网所说，Fresh 能否成为下一代 Web 全栈框架呢？

我们不妨来盘点一下 Fresh 的优势和不足。

使用 Fresh 的优势可以总结如下:

享受 Deno 带来的开发优势，从安装依赖、开发、测试、部署直接使用 Deno 的工具链，降低工程化的成本；基于 Island 架构，带来更小的客户端运行时开销，渲染性能更好；无需打包即可开发、部署应用，带来更少的构建成本，更加轻量；

而劣势也比较明显，包含如下的几个方面:

仅支持 Preact 框架，不支持 React，这一点是比较致命的；由于架构的原因，开发阶段没有 HMR 的能力，只能 page reload；对于 Island 组件，必须要放到 islands 目录，对于比较复杂的应用而言，心智负担会比较重，而 Astro 在这一方面要做的更优雅一些，通过组件指令即可指定 island 组件，如<Component client:load />。

一方面 Fresh 能解决的问题，如 Hydration 性能问题，其它的框架也能解决(Astro)，并且比它做的更好，另一方面 Fresh 的部分劣势也比较致命，况且 Deno 如今也很难做到真正地普及，所以我认为 Fresh 并不是一个未来能够大范围流行的 Web 框架，但对于 Deno 和 Preact 的用户而言，我认为 Fresh 足以撼动 Next.js 这类框架原有的地位。

源码实现

Fresh 的内部实现并不算特别复杂，虽然说我们并一定用的上 Fresh，但我觉得 Fresh 的代码还是值得一读的，从中可以学习到不少东西。

Github 地址: https://github.com/denoland/fresh

你可以先去仓库 examples/counter 查看示例项目，通过 deno task start​ 命令启动。入口文件为dev.ts，其中会调用 Fresh 进行路由文件和 islands 文件的搜集，生成 Manifest 信息。

接下来进入核心环节——创建 Server，具体逻辑在server/mod.ts中:

export async function start(

routes: Manifest,

opts: StartOptions = { },

) {

const ctx = await ServerContext.fromManifest(routes, opts);

await serve(ctx.handler(), opts);

}

fromManifest为一个工厂方法，目的是根据之前扫描到的 Manifest 信息生成服务端上下文对象(ServerContext)，因此 Server 的实现核心也就在于 ServerContext:

class ServerContext {

static async fromManifest(

manifest: Manifest,

opts: FreshOptions,

) {

// 省略中间的处理逻辑

return new ServerContext()

}

}

fromManifest 实际上就是进一步处理(normalize) manifest 信息，生成 Route 对象和 Island 对象，以供 ServerContext 的实例初始化。

接下来，Fresh 会调用 ServerContext 的 handler 方法，交给标准库 http/server 的 serve 方法进行调用。因此，handler 方法也是整个服务端的核心实现，其中有两大主要的实现部分:

中间件机制的实现，也就是实现洋葱模型，具体逻辑在私有方法#composeMiddlewares中；页面渲染逻辑的实现，在私有方法#handlers()中。

前者不是本文的重点，感兴趣的同学可以在看完文章后继续研究。这里我们主要关注页面渲染的逻辑是如何实现的，#handlers()​方法中定义了几乎所有路由的处理逻辑，包括路由组件渲染、404 组件渲染、Error 组件渲染、静态资源加载​等等逻辑，我们可以把目光集中在路由组件渲染中，主要是这段逻辑:

for (const [method, handler] of Object.entries(route.handler)) {

routes[`${ method}@${ route.pattern}`] = (req, ctx, params) =>

handler(req, {

...ctx,

params,

render: createRender(req, params),

renderNotFound: createUnknownRender(req, { }),

});

}

而在路由对象normalize​的过程(即fromManifest 方法)中，route.handler 的默认实现为:

let { handler } = (module as RouteModule);

handler ??= { };

if (

component &&

typeof handler === "object" && handler.GET === undefined

) {

// 划重点！

handler.GET = (_req, { render }) => render();

}

const route: Route = {

pattern,

url,

name,

component,

handler,

csp: Boolean(config?.csp ?? false),

};

因此，对于路由组件的处理最后都会进入 render 函数中，我们不妨来看看 render 函数是如何被创建的:

// 简化后的代码

const genRender = (route, status) => {

return async (req, params, error) => {

return async(data) => {

// 执行渲染逻辑

const resp = await internalRender();

const [body] = resp;

return new Response(body);

}

}

}

const createRender = genRender(route, Status.OK);

生成 render 函数这块逻辑个人认为比较抽象，需要静下心来理清各个函数的调用顺序，理解难度并不大。我们还是把关注点放到核心的渲染逻辑上，主要是 internalRender 函数的实现:

import { render as internalRender } from "./render.tsx";

你可以去 render.tsx 进一步阅读，这个文件主要做了如下的事情:

记录项目中声明的所有 Islands 组件。拦截 Preact 中 vnode 的创建逻辑，目的是为了匹配之前记录的 Island 组件，如果能匹配上，则记录 Island 组件的 props 信息，并将组件用 <!--frsh-id值:数字--> 的注释标签来包裹，id 值为 Island 的 id，数字为该 Island 的 props 在全局 props 列表中的位置，方便 hydrate 的时候能够找到对应组件的 props。调用 Preact 的 renderToString 方法将组件渲染为 HTML 字符串。向 HTML 中注入客户端 hydrate 的逻辑。拼接完整的 HTML，返回给前端。

值得注意的是客户端 hydrate 方法的实现，传统的 SSR 一般都是直接对根节点调用 hydrate，而在 Islands 架构中，Fresh 对每个 Island 进行独立渲染，实现如下:

hydrate 方法名也可以叫 revive

export function revive(islands: Record, props: any[]) {

function walk(node: Node | null) {

// 1. 获取注释节点信息，解析出 Island 的 id

const tag = node!.nodeType === 8 &&

((node as Comment).data.match(/^\s*frsh-(.*)\s*$/) || [])[1];

let endNode: Node | null = null;

if (tag) {

const startNode = node!;

const children = [];

const parent = node!.parentNode;

// 拿到当前 Island 节点的所有子节点

while ((node = node!.nextSibling) && node.nodeType !== 8) {

children.push(node);

}

startNode.parentNode!.removeChild(startNode); // remove start tag node

const [id, n] = tag.split(":");

// 2. 单独渲染 Island 组件

render(

h(islands[id], props[Number(n)]),

htmlElement

);

endNode = node;

}

// 3. 继续遍历 DOM 树，直到找到所有的 Island 节点

const sib = node!.nextSibling;

const fc = node!.firstChild;

if (endNode) {

endNode.parentNode?.removeChild(endNode); // remove end tag node

}

if (sib) walk(sib);

if (fc) walk(fc);

}

walk(document.body);

}

至此，服务端和客户端渲染的过程都完成了，回头看整个过程，为什么说 Fresh 的构建过程是 Bundle-less 的呢？

我们不妨关注一下 Islands 组件是如何加载到客户端的。

首先，服务端通过拦截 vnode 实现可以感知到项目中用到了哪些 Island 组件，比如 Counter 组件，那么服务端就会注入对应的 import 代码，并挂在到全局，通过 <script type="module"> 的方式注入到 HTML 中。

浏览器执行这些代码时，会给服务端发起/islands/Counter的请求，服务端接收到请求，对 Counter 组件进行实时编译打包，然后将结果返回给浏览器，这样浏览器就能拿到 Esbuild 的编译产物并执行了。

所以这个过程是完全发生在运行时的，也就是说，我们不需要在一开始启动项目的时候就打包完所有的组件，而是在运行时做到按需构建，并且得益于 Esbuild 极快的构建速度，一般能达到毫秒级别的构建速度，对于服务来说运行时的压力并不大。

小结

以上就是本文的全部内容，分别从框架定位、上手体验、优劣势评估和源码实现来介绍了如今比较火的 Fresh 框架。

最后需要跟大家说明的是，Fresh 中关于 Islands 架构的实现是基于 Preact 的，我本人也借鉴了 Fresh 的思路，通过拦截 React.createElement 方法在 React 当中也实现了 Islands 架构，代码放在了 react-islands仓库中(地址: https://github.com/sanyuan0704/react-islands)，代码不多，相当于 Fresh 的简化版，感兴趣的小伙伴可以拉下来看看~