ReactRender: Server Side Rendering for React Components

frontend
react_render
#1

Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions for set up for phoenix projects here.

Give it a try and tell us what you think!

12 Likes

Isomorphic ReactJS managed by Elixir
#2

Wow this is very cool, thanks for open sourcing it. I’ve been experimenting with different frontend/backend architectures for a couple of months now leveraging React and lately have been using Next.js to do SSR talking to Phoenix backend using Apollo/Absinthe. It all works (generally) but adds a heavy fast-moving dependency and some degree of complexity.

It might be cleaner/simpler to use this library instead. Two questions:

  • I realize it’s very new and I was only able to find one example app on GH using it (https://github.com/Harleymckee/reactin). Are you using it in dev/prod on some closed-source apps already or is it experimental?
  • I think it uses a GenServer to control a single spawned long-running node instance that does all the rendering. Have you done load testing on it? I think (not sure) each render request blocks all other render requests and not sure what happens if node crashes for a given request. Maybe using poolboy (or something) could make it more performant/resilient… have you considered?

Thanks again!

1 Like

#3

Thanks! My personal aim was to make it so it didn’t need a node webserver running and that it could be supervised, started, and stopped in an elixir app. I do like Next.js a lot actually. I just wanted to reduce the complexity here. The beauty with this is you can use it for full page renders or just sprinkling in react components.

It’s still new and I think you found my coworker’s test app, haha. We aren’t using it in prod yet, but since we do a lot of react here, it is going to be soon enough.

I haven’t done any load testing on it. You are right that if it’s only one process it will block other requests. We do want to make it have more. I haven’t figured out the mechanism but maybe poolboy is an option. Whatever happens, I want it to be configurable.

1 Like

#4

Haha yeah, the power of GH code searching filename:mix.exs react_render does the trick. I do that a LOT to find examples of library use in the wild. :slight_smile:

Love the fact that you can use it for full page rendering or just sprinkling react components into an EEx template. Was looking at react-phoenix also which only supports CSR at this point before deciding on fully decoupling the frontend using Next.js. I’m being careful with coupling such that I could replace Next.js with this library to reduce some complexity (albeit coupling more tightly with Phoenix) at a later date without a huge rewrite.

Thanks for the info… yeah I will definitely be watching this repo very closely!

1 Like

#6

Hi, version 2.0.0 was published a few days ago, allowing to have multiple renderers. The number of renderers is configurable.

Take a look at the changelog for more details:

5 Likes

#7

Hi @bryanjos,

great library!
How could we combine your library with react styled components on SSR?

Best regards
David

0 Likes

#8

As long as any modules are within the NODE_PATH, it should just work

1 Like

#9

Is someone using this in prod?

1 Like

#10

i have problems loading two instances of react , getting error on using react hooks, with this library

0 Likes