useDeno Hook

In Next.js, two functions called getStaticProps and getServerSideProps are used by the pages to fetch data at build time (SSR) or on each request respectively. This solution isolates the data and view like different roles of the back-end and front-end.

In Aleph.js, we prefer to use a mixed solution. A react hook we provide called useDeno allows you to fetch data at build time (SSR) in a component with Deno runtime, that's more like the React Style:

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 fetch 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();
  });

  return <h1>{post.title}</h1>;
}

How It Works

The useDeno hook will receive a sync or async callback (the first parameter), during build time (SSG) each callback passed to useDeno will be invoked, and the returned data will be cached. In the browser, the callbacks passed to useDeno will be ignored, and the cached data will be used instead.

Refresh on Each Request

By default, the callback of useDeno is only invoked at build time (SSR), but you can also call it in the browser by passing true as the second parameter:

const post = useDeno(async () => {
  return await (await fetch(`https://.../post/${params.id}`)).json();
}, true);

even refresh deps:

const post = useDeno(
  async () => {
    return await (await fetch(`https://.../post/${params.id}`)).json();
  },
  true,
  [params.id]
);

Caveats

• When true is passed as the second param, you should NOT use the Deno runtime since the callback will be invoked in the browser.

  const version = useDeno(() => {
    return Deno.version;
  }, true);

  ReferenceError: Deno is not defined.

• To fetch data asynchronously at build time (SSG), the renderToString method may be invoked repeatedly until all the async data is ready.