Как лучше организовать пререндеринг в react и php?

Question

[4ch23]

Стоит задача - разработать публичное приложение на React. Учитывая что это react весь контент страницы будет формироваться джаваскриптом.
Какие есть решения для автоматического пререндеринга html страниц по роутам реакта?
В теории я вижу это так:
Клиент делает запрос на /contacts/. Там ему отображается заранее сгенерированный (при очередной сборке JS) contacts.html в котором есть

После загрузки bundle.js у клиента отрисовывается react приложение, все довольны - поисковые роботы, клиент, и владельцы сайта.

Ключевой момент в том что бы после каждой новой сборки JS можно было легко и просто перерендерить все *.html
Бекенд на PHP.

Comments

[Antony Tkachenko]

С реактом не работал, но то, что вы ищете называется ssr (server side rendering).
Думаю на эту тему в Гугле найдете нужное решение.

Answer 1

[Дмитрий Дерепко]

npm build
Это должно запустить что-нибудь из WebPack/Gulp/Grunt/etc., которое в свою очередь сделает весь билд в нужной директории(dist, build - стандартные названия папок. настраивается в конфигах)
После этого у вас будет весь JS в одном или нескольких файлах и несколько End point'ов (index.html, contacts.html, ...)
В чем вопрос заключается?

Comments

[4ch23]

я использую Create React App, он генерирует один index.html с

<div id=root />
<script....>

[4ch23]

и мне скорее нужно что бы в сгенерированном HTML уже были готовые компоненты (отрисованные в React), а не просто голый HTML с вызовом бандла

[Дмитрий Дерепко]

4ch23, что за Create React App?

и мне скорее нужно что бы в сгенерированном HTML уже были готовые компоненты (отрисованные в React), а не просто голый HTML с вызовом бандла

Зачем тогда нужен React?

[4ch23]

Какие-то компоненты, например, могут тянуть инфу по AJAX и только после этого её отображать. npm build в этом случае не сможет отобразить информацию из этого запроса.

[Дмитрий Дерепко]

4ch23, вот именно. теперь понимаете, почему нельзя получить статичного html файла со всеми состояниями?

[4ch23]

Дмитрий Дерепко,
1. Сайт будет работать без перезагрузок, интерактивно, красиво, модно, молодёжно.
2. Последние 3 года пишу на реакте + rest api, полюбил их и не хотелось бы делать шаг назад и писать опять на *.php всё

[4ch23]

Дмитрий Дерепко, уверен что можно, вопрос как.
Селениум ведь как-то тестирует UI, и ждёт окончания ajax и пр. пока не рыл в него, но возможно он как-то поможет

[Дмитрий Дерепко]

Реакт создает JS сценарии, которые пользователь делает. Все состояния HTML страницы переходят с помощью JavaScript'а (в который скомпонуется ваш React JS код).
Чтобы перейти от состояния к состоянию (пользователь нажимает на "всплывашку", которое открывает дополнительное "окно") нужно выполнить сценарий, который привязан к данному действию.
Selenium работает очень просто. Он берет движок браузера и выполняет нужный ему сценарий (кликнуть по ссылке "авторизоваться"). Selenium - это имитация пользователя.
Selenium, использует то состояние, которое получается в итоге манипуляций с DOM'ом, которые делает ваш JS (React) код.
Откройте ваш проект с React JS и откройте DevTools, кликайте на интерактивные элементы и смотрите, как меняется DOM состояние "на лету".

P.S. За 3 года можно было хотя бы разок поинтересоваться, как устроены все JS фреймворки...