Как работает серверный рендеринг с React?

#javascript #nodejs #reactjs

При серверном рендеринге в React сервер отдаёт просто отрендеренный HTML или HTML
c подключенными обработчиками событий и какими-нибудь данными для JS (чтобы после инициализации
на сервере клиентский JS мог сразу продолжить работу)?

Т.е. если у меня, например, есть JS скрипт, который стилизует select, превращая select
в набор div элементов с обработчиками событий выбора элемента и т.д., то если я выполню
серверный рендеринг, то у меня просто готовые div-ы вместо select придут, или к ним
ещё как-то будут добавлены и уже подключены события?

Просто ведь если события после серверного рендеринга не будут прикручены, то непонятно
как их потом прикрутить на клиенте.
    

Ответы

Ответ 1

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

На сервере выполняется полная генерация HTML кода, 1 в 1 как на клиентской части,
при этом не происходит каких либо привязок обрабочиков на события. Далее вы передаете
этот HTML на клиент, и пользователь сразу видит страницу с нужным контентом. После
загрузки HTML начинается выполнение JS на клиенте, и React второй!  раз (теперь на
клиенте) начинает генерацию виртуального дом. После этого React сравнивает исходный
DOM с тем что он сгенерировал и если изменений нет - ререндера, не происходит, и идет
только привязка обработчиков событий. В обратном случае, если есть различия, то происходит
полный ререндер страницы.