Как с помощью php отдать react?

Question

[SidVisceos]

Суть вопроса в заголовке.
Много лет пишу на php. Когда нужна интерактивность - делал вкрапления jQuery в html. Наткнулся на мнение что jQuery уже в прошлом, его теснят фреймворки типа react. Решил почитать за этот react. Основы то понятно, строится целый проект сразу на react, весь фронт рисует js посредством react.
Но мне не понятно как это всё добро можно отдать пользователю с бекенда. По умолчанию во всех примерах пользователю вываливается сразу весь react проект. Но... Так можно только банальный лендинг сделать. Как поступить если например, пользователь пришёл с определенного ip и ему нужно отдать 404й редирект (сделать вид что файлов в принципе нет), а если с другого ip то запросить логинпароль и отдать этот самый react.
Я что то упускаю на концептуальном уровне.
Гуглопоиск не помог, по моему вопросу он выдаёт связки react->api->php, это совсем другое.

Comments

[Adamos]

Это совсем то. Реактивные фреймворки используют бэкенд только как API: послал запрос - получил данные - изменил страницу в соответствии. В том числе - сами обрабатывают ответы с ошибками 50х и 40х.

[godsplane]

1. Можете посмотреть в сторону next.js, но о php забыть
2. можно вместо jquery использовать какой нибуь alpinejs

[Виктор]

Для ответа на вопрос нужно изучить HTML и сеть

[SidVisceos]

Виктор, с html знаком не по наслышке. Начинал с wml)

[SidVisceos]

Adamos, хм... А реактивные фреймворки могут свои компоненты получать по api?

[Adamos]

SidVisceos, компоненты реактивных фреймворков - это скрипты, независимые от состояния системы.
Их необязательно тянуть через API.

[SidVisceos]

Adamos, как тогда не отдать клиенту то что ему нельзя отдавать?
Например: есть админка написанная на реакте. Сторонний пользователь может туда зайти получается. Он ознакомится с элементами (увидит какие средства администрирования имеются), но у него не будет только данных которые api не отдаст стороннему пользователю и грубо говоря кнопочки работать не будут.

[Виктор]

SidVisceos, тогда в чем проблема с управлением тегом script?

[Adamos]

SidVisceos, форму авторизации ему реакт нарисует, если он не авторизован, а не элементы.

Answer 1

[Just_4_Fun]

Надо разделить приложение на фронт и бэк в таком случае.

React, vue, angular, svelte делят приложение на компоненты. Вся страница это один большой компонент (внутри него маленькие) и для переключения этих компонентов используются route библиотеки. Они даже меняют url в адресной строке, но по факту сервер отдаёт один и тот же html, js, css, а какой компонент отобразить решает route библиотека уже на клиенте. Можно рендерить js на сервере с помощью next.js, но это другая история.

PHP здесь уже в связке с каким нибудь symphony отдаёт ТОЛЬКО объекты JSON. Позволяет создать объект, удалить, изменить, получить и прочая логика. Бэк связан с базой данных. Обычно для удобства к нему кидают Swagger или OpenAPI. Я здесь описываю REST API. Можешь реализовать gRPC или GraphQL

Чтобы с бэка получить данные на фронт юзают такие библиотеки как redux (для react), так называемые state менеджеры. Бэк ничего не знает о фронте! Вместо react приложения работающего в браузере можно мобильное или нативное приложение разработать без изменений в бэкенде.

А деплоиться это всё может так:

Берёшь веб-серевр (apache2 как пример). Настраиваешь reverse-proxy. Он обслуживает порт 80 или 443. Задача его перенаправлять запросы, например в docker контейнер, где у тебя задеплоен PHP на порт 3001 например, которые начинаются с domain.com/api. Всё остальное летит на другой docker контейнер с ip 3002 где у тебя задеплоен фронт. Можно конечно ещё запариться. Так как фронт у нас это html, js и css + картинки и это статика, то его можно на CDN закинуть и получать за мгновение из любой точки мира. А бэк это "лёгкий" (в сравнении с фронтом) JSON.

Заметь фронт и бэк разные сущности. Фронт знает о бэке, а бэк о фронте нет.

Так что отдавать react через php ненужно

Answer 2

[Ипатьев]

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

jQuery уже в прошлом

это правда

его теснят фреймворки типа react

а это уже чушь собачья
jQuery - это был костыль, позволявший выполнять определенные задачи, которые было невозможно или слишком сложно выполнить на чистом JavaScript. Но уже больше 10 лет нужда в этом костыле полностью отпала
К фреймворкам типа React этот костыль не имеет никакого отношения вообще.
Для замены jQuery вам нужно просто выучить Яваскрипт.

