Denoのサーバレンダリングアプリケーション用のReactフレームワーク、Aleph.jsが、アルファリリースを通じて利用可能になった。Alephは、Next.jsのコア機能の多くをDeno環境で利用できるようにする。ゼロ構成のサーバサイドレンダリング、静的サイト生成、ファイルシステムとAPIルーティングなど。Alephは、標準のEcmaScriptモジュール (ESM) の import 構文を使用し、開発時にバンドラを使用しない。Alephは、React Fast Refreshによるホットモジュールの交換も提供する。
Aleph.jsは、プロダクション用のReactフレームワークとして自己記述しているNext.jsに大きく影響を受けている。Next.jsと同様に、Alephは開発者エクスペリエンスを向上させるための生産性機能を提供する。Alephの現在のアルファ版は、ページベースのルーティングシステム (動的ルートをサポート)、APIルート、ルートベースの国際化サポート、静的サイト生成、デフォルトでの事前レンダリング (構成可能なサーバ側レンダリングを使用)、クライアントサイドルーティング、CSSとSassのサポート、およびReact Fast Refreshのサポートを提供する。開発者は、WebアプリケーションをページとAPIのセットとして作成し、各ページはReactコンポーネントで実装される。
Next.jsとは異なり、Alephは認識されたNodeの弱点を修正しようとするNode.jsの最近の代替手段である、Denoと連携する。今年初めに最初のメジャーバージョンを出荷した、Denoは、TypeScriptをまもなくサポートする。Denoには、明示的に有効にされていない限り、ファイル、ネットワーク、または環境へのアクセスを許可しない、より厳格なセキュリティモデルがある。Denoは、package.json ファイル、node_modules ディレクトリ、または CommonJS モジュールを使用しない。Denoは、代わりに EcmaScriptモジュール (ESM) (ES2015を通じてJavaScript標準に追加) を活用し、依存をURLとしてインポートする。
Alephのドキュメントでは、開発時にみられたAlephによるDenoモジュールの使用による生産性の利点の1つについて説明している:
すべてのモジュールは、一度コンパイルしてからディスクにキャッシュするだけで済みます。モジュールが変更された場合、Aleph.jsはただその単一モジュールを再コンパイルする必要があるだけです。すべての変更を再バンドルするために時間を無駄にすることはありません。
Denoを使用したAlephコードの簡単な例は次のとおり:
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は、アプリケーションのルートディレクトリにある専用の import_map.json ファイルを介したインポートマップをサポートしている。インポートマップは、Web Incubator Community Group (WICG) からの提案であり、素のインポート指定子を解決できる。インポートマップを使用すると、Alephは import React from "react" を import React from "https://esm.sh/react@16.13.1" に置き換えることができる。
Aleph.jsには、開発中にESMモジュールと動的インポートをサポートするための最新のブラウザーが必要である。最新のブラウザには、Chrome >= 61、Edge >= 16、Firefox >= 60、Safari >= 11 と Opera >= 48 のバージョンが含まれている。
開発者は、Denoランタイムを使用してビルド時にデータを計算し、そのデータをページに渡すことができる。Dojoなどの一部のフレームワークでは、このアプローチをビルドタイムレンダリングと呼んでいる。Next.jsは、ビルド時または各リクエストでデータをフェッチするための getStaticProps メソッドと getServerSideProps メソッドを提供する。
開発者は404ページをカスタマイズできる。開発者は、カスタムの <App>、<Head>、および <Scripts> コンポーネントを使用して、ページの初期化 (グローバルレイアウトまたはスタイル) を制御し、ページの <head> および <script> タグのコンテンツをカスタマイズすることもできる。例は次のとおり:
import React from "https://esm.sh/react"
import { Head, Scripts } from "https://deno.land/x/aleph/mod.ts"
export default function App({ Page, pageProps }) {
return (
<>
<Head>
<title>Aleph.js</title>
</Head>
<Scripts>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script>
<script>{`
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-1234567890');
`}</script>
</Scripts>
<Page {...pageProps} />
</>
)
}
Alephはまだアルファ版であり、活発に開発されている。Alephは、SystemJS を使用してモジュールをインポートするポリフィルされた nomodule.js を使用して、IE11などの古いブラウザをプロダクション環境でサポートすることを計画している。PWAとAMPのサポートに関するさらなる作業も進行中である。
開発者は、Alephのオンラインドキュメントサイトにアクセスできる。Alephは、MITライセンスの下で配布されているオープンソースソフトウェアである。貢献とフィードバックは大歓迎であり、Alephの貢献ガイドラインに従う必要がある。