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)
the issue is that the rendering won't wait for results.
a server render must be 100% synchronous and produce a string
(perhaps react 17 will change this, but that's not out for awhile)
iow you're pushing a big rock uphill
and it will break hard with react 17
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?
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)
);
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/
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);
}
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
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?
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!
your HTML should work without any javascript.
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?
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?