Где рендеринг JSX происходит в рабочем процессе React SSR? - PullRequest
Новая
       5

Где рендеринг JSX происходит в рабочем процессе React SSR?

0 голосов
/ 28 марта 2019

Я продолжаю читать учебные пособия, такие как , этот , который объясняет рендеринг на стороне сервера (SSR), который комментирует что-то вроде: «А теперь все запросы к вашему серверу возвращают полностью визуализированный HTML. "

Насколько я понимаю, babel просто анализирует реагирующий JSX в ванильный JavaScript, который затем может быть передан клиенту и обработан. Эта концепция отражена в самих руководствах, которые все импортируют некоторый тип файла «bundle.js» или другой. Однако они продолжают говорить так, как будто JSX полностью отображается в HTML на сервере , затем отправляется клиенту. Это больше похоже на поведение движка вида, такого как pug или ejs ...

Эта ошибка в рассуждениях мешает моему прогрессу, потому что я чувствую, что что-то упустил. Может кто-нибудь объяснить?

1 Ответ

0 голосов
/ 01 апреля 2019

Насколько я понимаю, babel просто анализирует реагирующий jsx на ванильный js, который затем может быть передан клиенту и обработан.

Это одна возможность, и самая распространенная,Тем не менее, JSX - это просто язык для описания дерева элементов React, которое все еще необходимо визуализировать в HTML, чтобы стать видимым в веб-приложении.В некотором смысле, перевод кода JSX является ортогональным к вопросу рендеринга на стороне сервера.Рабочий процесс может быть представлен этим (упрощенным) конвейером: 


 -----   (1)    --------------------   (2)    -----------
| JSX | -----> | React element tree | -----> | HTML tree |
 -----          --------------------          -----------

Шаг (1) обычно выполняется во время развертывания путем интеграции Babel в процесс сборки.Однако шаг (2) может первоначально выполняться клиентом или сервером, в зависимости от того, как настроен ваш проект.Когда веб-приложение запрограммировано для вызова чего-то вроде ReactDOM.render(<MyApp />, root), клиент начинает с простого HTML-документа и должен расширить его до дерева DOM.

С SSR у нас происходит шаг (2)на сервере, таким образом предоставляя расширенное дерево DOM клиенту, даже до выполнения кода JavaScript.Этот процесс может напоминать механизм шаблонов, но все, что он делает, это запускает шаг рендеринга React (см., Например, ReactDOM.renderToString).Остальная часть логики и состояния представления обрабатывается клиентом.Это достигается с помощью метода hydrate, который присоединяет необходимых слушателей к компонентам, отображаемым сервером.

В этом сообщении в блоге упоминается множество преимуществ от выполнения SSR:

Теперь пользователю не нужно ждать загрузки вашего JS и он получает полностью визуализированный HTML-код, как только первоначальный запрос возвращает ответ.

Представьте себе огромное улучшениепользователи, перемещающиеся по медленным сетям 3G.Вместо того, чтобы ждать загрузки веб-сайта более 20 с, вы почти мгновенно получаете контент на их экран.

[...]

А теперь все запросы, отправленные на ваш сервервернуть полностью визуализированный HTML.Отличная новость для вашего SEO-отдела!

Теперь сканеры увидят ваш сайт как любой другой статический сайт в Интернете и будут индексировать весь контент, который вы отображаете на сервере.

Итак, подытожим,Два основных преимущества, которые мы получаем от SSR:

  • Более быстрое время для первоначального отображения страницы
  • Полностью индексируемые HTML-страницы
...