跳到主要内容
Deno 2.4 发布,带来 deno bundle、字节/文本导入、OTel 稳定版等更多功能
了解更多
TODO

Deno 上的 Web 框架现状

最近,我们宣布了 Deno Deploy 对 npm: 标识符的支持。这使得 Deploy 成为第一个 基于隔离区构建 的边缘 JavaScript 运行时,支持 npm 上的 200 多万个模块。虽然 Deno 并非有意设计为 Node.js 的直接替代品,但我们 正在进行的工作 旨在提供与为 Node 设计的模块的向后兼容性,这开启了使用 Deno 构建 Web 应用程序的新方式。

但这并非我们空口无凭——今天在 Deno Deploy 上,您可以使用我们的预制模板,从 SvelteKitDocusaurus 等框架都可以使用。

new project flow on Deploy

为了帮助您入门,我们准备了一份 Deno 中 Web 框架现状的快速概览。以下是我们将涵盖的内容——点击框架名称可直接跳转到该部分,并探索您接下来可以在 Deno 中构建什么。

🦕 Deno 原生    ⬢ Node.js 原生

静态站点

  • 🦕 原生 JS 或 SPA 原生 JavaScript 应用程序或设计为纯客户端运行的单页应用(SPA)框架(如 React、Angular、Vue.js 等)可与 Deno 驱动的 API 服务器一起使用。
  • 🦕 Lume 一个 Deno 原生的静态站点生成器。
  • Docusaurus 面向文档网站的 SSG。
  • Gatsby 可扩展的 SSG,是 “Jamstack” 的先驱。
  • Next.js (静态导出) React Web 框架,在 Deploy 上以 SSG 模式运行。

动态 Web 应用

  • 🦕 Fresh 一个 Deno 原生的 Web 应用框架,支持服务器渲染和交互式客户端 Islands 架构。
  • 🦕 Hono 一个轻量级动态 Web 框架,继承了 ExpressSinatra 的传统。
  • 🦕 Oak 一个受 Koa 启发的 Deno 原生中间件框架。
  • Astro 一个用于内容型网站的混合 SSR 和 SSG 框架。
  • SvelteKit 一个由 Svelte 驱动的 SSR 和 SSG Web 框架。
  • Nuxt 一个由 Vue.js 驱动的 SSR 和 SSG Web 框架。
  • Remix 带有服务器渲染和客户端 Hydration 的动态 Web 应用。
  • Qwik 一个围绕 可恢复性 构建的 SSR 和 SSG Web 框架。

Deno 上的静态站点

一段时间以来,纯 静态站点已可在 Deno Deploy 上托管。您可以使用像 Hono 这样的应用服务器,或者 Deno 标准库中的 静态文件服务器,非常方便地从 Deploy 提供静态文件。

以下是目前 Deno 支持的一些流行的静态站点开发选项。

原生 JS 或单页应用 (SPA) 框架

如果您的应用程序不需要使用框架(可能不需要),您可以使用基于 Deno 的 静态文件服务器 或像 Hono 这样的应用服务器来提供未经处理的 HTML、CSS 和 JavaScript,并根据需要集成后端 API 路由。

对于为长时间使用会话和复杂前端交互设计的 Web 应用程序,单页应用 (SPA) 架构可能是正确的选择。您可以通过 Deno 提供静态资源,但会开发更多使用前端框架(如 ReactAngularVue.js)的客户端代码。

根据您选择的框架,在您的代码可以在浏览器中运行之前,可能需要编译或预处理步骤。其中一些构建过程可以在 Deno 中运行,但有些可能仍然需要使用 Node.js。

以下是您今天可以使用 Deno 和 Deno Deploy 尝试的几个 SPA 开发模板:

Lume

Lume 是一个专为 Deno 设计的静态站点生成器。它允许您使用 Markdown、JSX 或您认为合适的任何格式编写网页,并根据需要生成静态 HTML、CSS 和 JavaScript。因为它专为 Deno 编写,所以构建速度特别快,并且需要安装的依赖项最少。它支持多种内容类型,并且可以 扩展 以支持其他类型。

Docusaurus

Docusaurus 是一个专为技术文档优化的静态站点生成器。由于其支持版本控制、国际化以及许多文档站点所需的内容特性,它已被许多开源和商业项目采用。事实上,Deno 最近已将 我们自己的许多文档 迁移到 由 Hono 和 Docusaurus 提供支持的站点

为了获得最佳开发体验,我们建议您今天将 Docusaurus 与 Node.js 和兼容 npm 的包管理器一起使用。您可以使用 npm 脚本构建您的站点,然后通过 Deno 静态文件服务器应用服务器 部署和提供服务。

这种配置允许您利用 Docusaurus 周围的工具和生态系统,同时仍能享受到使用 Deno 处理文档站点可能需要的任何动态代码的好处。

Gatsby