Реакт же - это, условно говоря, способ построения приложения. Его можно учить, а можно не учить. Вы можете продолжать использовать обычный подход, когда HTML рендерится на сервере в ответ на каждый запрос.

При использовании реакта, сначала загружаются его статические файлы. обычно это делается через отдельный веб-сервер, на котором крутится приложение, написанное на js. и эту вашу проверку можно делать там.
но в принципе вы можете отдавать их и РНР скриптом. HTML отдавать через РНР умеете? Ну вот и отдавайте.

Но повторюсь, это только если вам действительно нужен реакт. А для замены jquery он не нужен.

404й редирект

для начала, такой вещи, как "404й редирект" в природе не существует.
Бывает либо редирект (коды ответа 3хх), либо 404. Два НТТР статуса вы никогда не отдадите.

при этом сама по себе дурацкая задача "если пользователь пришёл с определенного ip и ему нужно отдать 404" вообще никакого отношения к обсуждаемому вопросу не имеет. И решать ее по-хорошему надо на уровне веб-сервера. Если вообще надо, в чем есть большие сомнения.

Comments

[Александр Афанасьев]

Все конечно верно, но ответа в вашем спиче нет.

[SidVisceos]

Резюмирую:
Начал использовать jQuery чтоб не писать простыни кода на js. Теперь уже jQuery не в почёте, от него нужно отказаться и писать простыни кода на js как я это делал 2000х. Верно?

[Ипатьев]

Нет. Чтобы не писать "простыни кода", надо сначала научиться читать по-русски и прочесть ответ ещё раз. А потом выучить яваскрипт :)

[SidVisceos]

Ипатьев, мне на глаза попался htmx) теперь ни jQuery ни js не нужны. Почему я раньше этого не видел....

Answer 3

[Александр Афанасьев]

Все просто: с помощью пхп отдаешь клиенту пустой html в котором есть подключение app.js и в боди html есть что то типа
По крайней мере на вью так.

Есть и другой подход. Пхп вообще не участвует в генерации штмл, он написан один раз, статически, отдает его клиенту nginx.

Проверка ip средствами веб сервера, но если хочется пхп - проверяешь и отдаешь 404 без 'div id=app

Comments

[SidVisceos]

Проверка ip - для примера указал.

С кейсом когда php отдаёт html с app.js - тут как понимаю, если php его не отдал, то ничего не мешает ручками запросить его?

Answer 4

[Евгений]

На проде обычно js код приложения проходит обфускацию и минификацию, понятно что это от не гарантия, но просто так открыть код и причитать не получится.

В SPA всё приложение отдается целиком, дальше общается с бэком через api, получая только данные, в зависимости от состояния и полученных данных приложение отображает информацию. Т.е. в приложении изначально данных нет. Более того, приложение не обязательно должно общаться только с одним бэкм(доменом), оно может слать запросы куда угодно, где будут готовы дать ему ответ, таким образом реализуется структура микросервисов, когда каждый сервис выполняет свою задачу независимо от другого. Например учётные записи пользователей, номенклатура, остатки и цены, заказы - это всё могут быть независимые сервисы.

Если не хотите всем подряд светить js файл с аппом, сделайте стандартную страницу авторизации на php, авторизованным пользователям в ответ отдавайте js файл приложения, который после получения будет запускаться.

Answer 5

[Тимофей]

Обычно люди использующие php выбирают vue.js, для laravel существует inertia.js роутинг происходит на php

Answer 6

[D7ILeucoH]

Много лет пишешь на php и задаёшь такие вопросы? Ты что, windows forms на php писал?
Писать надо так, чтобы было не важно, что на бэке. Просто я удивлён что ты не слышал о rest api...

Comments

[SidVisceos]

Вы считаете себя ясновидящим, телепатом? С чего вы взяли что я не слышал о rest api?

Answer 7

[greenst]

Если это готовый react проект, то на него можно переадресовывать какой то из роутов в php (например, /you-react-project). При обращении по корневому пути "/" можно делать все необходимые проверки(пользователь, ip) и переадресацию средствами php.
Но так же можно встроить реакт элементы на страницу, генерируемую на php. Почти также как в случае модификации DOM из jQuery. Надо просто в скриптах указать js файл, в котором через createRoot выбрать любой подходящий элемент, который будет "дополнятся" реактом.

Comments

[SidVisceos]

А пользователь в таком случае не заходя на "/" разве не сможет сам зайти на "/you-react-project"? Просто ручками вбив адрес