Как работает серверный рендеринг React.js с объектами браузера в компонентах?

Question

[Максимка]

Услышал про серверный рендеринг в реакте, почитал, круто, здорово, захотел попробовать. Вроде вся механика понятна - компоненты можно отрендерить в строку с готовой разметкой и отдать её в респонс.
Суть вопроса вот в чём: что если у меня есть компонент у которого, к примеру, в методе componentWillMount() используется какой-нибудь localStorage или чего-нибудь с DOM? Как тогда у реакта получится корректно отрисовать компонент в серверном окружении Node, который о localStorage не знает. Т.е. речь идёт вообще о любых встроенных в браузер объектах.

Answer 1

[Максим]

Могу быть не прав, но я так понял, что все объекты браузера мокаются (как будто в тестах, то есть делается например "ложный localStorage", ведь это по сути объект у котрого есть getter и setter. Для тестов я использовал - mock-local-storage). "Мокнуть" можно и самому, для этого писать нужно в global, так как в node окружении глобальный объект не "window". Подробнее можно посмотреть в коде библиотеки.

Опять таки, давайте продолжим про localStorage, так как удобнее на конкретном примере. Почему мок нормально подойдет, как мне кажется? Потому что это будет как будто к вам на сайт зашел пользователь, у которого ничего в LS по вашему сайту не сохранено. Главное чтобы сработало: localStorage.setItem / getItem, и так как вы эти функции написали и объявили глобально - все получится (естественно, в коде у вас должно быть localStorage без window, либо нужно будет делать мок не просто в global, а в global.window - иными словами мы создаем в глобальом объекте объект window).

P.S. на практике я не делал серьезного SS рендеринга, поэтому буду рад услышать, мнение тех, кто уже разобрался. В зарубежных источниках есть информация (например), и даже неплохо разобраны вещи с асинхронными запросами, но тем не менее, хотелось бы увидеть еще.

Comments

[Максимка]

Вот мне тоже кажется что там что-то мокается хитрым образом, т.к. нам важнее не столько сама логика в компонентах и лишь их конечное отображение. Как я прокомментировал ниже, мне видится что там стоит внутри подобие PhantomJS.

[Максимка]

Кстати отдельное спасибо за твои 3 курса. Весьма доходчиво, правда мир реакта развивается быстрее чем ты успеваешь писать уроки :)

Answer 2

[_ _]

https://facebook.github.io/react/docs/component-sp...

Хук componentDidMount выполняется только на клиенте.
Соответственно, если вы используете тот же ref, чтобы выполнить какие-то действия с DOM, то имеет смысл это делать в этом хуке.

localStorage использовать в компонентах мне кажется неправильным. Вы же в нем состояние (или его часть) храните, а для управления состоянием у вас должен быть отдельный слой. В этом слое как раз можно сделать моки, которые описал Максим

Comments

[Максимка]

Сам localStorage, ровно как и выбранный мною хук, лишь для примера. Мне не важен конкретно localStorage или DidMount, я в проекте не использую эти две вещи вместе. Это мог быть любой другой встроенный объект браузера и любая другая логика в абсолютно любом хуке.
Мне важна сама механика, как обрабатываются такие моменты. Мне просто кажется что там под капотом какой-то PhantomJS, которые решает подобные проблемы.

[_ _]

Максимка: нет там никакого PhantomJS. Объекта window на сервере не существует.

[Максимка]

Александр Марченко: таки и я от том же, что не существует. Но рендерится же как-то все с этим делом.

[_ _]

Максимка: да епта строкой рендерится! Строится VirtualDom, сериализуется в строку. Что сложного-то?

[Максимка]

Александр Марченко: вы вообще читали вопрос? В вопросе я сказал что глобальных объектов браузера на сервере нету и что редеринг осуществляется в строку. Зачем вы повторяете мне сказанные мною вещи?)
Суть моего вопроса в том как модуль react-dom/server в логике компонентов обрабатывает появление сугубо браузерных объектов. Если у меня в хуке(lifecycle-методе) используется что-то такое, что удовлетворяет двум условиям: 1) существует лишь в браузерном окружении, 2) гарантированно влияет на отрисовку этого компонента, то как обрабатываются такие ситуации? Т.е. если отрисовка компонента зависит от того объекта, что есть только в браузере, то как оно может отрисоваться на сервере. Доходчиво спросил?)

[Aves]

Максимка:

как модуль react-dom/server в логике компонентов обрабатывает появление сугубо браузерных объектов

Бросает ошибку ReferenceError.

[Максимка]

Aves: Я в этом уже убедился) И как же остальные люди решают эту проблему?

[Aves]

Максимка: Уже же ответили: с браузерными объектами работают в componentDidMount, он на сервере не выполняется. Если что-то нужно для рендера в строку, делают моки.