Полноценный пример SSR для react/redux?

Добрый день! Подскажите пожалуйста полноценный пример server side rendering для react/redux? Есть такое?
Не понимаю как сделать комопненты универсальными, наверное надо передавать как-то стейт с бека на клиент?!
Могу ли я сразу на сервере передавать главный компонент при рендере?
Хоть что-то посоветуйте на эту тему.
Спасибо!
  • Вопрос задан
  • 8892 просмотра
Решения вопроса 1
Да состояние собирается на сервере для каждого клиента (request'a), скажем на уровне мидлвара мы собираем состояние (текущего авторизованного пользователя, какие-то другие глобальные данные), далее отрабатывает обработчик маршрута, мы получили данные какой-то страницы из бд и передали их как контекст, примерно так:
import React from 'react';
import { StaticRouter } from 'react-router'
import { Provider } from 'react-redux'
import ReactDOMServer from 'react-dom/server';

import App from './client/components/App.jsx'

ReactDOMServer.renderToString(
	<Provider store={ReduxStore}>
		<StaticRouter
			location={Url}
			context={Context}>
			<App/>
		</StaticRouter>
	</Provider>
);

Где, ReduxStore сгенерированное нами глобальное состояние (redux) запроса, Url запрошенный урл, Context контекст (будет передано как this.props.staticContext в компонент). Реакт вытянет нужный контейнер роута (по вашим маршрутам в App) и передаст ему контекст, компонент рендерится исходя из полученных данных. Результатом работы метода renderToString будет html строка (размеченная реактом), которую мы шаблонизатором или как угодно впиливаем в блок моунта компонента (в верстке), дополнительно в шаблонизатор передаем сгенерированное состояние, в документации выглядит вот так:
window.__PRELOADED_STATE__ = JSON.stringify(preloadedState || {}).replace(/</g, '\\u003c')

Теперь что происходит после того как страница загрузилась и подхватились клиент-скрипты? Все просто мы подхватываем состояние из window.__PRELOADED_STATE__ и вообщем-то все, глобальное состояние передано, компонент уже отрендерен, стоит учитывать что результаты при клиент-рендере и при сервер-рендере должны быть всегда одинаковыми, так же не использовать методы доступные браузеру, но не доступные серверу (на уровне моунта и первого рендера) и хорошенько следить за своим кодом в плане памяти, иначе при какой-либо утечке, память на сервере не будет вычищаться после каждого рендера.
---
Как-то так, надеюсь помог, хотя там еще довольно много заковык
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы