Как использовать React в продакшене?

Question

[OlegCinema]

Привет. Пытаюсь найти ответ на свой вопрос. Как лучше организовать работу: разделить полностью фронтенд и бэкенд и выложить на разных веб-серверах, или все же прикрутить фронтенд на реакте к бэкенду? Какой подход лучше? И почему? Помогите, пожалуйста.

Стоит ли делать SPA с реактом, а взаимодействие с сервером сделать через REST?

Comments

[Владислав Лысков]

во втором варианте ты не получишь ssr, а в первом непонятно зачем разносить по разным веб-серверам

[OlegCinema]

Объясните, пожалуйста, нормальным языком, если можно, что такое SSR? Не могу понять с гугла

Answer 1

[Даша Циклаури]

делить на два - API + SSR более гибко и в плане независимой разработки и масштабирования( к примеру для SSR необходимо 5 инстансов, в то время как для API возможно меньше)

если объединять все в одно, то получается менее гибко, но выигрыш в скорости разработки (скорее всего, но это неточно зависит от инструментов)

тому пример возможности next.js там можно и апи и ССР объединить в одно приложение, но стоит ли?

Comments

[OlegCinema]

А если просто отдавать статику через NGINX?

[Даша Циклаури]

OlegCinema, статику само собой

[OlegCinema]

Даша Циклаури, я просто немного не понимаю, чем обычная выдача статики на чистом NGINX хуже использования фреймворков типа next.js? Объясните пожалуйста

[OlegCinema]

Даша Циклаури, Вообще, зайду по-другому:
Я сделал веб-приложение на React + redux, которое берёт данные с бэкенда, находящимся, допустим, на api.domen.org.Теперь я хочу задеплоить фронтенд в продакшн на domen.org, чтобы работало на подобие ВК. Что мне надо знать и какие операции проделать? Фронт писался на чистом React и Redux, без фреймворков.

[Даша Циклаури]

OlegCinema, зайди к себе на сайт, нажми посмотреть исходный код страницы (!не элемент, а именно код страницы), он у тебя пустой, только скрипты, стили и голова
примерно так видит твой сайт поисковый робот, если это не критично, то nginx+api
а если критично, то это уже другая история

[OlegCinema]

Даша Циклаури, то есть фреймворки работают чисто на СЕО или здесь есть ещё какой-то вопрос безопасности?

[Даша Циклаури]

1) СЕО
2) на сервере страница рендерится быстрее (во многих случаях) из-за более мощных процессоров и рядом стоящего АПИ, тем самым пользователь быстрее увидит вменяемый контент, а не прелоадер
3) если контекст неавторизованного пользователя, то можем класть в кэш всю страницу и отдавать моментально

[Даша Циклаури]

OlegCinema, вопроса безопасности как такого не ставится перед SSR, токены ты хранишь в куках, чтобы иметь к ним доступ из запроса (а не в локал сторедж)

какой вопрос безопасности интересует? токены должны быть подписаны ключем на апишке, тогда их не подменишь

[OlegCinema]

Даша Циклаури, Я в целом за jwt токены и OATH-авторизацию

[OlegCinema]

Даша Циклаури, А вообще, какой фреймворк посоветуете? NextJs?

[OlegCinema]

Даша Циклаури, Меня ещё сильно интересует вопрос: если написал чистое приложение на реакте, потом сложно будет связать с next.js и лучше сразу использовать его, до написания?

[Даша Циклаури]

OlegCinema, если работаешь в компании, - узнавай у девлида, он тебе скажет какой фреймворк, можно и замому что-то написать

если в одиночку, то некст выполняет свои функции (есть еще gatsby, да и не только, но ничего за них не скажу)

если приложение написано по уму - все разбито на компоненты, данные все в редаксе, и получаются только из редакса, то несложно, по сути некст требует только существование абстракции "страница", перед рендерингом которой будут получаться все асинхронные данные для нее, все остальное (то, что напрямую дергается асинхронно из компонентов) не будет отрендерено на сервере

Answer 2

[foterio]

Обычно я всегда делаю на разных инстансах back-end и front-end. В дальнейшем так проще масштабировать в случае повышения загрузки, просто добавите памяти/ядер.
На каждом сервере с помощью PM2 вы сможете развернуть несколько кластеров ноды. Плюс к этом если добавить memcached вообще будет огонь.

Comments

[foterio]

А ну и да, очевидно что всю статику лучше отдавать через CDN. Например, bundle.js тоже отдаю через CDN.

[OlegCinema]

foterio, подскажите, пожалуйста, где можно прочитать или посмотреть, может какой-то курс пройти по сис. администрированию и развёртыванию больших приложений на базовом уровне?

[foterio]

OlegCinema, я научился этому сам, искал на youtube на русском и английском, читал статьи на medium. Тут главное правильная постановка задачи. В процессе развертывания проекта сталкиваешься с проблемами, и решаешь их по мере поступления ;) Если есть вопросы какие-то конкретные постараюсь помочь, обращайтесь ;)