airbnb/hypernova

A service for server-side rendering your JavaScript views

Mark Larah

@magicmark

Also good reading: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

Rahul Basu

@rahulbasu710

@/all is there any way to find extensive docs on hypernova-react please. Very intrigued with the concept!

Also am currently using webpack isomorphic tools. How big of a jump or trade-off is the usage of this ?

Terence Pae

@tpae

is it possible to handle component compositions?

Jorge Bucaran

@jorgebucaran

Hi, I am looking for documentation or help with writing my own hypernova bindings for Hyperapp (github.com/hyperapp/hyperapp).

Writing your own bindings doesn't seem so hard. I was looking at hypernova-react implementation and it's just a few lines of code.

Serge van den Oever

@svdoever

Anyone having experience with using hypernova/hypernova-react where components make async calls and waiting for these async calls while rendering a component at server-side? I want to wait for all async calls using something like domain-task (npm, par of .net core javascriptservices), and do a rerender of the component after all tasks (promises) are fulfilled. I would like to provide an initial redux store state as data to the hypernova call, and as a result of the component rendering get the new store state as data for the component hydration at client side. I don't see any infrastructure in hypernova/hypernova-react to support this case. Any ideas?

Jordan Harband

@ljharb

@svdoever it's a terrible idea to make async calls on the server; so you'd want to do that only in componentDidMount

Serge van den Oever

@svdoever

@ljharb why is it terrible? Otherwise I need to know exactly which data to pass to my components, and have the ability to call for this data in the same way as my components from client side will request this data. In my case I have my server running on ASP.NET with C#, and I make service calls from my reducers using TypeScript. I think another advantage is I can delegate the server-side rendering of the initial state of my Progressive Web App to a separate component server.

Jordan Harband

@ljharb

for one, because react rendering is still sync, not async.

i should have clarified; make all your async calls on the server before rendering your component tree

Serge van den Oever

@svdoever

In my case I want to to an initial server-side rendering of my PWA. I only have 3 types of input parameters: my URL, my cookies and if needed context data that I know of on the server when I need to render my PWA for a given deep link (will be empty in most cases). I prefer not to write different code for rendering a complete PWA on server side with respect to rendering on the client side. My ideas it to wrap my PWA "top level" component with a Redux store with this initial data, and serialize the resulting Redux store for hydrating on the client. In this case there is no difference in the code for server-side rendering and client-side rendering. If I need to do rendering of my complete PWA based on initial data (required for SEO purposes) I need to have complex logic to differentiate between the two approaches...

Jordan Harband

@ljharb

i'm suggesting that your overall architecture needs tweaking

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.

Where communities thrive

People

Repo info

Activity