Задать вопрос
@moiTelephon
javascript

Что такое изоморфное приложение и как его создать?

Что значит изоморфное приложение на react + nodejs? Не совсем понимаю, что в итоге должно получиться?
Просто нужно добавить 
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>
  `;
}

?
  • Вопрос задан
  • 344 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Почитайте любую тематическую статью на эту тему.
1. В самом простом случае у вас две точки входа server(с ReactDOMServer.renderToString) и client(c ReactDOM.hydrate).

2. State можно получать на сервере и передавать на клиент, примерно, так:
<script>window.__INITIAL_STATE__ = json.stringify(initialState);</ script>

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

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

3. Никаких глобальных переменных для состояний изменяющихся от клиента к клиенту(локали, темы и прочее). Node обрабатывает множество запросов одновременно и информация клиентов при передаче конфигураций в глобальные модули или при использовании глобальных состояний может перемешаться.
4. Получение данных на сервере и клиенте тот еще головняк. Посмотрите как реализована библиотека react-frontload.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Рекламный пост
16 февр. 2025, в 19:54
500 руб./за проект
Надо найти рабочую связку ustd/uzs и рассказать как ее проворачивать
16 февр. 2025, в 17:15
1000 руб./за проект
Docker на развертывание Django + React
16 февр. 2025, в 15:54
2500 руб./за проект
Ещё заказы