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. This solution isolates the data
and view
likes different roles of the back-end
and front-end
.
In Aleph.js, we prefer the mixed solution, a react hook called useDeno
provided that allows you fetch data at build time(SSR) in a component with Deno runtime, that's more React Style likely:
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 the build time(SSG) each callback of useDeno will be invoked and then cache the returned data, after in the browser the callbacks of useDeno will be ignored and the cached data will be used, that's it.
Refresh on Each Request
By default, the callback of useDeno
only invoke at build time(SSR), but you can also call it in the browser by passing the second parameter with true
:
const post = useDeno(async () => {
return await (await fetch(`https://.../post/${params.id}`)).json()
}, true)
even refresh depends deps
:
const post = useDeno(async () => {
return await (await fetch(`https://.../post/${params.id}`)).json()
}, true, [params.id])
Caveats
When the second parameter with
true
passed, 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
may be invoked repeatedly until all the async data is ready.