← Назад ко всем вопросам

Что будет с Redux на клиенте при использовании SSR

1️⃣ Как кратко ответить

При использовании SSR (Server-Side Rendering) с Redux, состояние приложения (store) создается и заполняется на сервере, а затем передается клиенту. На клиенте это состояние используется для инициализации Redux store, что позволяет избежать повторного запроса данных и обеспечивает согласованность состояния между сервером и клиентом.

2️⃣ Подробное объяснение темы

SSR (Server-Side Rendering) — это техника, при которой HTML-код страницы генерируется на сервере, а не на клиенте. Это позволяет улучшить SEO и ускорить время загрузки страницы, так как пользователи получают полностью сформированную страницу от сервера.

Когда мы используем Redux в приложении с SSR, важно правильно управлять состоянием приложения, чтобы обеспечить согласованность между сервером и клиентом. Рассмотрим, как это работает:

  1. Создание состояния на сервере:

    • На сервере создается Redux store.
    • Выполняются все необходимые действия (actions) для получения данных и обновления состояния store.
    • После выполнения всех действий состояние store содержит все данные, необходимые для рендеринга страницы.

  2. Передача состояния клиенту:

    • Состояние Redux store сериализуется в JSON и встраивается в HTML-код страницы, который отправляется клиенту.
    • Это состояние передается в клиентский код через глобальную переменную, например, window.__PRELOADED_STATE__.

  3. Инициализация состояния на клиенте:

    • На клиенте создается новый Redux store, который инициализируется состоянием из window.__PRELOADED_STATE__.
    • Это позволяет клиентскому приложению начать работу с тем же состоянием, которое было на сервере, избегая повторных запросов данных.

Пример кода:

// Серверный код
import { createStore } from 'redux';
import rootReducer from './reducers';
import { renderToString } from 'react-dom/server';
import App from './App';
​
function handleRender(req, res) {
  // Создаем Redux store на сервере
  const store = createStore(rootReducer);
​
  // Выполняем действия для получения данных
  // store.dispatch(fetchData());
​
  // Рендерим приложение в строку
  const html = renderToString(<App store={store} />);
​
  // Получаем текущее состояние store
  const preloadedState = store.getState();
​
  // Отправляем HTML и состояние клиенту
  res.send(renderFullPage(html, preloadedState));
}
​
function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>SSR with Redux</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          // Передаем состояние клиенту
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
  `;
}

// Клиентский код
import { createStore } from 'redux';
import rootReducer from './reducers';
​
// Получаем состояние, переданное сервером
const preloadedState = window.__PRELOADED_STATE__;
​
// Создаем Redux store с начальным состоянием
const store = createStore(rootReducer, preloadedState);
​
// Теперь приложение может использовать этот store
  • Серверный код: Создает Redux store, выполняет необходимые действия для получения данных, рендерит приложение в строку и передает состояние клиенту.
  • Клиентский код: Инициализирует Redux store с состоянием, полученным от сервера, что позволяет избежать повторных запросов данных и обеспечивает согласованность состояния.

Использование SSR с Redux позволяет улучшить производительность и пользовательский опыт, обеспечивая быструю загрузку страниц и согласованное состояние между сервером и клиентом.

Тема: React
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки