Deno•3y ago

Minimal code for Preact SSR

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

deno.json

Deno AI Helper•11/20/23, 10:14 PM

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.

Helpful Links:
Deno by Example
Using React with Deno | Manual | Deno
Announcing Deno KV
Hello World - Deno by Example

marvinh.•11/21/23, 2:49 PM

Kodjo.aiOP•11/23/23, 11:37 PM

Thanks! Awesome. How about interactivity? If I add a button an a counter it won’t work. It’s some kind of server component.

Is hydration what I need? If yes, how to proceed?
Can it still be fine using only one file on the playground?

KKodjo.ai Thanks! Awesome. How about interactivity? If I add a button an a counter it won’...

marvinh.•11/23/23, 11:45 PM

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.

Kodjo.aiOP•11/23/23, 11:50 PM

How does hydration work? I only heard about it

marvinh.•11/24/23, 12:04 AM

It's basically a faster variant of the typical function on the client that only attaches event listeners. That's really all there is to it.