Pages

In Aleph.js, a page is a React Component exported as default from a .js, .jsx, .ts, .tsx, .mjs file in the pages directory. Each page is associated with a route based on its file name.

Example: If you create pages/about.tsx that exports a React component like below, it will be accessible at /about.

import React from "https://esm.sh/react"

export default function About() {
  return <h1>About</h1>
}

To learn more about routing, check the Routing documentation.

Markdown Pages

Aleph.js supports markdown pages from .md files in the pages directory, and you can define page meta with yaml format at front of those .md files:

---
title: About
---
# About

will be transformed to:

import React from "https://esm.sh/react"

export default function MarkdownPage() {
  return <h1>About</h1>
}

MarkdownPage.meta = {
  title: "About"
}

Pre-rendering

By default, Aleph.js pre-renders every page. This means that Aleph.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

To learn more about rendering, check the SSR & SSG.