Deno 上的 Web 框架现状
最近,我们宣布了Deno Deploy 上对 npm:
规范的支持。这使得 Deploy 成为第一个支持 npm 上超过 200 万个模块的基于隔离的边缘 JavaScript 运行时。虽然 Deno 并非有意设计为 Node.js 的直接替代品,但我们正在进行的工作提供了与为 Node 设计的模块的向后兼容性,从而开辟了使用 Deno 构建 Web 应用程序的新方法。
但不要只听我们说——今天在 Deno Deploy 上,您可以使用我们现成的模板,使用从SvelteKit 到Docusaurus 的框架。
为了帮助您入门,我们准备了一份关于 Deno 中 Web 框架现状的快速指南。以下是我们将介绍的内容概述——单击框架名称即可直接跳转到该部分,探索您接下来可以在 Deno 中构建的内容。
静态站点
- 🦕 纯粹的 JS 或 SPA 纯粹的 JavaScript 应用程序或单页应用程序 (SPA) 框架,旨在纯粹在客户端运行(React、Angular、Vue.js 等),可以与 Deno 支持的 API 服务器一起使用。
- 🦕 Lume 一个 Deno 原生的静态站点生成器。
- ⬢ Docusaurus 用于文档网站的 SSG。
- ⬢ Gatsby 可扩展的 SSG,“Jamstack” 先驱。
- ⬢ Next.js(静态导出) React Web 框架,在 SSG 模式下可在 Deploy 上运行。
动态 Web 应用程序
- 🦕 Fresh 一个 Deno 原生的 Web 应用程序框架,具有服务器渲染和交互式客户端端岛。
- 🦕 Hono 一个轻量级动态 Web 框架,遵循Express 和Sinatra 的传统。
- 🦕 Oak 一个 Deno 原生的中间件框架,灵感来自Koa。
- ⬢ Astro 一个混合 SSR 和 SSG 框架,用于内容导向的网站。
- ⬢ SvelteKit 一个由Svelte 支持的 SSR 和 SSG Web 框架。
- ⬢ Nuxt 一个由Vue.js 支持的 SSR 和 SSG Web 框架。
- ⬢ Remix 具有服务器渲染和客户端水合的动态 Web 应用程序。
- ⬢ Qwik 一个基于 可恢复性 的 SSR 和 SSG Web 框架。
Deno 上的静态站点
有一段时间,在 Deno Deploy 上托管纯粹的静态站点 是可能的。使用Hono 等应用程序服务器或 Deno 标准库中的静态文件服务器,您可以从 Deploy 中愉快地提供静态文件。
以下是目前在 Deno 上支持的一些流行的静态站点开发选项。
纯净的 JS 或单页应用程序 (SPA) 框架
如果您的应用程序不需要使用框架(可能不需要),您可以使用基于 Deno 的静态文件服务器 或Hono 等应用程序服务器来提供未经处理的 HTML、CSS 和 JavaScript,并根据需要合并后端 API 路由。
对于设计用于长时间使用会话和复杂前端交互的 Web 应用程序,单页应用程序 (SPA) 架构可能是正确的选择。您将通过 Deno 提供静态资产,但您将开发更多客户端代码,这些代码使用React、Angular 或Vue.js 等前端框架。
根据您的框架选择,在您的代码可以在浏览器中运行之前,可能需要进行编译或预处理步骤。其中一些构建过程可以在 Deno 中运行,但有些可能仍然需要使用 Node.js。
以下是您可以使用 Deno 和 Deno Deploy 尝试的几个 SPA 开发模板
Lume
Lume 是一个专为 Deno 设计的静态站点生成器。它允许您以降价、JSX 或您认为合适的任何格式创作网页,并根据需要生成静态 HTML、CSS 和 JavaScript。由于它专为 Deno 而编写,因此构建速度非常快,并且依赖项最少。它支持各种内容类型,并且可以扩展以与其他内容类型配合使用。
Docusaurus
Docusaurus 是一个针对技术文档优化的静态站点生成器。由于它支持许多文档站点所需的版本控制、国际化和内容功能,因此已被许多开源和商业项目采用。事实上,Deno 最近将我们自己的文档 的大部分内容迁移到了由 Hono 和 Docusaurus 提供支持的网站。
为了获得最佳的开发体验,我们建议您今天将 Docusaurus 与 Node.js 和 npm 兼容的包管理器一起使用。您可以使用 npm
脚本构建您的站点,但随后可以通过 Deno静态文件服务器 或应用程序服务器 部署和提供服务。
此配置使您可以利用围绕 Docusaurus 的工具和生态系统,但仍然可以从使用 Deno 为您的文档站点可能需要的任何动态代码中获得好处。
Gatsby
Gatsby 是一个静态站点生成器,“Jamstack” 架构的早期先驱,“Jamstack” 架构支持从构建时获取的数据生成静态站点。这个基于 React 的静态站点生成器仍然是构建静态站点的绝佳选择,这些静态站点位于无头 CMS 或跨多个不同数据源的数据之上。您可以通过 Deno静态文件服务器 或应用程序服务器 提供从 Gatsby 构建过程导出的静态资产。
Next.js
Next.js 是一个基于 React 的 Web 框架,它使用静态站点生成和动态渲染的混合来提供网站。截至撰写本文时,Deno 或 Deno Deploy 尚未支持许多 Next.js 动态渲染功能。
但是,如果您使用 Next.js 生成静态网站,这种使用模式与 Deno 和 Deno Deploy 完美匹配。您可以通过 Deno 的静态文件服务器或应用程序服务器提供 Next.js 构建过程中导出的静态资产。
动态 Web 应用程序框架
当您开始构建动态 Web 应用程序时,Deno Deploy 真的大放异彩。我们全球网络上的极短冷启动时间和低延迟使 Deploy 成为构建任何类型的数据驱动 Web 应用程序的绝佳选择。
以下是一些目前在 Deno Deploy 上运行的动态 Web 框架。
Fresh
Fresh 是一个为 Deno 设计的 Web 框架,它具有边缘动态渲染、客户端交互式岛屿,以及默认情况下无需构建步骤的超快部署。它具有类似于 Next.js、SvelteKit 或 Nuxt 等框架的功能集,我们建议您在 Deno 上尝试任何新的项目时使用它。
如果您正在构建 SaaS 应用程序,您可能还需要查看SaaSKit,它是一个已经实现了身份验证、支付和其他许多您在新的 SaaS 项目中需要的功能的 Fresh 应用程序。
Hono
Hono 是一个轻量级的 Web 应用程序框架,秉承Express和Sinatra的传统。仅需几行代码,您就可以设置一个 API 服务器或动态网页服务器。Hono 提供了 Deno 原生的安装路径,并且与 Deno 内置的 TypeScript 工具完美配合。
Oak
Oak 是一个受Koa启发的 Deno 原生中间件框架。它提供了一种强大且灵活的方式在 Deno 中编写 API 服务器,并且在 Deno Deploy 上运行良好。
Astro
Astro 是一个为内容型网站设计的 Web 框架。它可以在多种运行时环境中进行服务器端渲染,包括 Deno Deploy。除了Astro 组件和页面之外,您还可以使用您喜欢的客户端框架来构建前端的交互式岛屿。
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 来管理依赖项和运行本地开发脚本。但是,使用Deno 预设 for Nitro 意味着您的 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 标准Request
和Response
对象。
立即在 Deno Deploy 上尝试新框架!
准备停止阅读并开始动手?查看我们最近重新设计的新项目体验,并在可立即使用的模板中尝试这些框架之一。
与往常一样,我们很乐意听到您正在构建的内容!您可以通过以前被称为 Twitter 的网站、我们的 Discord或YouTube与我们联系。我们很高兴听到您今天使用哪些框架。