Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    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
    k
    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?