SSR and NiceGUI: A solid attempt! (no longer stuck)

[evnchn]

Related to #637

TL-DR: Want to do SSR. Vue alone, fine. With Quasar, blows up terribly and can't debug. Need help. If we make it work, SEO and page load times will take a big boost.

---

Steps to reproduce:

1. Set things up like this: https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app
2. Use this example.js. Many parts you will find familar to the nicegui.js

// this runs in Node.js on the server.
import { createSSRApp, withModifiers, withKeys, resolveComponent, h } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'
// Quasar is a Vue.js framework for building responsive web applications.
import { Quasar } from 'quasar'

function renderRecursively(elements, id) {
  const element = elements[id];
  if (element === undefined) {
    return;
  }

  // @todo: Try avoid this with better handling of initial page load.
  if (element.component) loaded_components.add(element.component.name);
  element.libraries.forEach((library) => loaded_libraries.add(library.name));

  const props = {
    id: "c" + id,
    ref: "r" + id,
    key: id, // HACK: workaround for #600 and #898
    class: element.class.join(" ") || undefined,
    style: Object.entries(element.style).reduce((str, [p, val]) => `${str}${p}:${val};`, "") || undefined,
    ...element.props,
  };
  Object.entries(props).forEach(([key, value]) => {
    if (key.startsWith(":")) {
      try {
        try {
          props[key.substring(1)] = new Function(`return (${value})`)();
        } catch (e) {
          props[key.substring(1)] = eval(value);
        }
        delete props[key];
      } catch (e) {
        console.error(`Error while converting ${key} attribute to function:`, e);
      }
    }
  });
  element.events.forEach((event) => {
    let event_name = "on" + event.type[0].toLocaleUpperCase() + event.type.substring(1);
    event.specials.forEach((s) => (event_name += s[0].toLocaleUpperCase() + s.substring(1)));

    let handler;
    if (event.js_handler) {
      handler = eval(event.js_handler);
    } else {
      handler = (...args) => {
        const emitter = () =>
          window.socket?.emit("event", {
            id: id,
            client_id: window.clientId,
            listener_id: event.listener_id,
            args: stringifyEventArgs(args, event.args),
          });
        const delayed_emitter = () => {
          if (window.did_handshake) emitter();
          else setTimeout(emitter, 10);
        };
        throttle(delayed_emitter, event.throttle, event.leading_events, event.trailing_events, event.listener_id);
        if (element.props["loopback"] === False && event.type == "update:modelValue") {
          element.props["model-value"] = args;
        }
      };
    }

    handler = withModifiers(handler, event.modifiers);
    handler = event.keys.length ? withKeys(handler, event.keys) : handler;
    if (props[event_name]) {
      props[event_name].push(handler);
    } else {
      props[event_name] = [handler];
    }
  });
  const slots = {};
  const element_slots = {
    default: { ids: element.children || [] },
    ...element.slots,
  };
  Object.entries(element_slots).forEach(([name, data]) => {
    slots[name] = (props) => {
      const rendered = [];
      if (data.template) {
        rendered.push(
          h(
            {
              props: { props: { type: Object, default: {} } },
              template: data.template,
            },
            {
              props: props,
            }
          )
        );
      }
      const children = data.ids.map((id) => renderRecursively(elements, id));
      if (name === "default" && element.text !== null) {
        children.unshift(element.text);
      }
      return [...rendered, ...children];
    };
  });
  return h(resolveComponent(element.tag), props, slots);
}

