bryanjos

bryanjos

ReactRender: Server Side Rendering for React Components

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!

Most Liked

bryanjos

bryanjos

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:

harmon25

harmon25

I have been using a slight variant of this for full page rendering of react apps and its working great. Almost entirely replacing eex templates and relying solely on server side rendered + hydrated react on the client. This pattern is a bit against the grain, and rather than attempting to avoid javascript within Phoenix front-ends, it embraces it!

I have not really built much using eex templates, and generally find myself reaching for react when building decently complex UIs in Phoenix apps. I do have a javascript background, more specifically Meteor, so I suppose it is just what I am more familiar with.

I think for people coming from node, or react backgrounds, this pattern would help ease them into using phoenix on the back-end, and maybe help grow the community!

tme_317

tme_317

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!

noisykeyboard

noisykeyboard

Really impressed with this plugin Bryan, thanks for open sourcing it. I forked it and got it working with Svelte.js.. A suggestion I have is to abstract away the elixir logic from the React stuff (and maybe call it 'elixir_ssr_renderer) to make it easier to adapt it to different JS frameworks.

bryanjos

bryanjos

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.

Where Next?

Popular in Libraries Top

New
OvermindDL1
Been making an MLElixir thing (not released yet…) for fun in spare time in the past day. I’m just trying to see how much I can get an ML...
132 13487 106
New
vic
Expat is a tiny experiment I did for extracting patterns and being able to reuse them (compose and share patterns between elixir librarie...
New
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
devonestes
Introducing assertions, the library that helps you write really great test assertions! GitHub: https://github.com/devonestes/assertions ...
New
OvermindDL1
I created a new library (rather I pulled out a couple files from my big project), it manages an operating system PID file for the BEAM. ...
New
mattludwigs
Grizzly is a library for working with Z-Wave devices. Z-Wave is a low-frequency radio protocol for controlling smart home devices on a me...
New
KallDrexx
For a good number of months I've been working on creating a very basic RTMP live video streaming server. Now that I have a very, very ba...
New
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1140 51847 244
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New

Sub Categories:

We're in Beta

About us Mission Statement