What is an isomorphic application and how to create one?

M

moiTelephon2018-10-01 13:15:02

JavaScript

moiTelephon, 2018-10-01 13:15:02

What does isomorphic application on react + nodejs mean? I do not quite understand what should happen in the end?
Just need to add

app.get('/', (req, res) => {
  const componentHTML = ReactDom.renderToString(<App />);

  return res.end(renderHTML(componentHTML));
});

const assetUrl = process.env.NODE_ENV !== 'production' ? 'http://localhost:8050' : '/';  // Это url сервера же, не фронта?

function renderHTML(componentHTML) {
  return `
    <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Hello React</title>
          <link rel="stylesheet" href="${assetUrl}/public/assets/styles.css">
      </head>
      <body>
        <div id="react-view">${componentHTML}</div>
        <script type="application/javascript" src="${assetUrl}/public/assets/bundle.js"></script>
      </body>
    </html>
  `;
}

?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Spirin, 2018-10-01
@moiTelephon

Read any topical article on this topic.
1. In the simplest case, you have two entry points server (with ReactDOMServer.renderToString) and client (with ReactDOM.hydrate).
2. State can be received on the server and transmitted to the client, something like this:
In configureStore:

export = function (initialState: {} = {}) {
  if (__CLIENT__) {
    initialState = JSON.parse(JSON.stringify(window.__INITIAL_STATE__));
  }

  return createStore(combineReducers({ ...rootReducer }), initialState, enhancer);
}

3. No global variables for states that change from client to client (locales, themes, etc.). Node processes many requests at the same time, and client information can get mixed up when passing configurations to global modules or when using global states.
4. Getting data on the server and the client is still a pain in the ass. See how the react-frontload library is implemented.