SSR experiment

[mrdotb]

After reading this issue, I decided not to implement SSR (Server-Side Rendering) when I first wrote and published the library.

However, I believe it's now worth exploring this area. React seems to outperform Svelte and Vue in SSR, according to this benchmark.

A good starting point would be implementing something similar to what they are doing in live_vue or live_svelte with behavior, as seen here.

Afterward, we could benchmark and experiment with different renderers such as Node.js, Deno, and Bun. It appears that Bun performs particularly well when rendering React, as discussed here.

[OmarGoubail]

I am currently working on the SSR feature here ssr branch, but I am struggling to do it without customizing esbuild. Do you have any ideas about that?

I haven't gotten it to work yet, but hopefully soon. Do you think that since all the live_[insert framework] packages basically use the same starting point, it would be a good idea to have something like a core package they can all use? Maybe you could even have multiple frameworks at the same time if needed (hard to imagine why, but it would be possible).

Also, I can't help but feel that in the case of React, it would benefit a lot from Vite's goodies. Do you think maybe a Vite integration with an igniter generator or mix task would be a good idea?

I am new to Elixir and Phoenix, but I am loving the idea of generators to abstract away tedious tasks like installing a package.

[mrdotb]

I am currently working on the SSR feature here ssr branch, but I am struggling to do it without customizing esbuild. Do you have any ideas about that?
I am not familiar with React SSR. I started to read the doc https://react.dev/reference/react-dom/server/renderToString
renderToString
Also check https://react.dev/reference/react-dom/client/hydrateRoot
I don't think any bundler is required to render the component from server side but I could be wrong
First thing I would do is create a minimal setup js only to render a component as a string in the shell and continue from this step.

it would be a good idea to have something like a core package they can all use? Maybe you could even have multiple frameworks at the same time if needed (hard to imagine why, but it would be possible).
It's quite different for each framework and it will be a lot of work to maintain.

Also, I can't help but feel that in the case of React, it would benefit a lot from Vite's goodies. Do you think maybe a Vite integration with an igniter generator or mix task would be a good idea?
You can try to integrate with vite but as I mention before I am not a big fan of changing the default shipped with phoenix. But a mix task to simplify the current installation is okay. Not sure if igniter can handle js ?

[mrdotb]

I manage to make it work but it's far from being production ready.
While it's possible to not use any builder you still need to ship all the js so I found than you can pass multiples commands to the hex esbuild and this way it does not add any deps to build the final server.js https://github.com/mrdotb/live_react/blob/feature/ssr/live_react_examples/config/config.exs#L45

For the hooks modification it's quite lite just adding hydrateRoot if it was ssr rendered
https://github.com/mrdotb/live_react/blob/feature/ssr/assets/js/live_react/hooks.js#L34

I could not find the way to build the server in dev env automatically yet.
Need to call mix assets.build from live_react/live_react_examples project.

I put the server.mjs in the live_react_examples to test things.

For the component we need to call the nodejs render two time I don't think there is another way around except caching but I could be wrong.
https://github.com/mrdotb/live_react/blob/feature/ssr/lib/live_react.ex#L59

I'm not sure I understand completely the original code from live_vue it seems to not call the ssr two times https://github.com/Valian/live_vue/blob/main/lib/live_vue.ex

[mrdotb]

#7
Implemented and currently in beta