airbnb/hypernova

A service for server-side rendering your JavaScript views

Jordan Harband

@ljharb

all your data fetching code either a) always takes its input as props, or b) takes it as props on the server and differently in the browser, or c) you'd have to mock out a ton of browser stuff in the server (don't do this one)

Serge van den Oever

@svdoever

What happens when I make multiple async calls while rendering my react component using hypernova? are then processed one after the other or are they processed in parallel?

Jordan Harband

@ljharb

it's JS; all the JS parts happen in the main thread, and all the non-JS parts happen in parallel

the issue is that the rendering won't wait for results.

a server render must be 100% synchronous and produce a string

Serge van den Oever

@svdoever

Not in my implementation:-)

Jordan Harband

@ljharb

it is in react's implementation, so you don't have a choice.

(perhaps react 17 will change this, but that's not out for awhile)

Serge van den Oever

@svdoever

I will paste my implementation in a Gist... one moment...

Jordan Harband

@ljharb

Serge van den Oever

@svdoever

https://gist.github.com/svdoever/2f432f02334bce6e2c2c23785f27f9b3

Jordan Harband

@ljharb

oof, with domains

Serge van den Oever

@svdoever

:-)

Jordan Harband

@ljharb

domains are massively deprecated, and it seems like you're doing a lot of work to build async rendering in react when react itself will have it in v17

iow you're pushing a big rock uphill

Serge van den Oever

@svdoever

I know... but it works like a breeze:-)

Jordan Harband

@ljharb

if it ever stops working nobody will be able to fix it tho :-p

and it will break hard with react 17

Serge van den Oever

@svdoever

I need to register my promises somehere and have to wait for them to do my final rendering

Why would it break for React 17? The only thing I do is wait for all promises to complete before doing a final rendering based on my updated Redux state and returning the resulting string....

I know React 17 will implement waiting for async actions using continuations, but will it conflict?

Serge van den Oever

@svdoever

My "utility functions" for creating hypernova async components is as follows: https://gist.github.com/svdoever/e486f661d3ac6fe7a9cd2108f431761e

So a wrapped component looks like:

import { renderReactAsyncReduxServer, renderReactAsyncReduxClient } from './hypernova-react-async-redux';
import { CounterConnect } from '../reduxCounter/counterConnect';
import counterReducer from '../reduxCounter/counterReducer';
import { createStore } from 'redux';

export default (initialReduxStoreState: any) => {
  return renderReactAsyncReduxServer(
    'HypernovaCounter', // this file's name (or really any unique name)
    CounterConnect,
    createStore(counterReducer, initialReduxStoreState)
  );
};

renderReactAsyncReduxClient(
  'HypernovaCounter', // this file's name (or really any unique name)
  CounterConnect,
  (data: any) => createStore(counterReducer, data)
);

Serge van den Oever

@svdoever

I have trouble running hypernova server on Azure. If I create a Windows App Service it is using iisnode and I get the following error:

Hypernova server running node version: v8.9.4                                                                                   
2018-04-16T19:56:39.539Z - info: Worker #1 is now online                                                                        
Mon Apr 16 2018 19:56:42 GMT+0000 (Coordinated Universal Time): Application has thrown an uncaught exception and is terminated: 
Error: write ENOTSUP                                                                                                            
    at _errnoException (util.js:1022:11)                                                                                        
    at ChildProcess.target._send (internal/child_process.js:702:20)                                                             
    at ChildProcess.target.send (internal/child_process.js:586:19)                                                              
    at sendHelper (internal/cluster/utils.js:25:15)                                                                             
    at send (internal/cluster/master.js:339:10)                                                                                 
    at handle.add (internal/cluster/master.js:311:5)                                                                            
    at SharedHandle.add (internal/cluster/shared_handle.js:29:3)                                                                
    at queryServer (internal/cluster/master.js:300:10)                                                                          
    at Worker.onmessage (internal/cluster/master.js:244:5)                                                                      
    at ChildProcess.onInternalMessage (internal/cluster/utils.js:42:8)                                                          
    at emitTwo (events.js:131:20)                                                                                               
    at ChildProcess.emit (events.js:214:7)                                                                                      
    at emit (internal/child_process.js:772:12)                                                                                  
    at _combinedTickCallback (internal/process/next_tick.js:141:11)                                                             
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)                                                        
Application has thrown an uncaught exception and is terminated:                                                                 
Error: write ENOTSUP                                                                                                            
    at _errnoException (util.js:1022:11)                                                                                        
    at ChildProcess.target._send (internal/child_process.js:702:20)                                                             
    at ChildProcess.target.send (internal/child_process.js:586:19)                                                              
    at sendHelper (internal/cluster/utils.js:25:15)                                                                             
    at send (internal/cluster/master.js:339:10)                                                                                 
    at handle.add (internal/cluster/master.js:311:5)                                                                            
    at SharedHandle.add (internal/cluster/shared_handle.js:29:3)                                                                
    at queryServer (internal/cluster/master.js:300:10)                                                                          
    at Worker.onmessage (internal/cluster/master.js:244:5)                                                                      
    at ChildProcess.onInternalMessage (internal/cluster/utils.js:42:8)

If I use a linux based App Service it uses a docker container managed by pm2 and it displays:

