Ответы пользователя по тегу Server-Side Rendering
  • Полноценный пример SSR для react/redux?

    Да состояние собирается на сервере для каждого клиента (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__ и вообщем-то все, глобальное состояние передано, компонент уже отрендерен, стоит учитывать что результаты при клиент-рендере и при сервер-рендере должны быть всегда одинаковыми, так же не использовать методы доступные браузеру, но не доступные серверу (на уровне моунта и первого рендера) и хорошенько следить за своим кодом в плане памяти, иначе при какой-либо утечке, память на сервере не будет вычищаться после каждого рендера.
    ---
    Как-то так, надеюсь помог, хотя там еще довольно много заковык
    Ответ написан
    20 комментариев