Gatsby 是一个静态站点生成器,也是“Jamstack”架构的早期先驱,该架构倾向于在构建时从获取的数据生成静态站点。这个基于 React 的静态站点生成器仍然是构建基于无头 CMS 数据或跨多个不同数据源的静态站点的绝佳选择。您可以通过 Deno 静态文件服务器应用服务器 提供从 Gatsby 构建过程导出的静态资源。

Next.js

Next.js 是一个基于 React 的 Web 框架,它结合了静态站点生成和动态渲染来提供网站服务。截至本文撰写之时,许多 Next.js 动态渲染功能尚未在 Deno 或 Deno Deploy 上得到支持。

但是,如果您使用 Next.js 生成 静态站点,该使用模式与 Deno 和 Deno Deploy 完美兼容。您可以通过 Deno 静态文件服务器应用服务器 提供从 Next.js 构建过程导出的静态资源。

动态 Web 应用框架

当您开始构建动态 Web 应用程序时,Deno Deploy 真正大放异彩。我们全球网络上极短的冷启动时间和低延迟使 Deploy 成为构建任何类型数据驱动型 Web 应用程序的绝佳选择。

以下是目前在 Deno Deploy 上运行的一些动态 Web 框架。

Fresh

Fresh 是一个专为 Deno 设计的 Web 框架,具有边缘动态渲染、客户端交互式 Islands 架构,并且默认情况下无需构建步骤即可实现超快速部署。其功能集类似于 Next.js、SvelteKit 或 Nuxt 等框架,我们建议您在 Deno 上尝试任何全新项目时考虑使用它。

如果您正在构建 SaaS 应用程序,您可能还会想了解 SaaSKit,这是一个 Fresh 应用程序,它已经实现了身份验证、支付以及您新 SaaS 项目所需的许多其他功能。

Hono

Hono 是一个轻量级 Web 应用框架,继承了 ExpressSinatra 的传统。只需几行代码,您就可以设置一个 API 服务器或动态网页服务器。Hono 提供 Deno 原生安装路径,并与 Deno 的内置 TypeScript 工具配合得很好。

Oak

Oak 是一个受 Koa 启发的 Deno 原生中间件框架。它提供了一种强大而灵活的方式在 Deno 中编写 API 服务器,并且在 Deno Deploy 上运行良好。

Astro

Astro 是一个专为内容型网站设计的 Web 框架。它能够在多种运行时环境中进行服务器端渲染,包括 Deno Deploy。除了 Astro 组件和页面,您还可以使用您喜欢的 客户端框架 在前端构建交互式 Islands。

Astro 在生产环境中通过 适配器 在多种不同环境(包括 Deno Deploy)中运行。在本地开发期间,我们建议使用 npm 管理依赖项并运行管理脚本,因为 Astro 就是围绕这些工作流设计的。但是,您仍然可以在 Deno 运行时上运行代码,这将使您能够使用零配置 TypeScript 和内置 API,例如 Deno KV

如果您想将 Astro 和 Deno 一起使用,我们强烈建议您 从此模板开始,该模板预配置了 Deno SSR 适配器和本地开发脚本。

SvelteKit

SvelteKit 是一个全栈 Web 框架,支持由 Svelte 驱动的服务器渲染和客户端交互的混合模式。SvelteKit 应用程序在生产环境中运行前需要一个构建步骤,并且可以使用 此适配器 在多种 JavaScript 环境中(包括 Deno Deploy)工作。

与其他围绕 npm 设计的框架一样,我们建议使用 npm 进行本地开发和依赖管理。但是,您可以使用 Deno 运行 Svelte 开发服务器,从而利用 Deno 运行时特性。

Nuxt

Nuxt 是一个支持客户端和服务器渲染的 Web 框架,围绕 Vue.js 构建。Nuxt 应用程序使用 Nitro 应用服务器部署,并使用 Deno 预设

与此列表中的其他以 Node 为中心的框架一样,我们建议使用 npm 来管理依赖项和运行本地开发脚本。但是,使用 Nitro 的 Deno 预设 意味着您的 Nuxt 在 Deno Deploy 上运行良好。

Remix

Remix 是一个基于 React 构建的全栈 Web 应用框架。它可以在多种 JavaScript 环境中运行,包括 Deno 和 Deno Deploy。

您的 Remix 项目可以通过使用 deno 服务器构建目标 配置为输出生产构建。生成的项目随后可以在 Deno Deploy 上运行。

Qwik

Qwik 是一个用于创建 “可恢复” 动态 Web 应用的新框架。它延迟了浏览器中的 JavaScript 执行,以保持应用程序的快速。

Qwik 通过一个 中间件组件 支持 Deno Deploy,该组件利用了 Deno.serve 使用的 Web 标准 RequestResponse 对象。

立即在 Deno Deploy 上尝试新框架!

准备好停止阅读并开始动手了吗?查看我们最近改版的 新项目体验,并在即用型模板中尝试这些框架之一。

一如既往,我们很想知道您正在构建什么!请在 Twitter(前称 X)我们的 DiscordYouTube 上与我们联系。我们很高兴能听到您今天正在使用哪些框架。