2018-04-16T20:41:52.742563445Z __/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
2018-04-16T20:41:52.742569845Z  _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
2018-04-16T20:41:52.742576246Z   _\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
2018-04-16T20:41:52.742582546Z    _\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
2018-04-16T20:41:52.742588946Z     _\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
2018-04-16T20:41:52.742594946Z      _\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
2018-04-16T20:41:52.742600946Z       _\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
2018-04-16T20:41:52.742606647Z        _\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
2018-04-16T20:41:52.742612547Z         _\///______________\///______________\///__\///////////////__
2018-04-16T20:41:52.742618247Z
2018-04-16T20:41:52.742623547Z
2018-04-16T20:41:52.742628847Z                           Community Edition
2018-04-16T20:41:52.742634147Z
2018-04-16T20:41:52.742639448Z             Production Process Manager for Node.js applications
2018-04-16T20:41:52.742644848Z                      with a built-in Load Balancer.
2018-04-16T20:41:52.742650248Z
2018-04-16T20:41:52.742655448Z
2018-04-16T20:41:52.742660648Z                 Start and Daemonize any application:
2018-04-16T20:41:52.742674549Z                 $ pm2 start app.js
2018-04-16T20:41:52.742680649Z
2018-04-16T20:41:52.742685849Z                 Load Balance 4 instances of api.js:
2018-04-16T20:41:52.742691249Z                 $ pm2 start api.js -i 4
2018-04-16T20:41:52.742696549Z
2018-04-16T20:41:52.742701750Z                 Monitor in production:
2018-04-16T20:41:52.742707150Z                 $ pm2 monitor
2018-04-16T20:41:52.742712450Z
2018-04-16T20:41:52.742717550Z                 Make pm2 auto-boot at server restart:
2018-04-16T20:41:52.742722850Z                 $ pm2 startup
2018-04-16T20:41:52.742728050Z
2018-04-16T20:41:52.742733251Z                 To go further checkout:
2018-04-16T20:41:52.742738451Z                 http://pm2.io/

Serge van den Oever

@svdoever

It works when I used hypernova devmode:true in both cases.... Is there a difference between using devmode:false so a single worker is used, but scale using iisnode or pm2 ( i.e. pm2 start index.js -i 4) versus using the hypernova coordinator?

In the code of hypernova I see the following code with respect to devmode:

if (config.devMode) {
    worker(app, config, onServer);
  } else if (cluster.isMaster) {
    coordinator(config.getCPUs);
  } else {
    worker(app, config, onServer, cluster.worker.id);
  }

shadowtftby

@shadowtftby

Hi everyone, i am using hypernova for rails app with react. In my production env it stop render page after 1-5 hours http://joxi.ru/L21E4daS868qG2 error log hypernova empty. In pm2 i see this http://joxi.ru/8AnkO9wTjqjxZr

James Mosier

@jamesmosier

Out of curiosity, what implementation does the team at Airbnb use for getComponent? Do you all just use createGetComponent and then import a transpiled Node compliant JavaScript file (i.e. not using import, JSX, etc.)? Or do you just use require and grab the ES6 source?

Jordan Harband

@ljharb

we use require, and pull up a server-bundle of the component in question

James Mosier

@jamesmosier

thanks Jordan! by server bundle do you mean just a specific implementation of a component tailored for SSR?

Jordan Harband

@ljharb

i mean like, each entry point is turned into a single webpacked bundle

James Mosier

@jamesmosier

ahh makes sense. Thanks again!

Agis Anastasopoulos

@agis

Are there any plans for a new release soon?

Arian Meidow

@sPaCeMoNk3yIam

What would currently be the best way to use code-splitting and hypernova ssr? I found this article, but I'm not sure if this is still a reliable approach. Also, I dug into react-loadable and now wanted to try out react-loadable together with hypernova. Since in their examples they use ReactDOMServer.renderToString it's easy for them to have a context. How could I accomplish such things as Loadable.Capture with hypernova?

Arian Meidow

@sPaCeMoNk3yIam

More specifically: How can I pass and return modules that were captured? I see in getComponent the possibility to access context and pass it to a modified hypernova-react#renderReact, but the return value of getComponent can only be the generated html.

Arian Meidow

@sPaCeMoNk3yIam

Also, the return value of hypernova-node (hypernova-client) is only html.

Daniel Taborda

@danieltaborda

hey

quick question if someone can help, I m having a problem: When a component rendered on server has events like onClick they got lost when rendering the markup on the server along with the js bundle!!

did any one had this issue how to solve it if any one know!

Jordan Harband

@ljharb

@daneltaborda that's by react's design; events are exclusively clientside

your HTML should work without any javascript.

Daniel Taborda

@danieltaborda

@ljharb I can see that i gor from the /batch call all the required data"html" the hidation data js plus adding the client.js howeaver it doesnt bind events when it got re-rendered on the server after the view from php is presented to the user.

i would expect the client.js to do that work out of the box isn't it?

yes events are client side we are clear on that. that is why i m expecting the clinet.js to re-bind the existing events like onClick={} on each component rendered from the hypernova node server.. but that is not happening! stangly

this is essentially like the screenshot "HTML page rendered by Blad in Laravel Server" in https://itnext.io/strangling-a-monolith-to-micro-frontends-decoupling-presentation-layer-18a33ddf591b

any one has any idea if its missing something like waiting for the page to load or any special build on the node side?

Jordan Harband

@ljharb

it definitely should. It might be a bug in the php bindings (which we don’t maintain)

Daniel Taborda

@danieltaborda

I did see that in this case where it works, the call to batch happens from node, and there is a client and server js files together, along with the component being rendered using renderReact "import { renderReact } from 'hypernova-react';" is this the right and only way to get the event back on client?

Justin Gordon

@justin808

@sPaCeMoNk3yIam Are you still interested in SSR with code splitting? I might be able to help. My team and I specialize in this type of tech. I'm the author of https://github.com/shakacode/react_on_rails. We have a version of React on Rails that uses react-loadable and we're moving over to using https://loadable-components.com/ since react-loadable is no longer recommended by the React team. You can reach me at justin@shakacode.com.

Where communities thrive

People

Repo info

Activity