跳到主要内容

使用 Deno 构建网站和应用

为什么选择 Deno？

当您开始构建网站或应用时，使用 Deno 可以立即提高效率

路由和渲染

使用 Deno 构建网站或应用有很多方法。由于 Deno 原生支持 JSX 和 TSX，因此构建网站最简单的方法是使用路由器和组件。

这是一个非常简化的示例，展示了具有 Home 和 About 页面的网站

import { router } from "https://crux.land/router@0.0.11";
import { h, ssr } from "https://crux.land/nanossr@0.0.4";

const render = (component) => ssr(() => <App>{component}</App>);

Deno.serve(router(
  {
    "/": () => render(<Home />),
    "/about": () => render(<About />),
  },
));

function App({ children }) {
  return (
    <div>
      <NavBar />
      {children}
    </div>
  );
}

function NavBar() {
  return (
    <nav>
      <div>
        <a href="/">
          Home
        </a>
      </div>
      <div>
        <a href="/about">
          About
        </a>
      </div>
    </nav>
  );
}

function Home() {
  return (
    <div>
      <span>Home</span>
    </div>
  );
}

function About() {
  return (
    <div>
      <span>About</span>
    </div>
  );
}

此示例取自这篇关于用单个 JavaScript 文件编写的简单作品集网站的博文。还有这个更具交互性的版本，其中包含一个也包含在单个 JavaScript 文件中的 Web 表单。

使用 Deno KV 添加状态

如果需要一个具有一些逻辑的 Web 应用程序呢？这是一个链接缩短 Web 应用程序的示例，它使用 Deno KV 进行存储，仅需 23 行代码

const kv = await Deno.openKv();

Deno.serve(async (request: Request) => {
  // Create short links
  if (request.method == "POST") {
    const body = await request.text();
    const { slug, url } = JSON.parse(body);
    const result = await kv.set(["links", slug], url);
    return new Response(JSON.stringify(result));
  }

  // Redirect short links
  const slug = request.url.split("/").pop() || "";
  const url = (await kv.get(["links", slug])).value as string;
  if (url) {
    return Response.redirect(url, 301);
  } else {
    const m = !slug ? "Please provide a slug." : `Slug "${slug}" not found`;
    return new Response(m, {
      status: 404,
    });
  }
});
Node 呢？
在 Node.js 中创建任何具有状态的应用程序都需要云数据库提供商，创建帐户，配置数据库，获取必要的 API 密钥，将其设置为环境变量，然后才能连接到它并存储数据。

Web 框架

许多人更喜欢使用全栈 Web 框架和元框架来构建网站和应用程序。

Fresh 是一个为速度、可靠性和简洁性而构建的下一代 Web 框架。它使用服务器端渲染，默认情况下不向客户端发送任何 JavaScript，并拥抱渐进增强。

了解更多关于为什么服务器端渲染对现代 Web 有益的信息。

SaaSKit 构建于 Fresh 之上，提供每个现代 SaaS 应用程序所需的功能——订阅计费、身份验证和会话管理、管理面板等等。SaaSKit 不仅为 SaaS 提供了必要的功能，而且还通过原生 TypeScript 支持、Deno 的一体化工具链等提供了现代开发体验。

Aleph 是一个现代的基于 React 的全栈框架，可以轻松构建前端。

Ultra 是一个现代的基于 React 的全栈框架，专为 suspense 服务器端渲染而构建。它完全拥抱现代工具和技术，例如 ESM。

了解更多关于 Deno 原生框架的信息。

您还可以将 Node.js 框架与 Deno 一起使用

了解更多关于将 npm 与 Deno 一起使用的信息。

部署到生产环境

Deno Deploy，我们的全球无服务器边缘平台，允许您在全球范围内托管和运行您的服务器，靠近您的用户，提供高可用性和最小的网络延迟。

通过连接 GitHub 帐户，在 Deno Deploy 上托管您的网站或应用既简单又免费。

了解为什么边缘计算是 Web 的未来.

您还可以将 Deno 服务器托管在任何运行 VM 或 VPS 以及 Docker 的平台上。以下是一些指南，可帮助您入门。

其他资源

以下是一些关于使用 Deno 构建静态站点和应用的示例、博文和视频。