ReactJS рендеринг на стороне сервера против рендеринга на стороне клиента

61

Я только начал изучать ReactJS и обнаружил, что он дает вам два способа визуализации страниц: серверную и клиентскую. Но я не могу понять, как использовать его вместе. Это два отдельных способа создания приложения или их совместное использование?

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

  • 0
    Короткий ответ, НЕТ - вы можете отделить, отправить статический HTML и полностью изменить его в клиентской визуализации. Добавили подробности в мой ответ.
Теги:
client-server

3 ответа

70
Лучший ответ

Для данного веб-сайта/веб-приложения вы можете использовать реакцию как на стороне клиента, так и на стороне сервера или на обоих.

Client-Side

Здесь вы полностью используете ReactJS в браузере. Это простейшая настройка и включает большинство примеров (в том числе на http://reactjs.org). Исходный html, отображаемый сервером, является заполнителем, и весь пользовательский интерфейс отображается в браузере после загрузки всех ваших скриптов.

на стороне сервера

Подумайте о ReactJS как обманчивом сервере на стороне сервера (например, jade, handlebars и т.д.). Html, отображаемый сервером, содержит пользовательский интерфейс, как и должно быть, и вы не ждете загрузки каких-либо скриптов. Ваша страница может быть проиндексирована поисковой системой (если не выполняется какой-либо javascript).

Поскольку пользовательский интерфейс отображается на сервере, ни один из обработчиков событий не будет работать, и нет интерактивности (у вас есть статическая страница).

Оба

Здесь первоначальный рендер находится на сервере. Следовательно, html, полученный браузером, имеет пользовательский интерфейс, как и должно быть. После загрузки сценариев виртуальная DOM снова отображается повторно для настройки обработчиков событий ваших компонентов.

Здесь вы должны убедиться, что вы повторно визуализируете тот же самый виртуальный DOM (компонент root ReactJS) с тем же props, который вы использовали для рендеринга на сервере. В противном случае ReactJS будет жаловаться, что виртуальные DOM на стороне сервера и на стороне клиента не совпадают.

Так как ReactJS различает виртуальные DOM между re-render, реальный DOM не мутируется. Только обработчики событий привязаны к реальным элементам DOM.

Поделиться
  • 1
    Так что в случае «обоих» мне нужно написать один и тот же код дважды »один для рендеринга сервера и один для воспроизведения этого DOM на клиенте - правильно?
  • 10
    Вам нужно запустить один и тот же код дважды. Один раз на сервере и один раз на клиенте. Тем не менее, вам нужно написать свои компоненты, чтобы принять это во внимание - например, вы не должны выполнять асинхронную выборку данных в componentWillMount() , так как он будет запускать как клиент, так и сервер. Вам также понадобится стратегия извлечения данных заранее на сервере и сделать их доступными для первоначального рендеринга на клиенте, чтобы убедиться, что вы получите тот же результат.
Показать ещё 6 комментариев
9

Источник изображения: Инженерный блог Walmart Labs

Изображение 2713

Изображение 2714

NB: SSR (рендеринг на стороне сервера), CSR (рендеринг на стороне клиента).

Основное различие заключается в том, что с SSR ответ сервера для браузера клиентов включает HTML-страницу страницы, которая будет отображаться. Также важно отметить, что, хотя с помощью SSR страница становится быстрее. Страница не будет готова для взаимодействия с пользователем, пока файлы JS не будут загружены и браузер не выполнит React.

Один недостаток заключается в том, что SSR TTFB (время до первого байта) может быть немного длиннее. Понятно, потому что сервер занимает некоторое время, создавая HTML-документ, что, в свою очередь, увеличивает размер ответа сервера.

Поделиться
1

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

Вам нужно будет написать свои компоненты с обеими способами, в результате, в основном, чтобы установить if везде, чтобы определить, находитесь ли вы на клиенте или сервере, а затем выполняете либо запрос БД (или независимо от того, что подходит на сервере) или вызов REST (на клиенте). Тогда вам придется писать конечные точки, которые генерируют ваши данные и выставляют их клиенту, и там вы идете.

Снова, с удовольствием узнаем о более чистом решении.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню