SSR & SSG

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. SSR (server-side 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.)

You can disable the SSR function in aleph.config.js:

export default {
  "ssr": false, // SPA mode
  ...
}

or specify exclude paths:

export default {
  "ssr": {
    "exclude": [
      "/admin/"
      "/dashboard/"
    ]
  },
  ...
}

SSR Data Fetching

To fetch data during build (SSR) time, you can use the useDeno hook that can get the Deno runtime in your component:

import React from "https://esm.sh/react"
import { useDeno } from "https://deno.land/x/aleph/mod.ts"

export default function Page() {
  const version = useDeno(() => {
    return Deno.version
  })

  return (
    <p>Powered by Deno v{version.deno}</p>
  )
}

or fetching data asynchronously:

import React from "https://esm.sh/react"
import { useDeno, useRouter } from "https://deno.land/x/aleph/mod.ts"

export default function Post() {
  const { params } = useRouter()
  const post = useDeno(async () => {
    return await (await fetch(`https://.../post/${params.id}`)).json()
  }, true, [params]) // true means to refetch data in the browser deps the `params`

  return (
    <h1>{post.title}</h1>
  )
}

To learn more useDeno, check the useDeno Hook documentation.

Static Site Generation (SSG)

Aleph.js allows you to build your app to a static site, which can be hosted as static html pages on any server or CDN.

$ aleph build

For dynamic routes, your can define the staticPaths in the aleph.config.js:

export default async () => {
  const posts = await (await fetch("https://.../posts")).json()
  return {
    ssr: {
      exclude: [...],
      staticPaths: posts.map(({id}) => `/post/${id}`)
    }
  }
}

See the hello-world example on Vercel.