Attaching an event listener on server-side works: Why and How? #131

gkatsanos · 2023-01-23T13:02:50Z

gkatsanos
Jan 23, 2023

/** @jsx h */
/// <reference no-default-lib="true"/>
/// <reference lib="dom" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import { h, renderSSR, Helmet } from "https://deno.land/x/nano_jsx@v0.0.20/mod.ts";

function App() {
  return (
    <html>
      <Helmet>
        <html lang="en" amp />
        <title>Nano JSX SSR</title>
        <meta name="description" content="Server Side Rendered Nano JSX Application" />
      </Helmet>
      <body>
        <h1>Hello world</h1>
        <button id="clicker" onClick={() => console.log('1')}>Click me!</button>
      </body>
      <Helmet footer>
        <script>
          document.getElementById('clicker').addEventListener('click', () => alert('clicked'));
        </script>
      </Helmet>
    </html>
  );
}

function handler(req) {
  const html = renderSSR(<App />);
  return new Response(html, {
    headers: {
      "content-type": "text/html",
    },
  });
}

serve(handler);

The code below works; :

But how? Since I didn't use hydrate() .. I can't wrap my head around it. How is a JS event attached to a DOM element on server-side? (there's no DOM to attach to)

yandeu · 2023-01-23T20:46:02Z

yandeu
Jan 23, 2023
Maintainer

There's nothing magic about it. Nanojsx will simply render your jsx to a string and send it to the client.

The event listener will be added on the client-side since there is the following code <script>document.getElementById('clicker').addEventListener('click', () => alert('clicked')); </script>

Btw, I don't think your code renders valid HTML5, because the Helmet tags are not handled properly.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Attaching an event listener on server-side works: Why and How? #131

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Attaching an event listener on server-side works: Why and How? #131

Uh oh!

Uh oh!

gkatsanos Jan 23, 2023

Replies: 1 comment

Uh oh!

yandeu Jan 23, 2023 Maintainer

gkatsanos
Jan 23, 2023

yandeu
Jan 23, 2023
Maintainer