function parseElements(raw_elements) {
  return JSON.parse(
    raw_elements
      .replace(/$/g, "$")
      .replace(/`/g, "`")
      .replace(/>/g, ">")
      .replace(/&lt;/g, "<")
      .replace(/&amp;/g, "&")
  );
}

function replaceUndefinedAttributes(element) {
  element.class ??= [];
  element.style ??= {};
  element.props ??= {};
  element.text ??= null;
  element.events ??= [];
  element.update_method ??= null;
  element.component ??= null;
  element.libraries ??= [];
  element.slots = {
    default: { ids: element.children || [] },
    ...(element.slots ?? {}),
  };
}

const elements = parseElements(String.raw`{"0":{"tag":"q-layout","class":["nicegui-layout"],"props":{"view":"hhh lpr fff"},"children":[1]},"1":{"tag":"q-page-container","children":[2]},"2":{"tag":"q-page","children":[3]},"3":{"tag":"div","class":["nicegui-content"],"children":[4]},"4":{"tag":"div","text":"Here goes nothing"}}`)

Object.entries(elements).forEach(([_, element]) => replaceUndefinedAttributes(element));

const app = createSSRApp({
  data() {
    return {
      elements,
    };
  },
  render() {
    return renderRecursively(elements, 0);
  },
});

app.use(Quasar, {})

renderToString(app).then((html) => {
  console.log(html)
})

Note: the elements is taken from:

from nicegui import ui

ui.label("Here goes nothing")

ui.run()

Inspect the html to get it.

---

Issue

If you comment out the line app.use(Quasar, {}), you see:

So the server-side rendering is working, but just that Quasar is not included into the Vue app.

If you then leave app.use(Quasar, {}) uncommented, you'll see perhaps the most opaque error you'll ever see in your life.

---

So, I am stuck. Cannot proceed further. If I make it work, we can invoke the SSR on every page load, making every NiceGUI page serve valid HTML, boosting SEO and initial page load speeds.

[evnchn]

Got some results

Patch the Quasar as said here: quasarframework/quasar#11424 (comment)

Then you get:

Sounds familiar? That's because it is the exactly same HTML elements by the end the page is rendered

Paste it into templates/index.html like this

Then, volia, NiceGUI with Server-Side Rendering (SSR)!

Even blocking nicegui.js, which makes Vue.createApp never called, the text still shows up.

---

Considerations going forward...

But, obviously this won't work. This is very much alpha.

The following questions needs to be answered:

1. Is this worth the pursuit?
2. NiceGUI has to invoke node, which means we have to detect/install NodeJS? https://stackoverflow.com/q/62862861 https://github.com/samwillis/nodejs-pypi ???

The following things have to be done:

1. Automatically populating the example.js (soon will be called SSR.js) with the elements NiceGUI generated.
2. Automatically calling said SSR.js with node to get the output.
3. Serving said output in the HTTP response.

---

@falkoschindler This is going to be even crazier than the ACID PR, and I don't feel I am able to make such a PR on my own effort. Let's think before we act?

[evnchn]

Works to use https://github.com/samwillis/nodejs-pypi which offers NodeJS v18.4.0, just enough to generate the HTML elements after patching the quasar.server.prod.js

Patching guide:

e.req.headers["user-agent"]||e.req.headers["User-Agent"]
==> e.req?.headers["user-agent"]||e.req?.headers["User-Agent"]

e,t={},o ==> e,t={},o={}

This could work!

[evnchn]

https://pypi.org/project/nodejs-wheel/

Newer NodeJS version. Not comfortable recommending NodeJS 18 which is EOL on "2025-04-30"

[evnchn]

Might be a good idea to separate this to a different package, think: pip install nicegui[ssr]

[falkoschindler]

Let's think before we act?

Why do you want SSR (Server-Side Rendering)? What would be the benefit? Is a pre-rendered HTML payload really smaller than our JSON containing the definition of UI elements? Isn't it better to distribute the rendering work to the clients instead of doing all the work on a centralized server?

[evnchn]

Case study 1: In #4506, all of these sites run on NiceGUI, and all of these sites show up as "Connection lost. Trying to reconnect..." in Google, Bing and/or Yandex (should they show up). SSR can serve valid HTML which enhances SEO*.

*two of these sites in the list are under Zauberzeug (so you definitely know how to use NiceGUI properly). But, I have no idea why https://nicegui.io doesn't suffer from this though... #663 hmm 🤔

Case study 2: When the network connection is slow, the nicegui.js gets ran very late, leading to a long blank period for which no content is shown. You can see part of the effects here: #4505, for which a dark site flashes white unless we add CSS to it. Dark mode flashing is just a really obvious way to tell that the page is blank until JS kicks in, and the CSS patch is just a simple one to fix the visual jarring nature, not a root-cause fix. The elements are still missing during the flash period.

Some more relevant readings: #637
#451

[evnchn]

I'll say though, being:

(1) rather late user of NiceGUI (joining at 2.3.0, so you see why I can't help with 1.x stuff...)
(2) new to contributing here (and in GitHub in general)
(3) focused on speed (again, single-megabit-uplink server)

My ideas are understandably crazy and out-of-the-norm. Look no further at the folder for which the code for this discussion is put: C:\Users\User\Documents\crazyguy

However, I want to see NiceGUI challenge its status quo, too, so I am getting my hands dirty in actually trying to do SSR before concluding the idea as infeasible. I won't give up without putting up a fight 💪

I do think, though, that views from different perspective is a nice (😉) thing to have. Through my exercise in focusing on speed, I have thus found 3 valid speedups, 2 made it into NiceGUI 2.13.0*, 1 (the modulepreload one) to be released. There's still a pair more (cachebusting & cache_control_directives one, if you recall), which we are thinking about it...

*The one about replaceUndefinedAttributes originally came up to me while trying to access a NiceGUI page on an Atom x5-Z8350 tablet, which is so awfully slow that I thought it was the tablet's fault, but it browses Google fine, so I thought something was wrong.

---

I also want to respond more directly to your points:

• [HTML payload vs JSON definition] With the former being able to be displayed while the script for Vue, Quasar, Tailwind and NiceGUI have not been downloaded and ran, the speedup is immediate. Not to mention concerns on slow client device (think my Atom tablet), battery life of computation on client, and some browsers still running in single-process mode such as Pale Moon (that Firefox fork which I used to test ES module shim in modulepreload the scripts needed for faster page load #4507, chokes quite a bit loading NiceGUI webpages)
• [About doing all the work in server] It is in a separate process so should not make the Python side any slower (think: it is CPU-bound in terms of NodeJS, but Python will handle the result as if it was doing an IO-bound operation like reading to disk).
  • Also, I'll spoil the details in that I plan to soon introduce HTML content caching to @ui.page, such that the HTML served is the same every time (with the exception of the client_id in the JS), which will work if the user promises that in their code, the page content before await ui.context.client.connected() stays the same. If that gets implemented, then even if the SSR takes, idk, 5 seconds, it will only be for one time, and the future pages all get millisecond-level serving times.

[evnchn]

Well, getting SSR working was easier than I expected, because of the helpful library https://pypi.org/project/nodejs-wheel/

So, check out #4557. Though, more discussion on pros and cons is still needed.