D
Deno

help

Minimal code for Preact SSR

Eeric.uhd11/20/2023
What's the actual code to do some Preact SSR with Deno? For example something simple like a counter that is incremented by 1 each seconds. Ideally something that could run on a Deno Deploy Playground without any deno.json
DAHDeno AI Helper11/20/2023
I'm sorry, but the documentation does not provide a specific example of server-side rendering (SSR) with Preact using Deno. However, it does mention that Fresh and Aleph.js are popular frameworks for developing React-like websites with Deno, and they use Preact as an alternative foundational technology to provide a better, more performant experience. For a more detailed guide on how to use these frameworks with Deno, you may want to refer to their respective documentation or look for specific tutorials online. Remember, when working with Deno, you have built-in TypeScript support, and you can use JavaScript modules from npm in your Deno programs with the "npm:" specifier in your imports. Please note that this information is not in the documentation, and it's always a good idea to refer to the official documentation of the tools you are using for the most accurate and up-to-date information. 🦕
Mmarvinh.11/21/2023
/** @jsxImportSource https://esm.sh/preact */

import { renderToString } from "npm:preact-render-to-string";

function App() {
return <h1>hello world</h1>
}

Deno.serve(() => {
const html = renderToString(<App />);
return new Response(html, {
headers: {
"Content-Type": "text/html"
}
});
});
/** @jsxImportSource https://esm.sh/preact */

import { renderToString } from "npm:preact-render-to-string";

function App() {
return <h1>hello world</h1>
}

Deno.serve(() => {
const html = renderToString(<App />);
return new Response(html, {
headers: {
"Content-Type": "text/html"
}
});
});
Eeric.uhd11/23/2023
Thanks! Awesome. How about interactivity? If I add a button an a counter it won’t work. It’s some kind of server component. 1. Is hydration what I need? If yes, how to proceed? 2. Can it still be fine using only one file on the playground?
Mmarvinh.11/23/2023
Event listeners only work in the browser, not in the server. To be able to make the server rendered HTML interactive in the browser you need to hydrate it on the client and be sure to ship the relevant components as JS to the browser as well.
Eeric.uhd11/23/2023
How does hydration work? I only heard about it
Mmarvinh.11/24/2023
It's basically a faster variant of the typical render() function on the client that only attaches event listeners. That's really all there is to it.
// normal render
render(<App />, document.getElementById("app"))
// hydrate
hydrate(<App />, document.getElementbyId("app"));
// normal render
render(<App />, document.getElementById("app"))
// hydrate
hydrate(<App />, document.getElementbyId("app"));

Looking for more? Join the community!

Recommended Posts
How to use recent Tensorflow.JS? TF from deno.land/x/tensorflow@v0.21 appears to work, but it's oldI've only tried the TF package from deno.land/x/tensorflow@v0.21 with the readme page example. I'm hDeno Deploy isolate startup timeis this startup time normal? https://media.discordapp.net/attachments/936130919163641856/11757670644Deno KV equivalent of 'returning'hello, in sqlite there is a way to get the new value set on an upsert like so insert into cCan't use npm package: Uncaught (in promise) TypeError: Could not resolve 'preact/hooks'I get this error when trying to import the Preact version of Auto-animate in Fresh https://auto-animLeaking resources from inbound HTTP connections in testsAnyone have any ideas why I would be getting the following error. I'm using an oak server that is stPreact Hello World is not working/** @jsxImportSource https://esm.sh/preact */ import { useState } from "https://esm.sh/preact/hooks"using imports map to map no-suffix imports to suffix importsI was hoping i might be able to use an import map in my deno.json like this: ``` "imports": { "./sdocker-jupyter with deno?Anyone know any good pre-made solutions? Thanks!Importing JSON files with a different file extension fails as "Unknown module"When trying to import a json file with import attributes that doesn't end with .json Deno gives the BroadcastChannel vs EventSource vs WebSocketWhy would one uses BroadcastChannel, over EventSource, or WebSocket? Could anyone provide clear exaReally Excited About Dino JupyterI tried to install the Kernel on Windows SANS - WSL. Here is the output: deno jupyter --unstable Trying to benchmark `Deno.remove` but it fails``` deno bench --allow-write bench.ts Check file:///C:/Users/babak/OneDrive/Desktop/deno-benchmark-3Plot Vega-Lite in Jupyter Notebook running the Deno kernelHello, I am very new to Deno... I wanted to see if I can produce some interactive Vega visualizaitonSegfault when creating second rust MainWorker in programHello. Not sure if this is the place to ask since it seems to be a v8 issue (or perhaps an issue wi