Server-rendered web apps in Deno with Aleph.js

Aleph.js, a React framework for server-rendered apps in Denois now available through a alpha release. Aleph does a lot of Next.js‘ main features available in Deno environments: server-side rendering without configuration, static site generation, file system and API routing, etc. Aleph uses the standard EcmaScript Modules (ESM) import syntax and does not use bundler in development. Aleph also provides hot swapping of the module with React Quick Refresh.

Aleph.js is heavily inspired by Next.js, the latter which describes itself as a React framework for production. Like Next.js, Aleph provides productivity features for a better development experience. The current alpha release of Aleph provides a page-based routing system (with dynamic route support), API routes, route-based internationalization support, static site generation, default pre-rendering (with configurable server-side rendering), client-side routing, CSS and Sass support, and React Fast Refresh support. Developers write a web application as a collection of pages and APIs, with each page implemented with a React component.

Unlike Next.js, Aleph works with Deno, a recent Node.js alternative that seeks to address Node’s perceived weak points. Deno, which shipped its first major release earlier this year, supports TypeScript out of the box. Deno has a stricter security model that denies access to any file, network, or environment unless explicitly enabled. Deno does not use package.json to file, node_modules directory, nor the CommonJS modules. Deno leans instead EcmaScript Modules (ESM) (added to the JavaScript standard via ES2015) and imports dependencies as URLs.

The Aleph documentation explained a productivity benefit of Aleph’s use of Deno modules that is seen in development:

Each module only needs to be compiled once and then cached to disk. When a module changes, Aleph.js just needs to recompile that single module; there is no wasted time gather each change.

A simple example of Aleph code using Deno is as follows:

import React from "https://esm.sh/react@17.0.1"
import Logo from "../components/logo.tsx"

export default function Home() {
    return (
      <div>
        <Logo />
        <h1>Hello World!h1>
      div>
    )
}

Aleph supports import maps through a dedicated import_map.json to file in the root directory of the application. Import maps is a proposal from Web Incubator Community Group (WICG) which resolves bare import specifiers. With import cards, Aleph can replace import React from "react" with import React from "https://esm.sh/react@16.13.1".

Aleph.js requires a modern browser to support ESM modules and dynamic imports during development. Modern browsers include Chrome versions >= 61, Edge >= 16, Firefox >= 60, Safari >= 11 and Opera >= 48.

Developers can use the Deno runtime to calculate data at build time and pass this data to a page. Some frames, like Dojo, call this approach build-time rendering. Next.js provides the getStaticProps and getServerSideProps methods to retrieve data at build time or on every request.

Developers can Personalize 404pages. Developers can also use , and components to control page initialization (global layout or styles), and customize page content and