Fresh 1.0 稳定版发布,Deno 全栈 Web 框架

来源: OSCHINA
编辑:
2022-06-30 07:09:00

Fresh 是 Deno 的全新全栈 Web 框架。默认情况下,使用 Fresh 构建的网页不会向客户端发送 JavaScript。该框架没有构建步骤,可以将部署时间缩短一个数量级。近日,Fresh 发布了第一个稳定版本。

Fresh 使用了一种不同的模型:默认情况下,开发者会将 0 KB 的 JS 发送给客户端。因为大多数渲染在服务器上完成,客户端只负责重新渲染交互性的小模块。这是一个开发者明确选择客户端渲染特定组件的模型。早在 2020 年,Jason Miller 在他的 Islands Architecture 博客文章中就描述了这个模型。

Fresh 核心是路由框架和模板引擎的组合,支持在服务器上按需渲染页面。除了在服务器中提供的即时 (JIT) 渲染之外,Fresh 还提供了一个接口,用于在客户端上无缝渲染某些组件,以实现最大的交互性。该框架使用 Preact 和 JSX(或 TSX)在服务器和客户端上进行渲染和模板化。客户端渲染在每个组件级别上是完全可选的,因此许多应用程序根本不会向客户端发送任何 JavaScript。

由于 Fresh 没有构建步骤,因此开发者编写的代码直接就是在服务器和客户端上运行的代码。将 TypeScript 或 JSX 转换为纯 JavaScript 的任何必要转换都是在需要时即时完成的。这允许通过即时部署实现非常快速的迭代循环。

Fresh 不仅仅是一个前端框架,而是一个用于编写网站的完全集成系统。开发者可以任意处理任何类型的请求、返回自定义响应、发出数据库请求等等。此路由返回纯文本 HTTP 响应而不是 HTML 页面,例如:

// routes/api/joke.ts

const JOKES = [/** jokes here */];

export const handler = (_req: Request): Response => {
  const randomIndex = Math.floor(Math.random() * JOKES.length);
  const body = JOKES[randomIndex];
  return new Response(body);
};

这也可以用于为路由进行异步数据获取。下面是从磁盘上的文件加载博客文章的路由:

// routes/blog/[id].tsx

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

export const handler = async (_req: Request, ctx: HandlerContext): Response => {
  const body = await Deno.readTextFile(`./posts/${ctx.params.id}.md`);
  return ctx.render({ body });
};

export default function BlogPostPage(props: PageProps) {
  const { body } = props.data;
  // ...
}

因为 Fresh 非常依赖动态服务器端渲染,所以速度必须快。Fresh 非常适合在 Deno Deploy、Netlify Edge Functions 或 Supabase Edge Functions 等边缘 runtime 场景运行。由于渲染过程在物理上非常靠近用户,从而可以最大限度地减少网络延迟。

Fresh 亮点特性

  • 无构建步骤
  • 零配置
  • 边缘 JIT 渲染
  • 轻量且快速(框架不需要客户端 JS)
  • 单个组件支持可选的客户端 Hydration
  • 由于采用渐进式增强和使用原生浏览器功能而具有很强的适应性
  • 开箱即用的 TypeScript
  • 文件系统路由采用 Next.js

Fresh 1.0 是一个稳定版本,支持在生产环境使用。通过 Deno,Fresh 项目可以手动部署到任何平台,但部署到像 Deno Deploy 这样的边缘运行时可获得最佳体验。

展开阅读全文
精彩评论
卷起来🐒
2022-06-30 11:45
1
举报
里程碑版本
2022-06-30 09:07
1
举报
3 收藏
分享
3 评论
3 收藏
分享
返回顶部
顶部