Рендеринг на стороне сервера с помощью React

Немного о React

React — это внешняя библиотека JavaScript с открытым исходным кодом, которая создается и поддерживается сообществом разработчиков Facebook. Он используется для создания пользовательских интерфейсов или компонентов пользовательского интерфейса.

Однако это определение может быть не совсем понятно новичкам. У нас есть отличный пост в блоге, который проведет вас через краткое объяснение React, вплоть до его очень подробного технического описания, которое вы можете найти здесь.

Путешествие веб-страницы | От сервера к вашему браузеру

Чтобы понять, что такое рендеринг на стороне сервера, сначала важно получить общее представление о том, как веб-страница отображается на вашем экране, что показано на диаграмме ниже:

1. Всякий раз, когда вы вводите URL-адрес веб-сайта или нажимаете ссылку на веб-сайт, ваш браузер отправляет запрос на получение некоторых файлов на соответствующий сервер, указанный в URL-адресе.
2. Сервер отправляет некоторые файлы, такие как файлы HTML и JavaScript, в ваш браузер.
3. Ваш браузер загружает и «рендерит» или обрабатывает эти файлы, и вы можете просматривать запрошенную веб-страницу и взаимодействовать с ней.

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

Путь «обычной» веб-страницы с рендерингом на стороне клиента

Если углубиться в процесс, упомянутый в предыдущем разделе, у нас есть метод, известный как рендеринг на стороне клиента или CSR, который давно используется для отображения веб-сайта на экранах пользователей. Это поясняется на следующей диаграмме:

1. При вводе URL-адреса веб-сайта или переходе по ссылке на веб-сайт ваш браузер отправляет запрос на получение некоторых файлов на соответствующий сервер, указанный в URL-адресе.
2. Сервер отправляет файл HTML, который содержит ссылки на другие активы, такие как файлы изображений, файлы CSS и файлы JavaScript.
3. Браузер снова отправляет запрос на сервер и загружает все файлы, включая файлы CSS и JavaScript, на которые есть ссылки в файле HTML.
   1. Это может способствовать увеличению времени загрузки веб-сайта, если у пользователей плохое соединение, а файл JavaScript имеет большой размер.
4. Как только эти файлы загружены браузером, браузер выполняет фреймворк или библиотеку (например, React) и анализирует файлы JavaScript, которые отвечают за интерактивность веб-страницы.
   1. С точки зрения оптимизации скорости этот момент зависит от клиентского компьютера, и если клиент представляет собой маломощное оборудование, это может занять значительное время.
   2. Пользователь по-прежнему видит экран загрузки, когда выполняются эти шаги.
5. Веб-страница, наконец, загружается полностью, и пользователь может видеть и взаимодействовать с веб-страницей.

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

Это может занять огромное количество времени, так как зависит от производительности клиентского компьютера при выполнении фреймворка и анализе файлов JavaScript.

Путь рендеринга веб-страницы на стороне сервера

Объясняя это в одной строке, рендеринг на стороне сервера или SSR — это процесс использования веб-сайта фреймворка JavaScript на стороне клиента и рендеринга его в статический HTML и CSS на сервере, а не на клиенте, как это было в случае с CSR.

Ниже упоминается графическое представление пути, который проходит веб-страница с рендерингом на стороне сервера с помощью React:

1. При вводе URL-адреса веб-сайта или переходе по ссылке на веб-сайт ваш браузер отправляет запрос на получение некоторых файлов на соответствующий сервер, указанный в URL-адресе.
2. Сервер вместо того, чтобы просто отправлять ванильные HTML-файлы, как в CSR, отображает приложение в строку, используя функцию renderToString , импортированную из react -dom/server .
   1. Затем он внедряется в файл index.html и отправляется в браузер.
   2. Именно в этом суть SSR, с функциональной точки зрения, поскольку именно здесь сервер отображает страницу, а не клиентская машина.
3. Браузер отображает этот файл HTML, в результате чего представление заполняется в браузере.
   1. Однако это еще не интерактивно, но пользователь может видеть окончательный вид веб-страницы.
4. Браузер снова отправляет запрос на сервер и загружает все файлы, указанные в файле HTML, включая файлы JavaScript.
5. После загрузки всех скриптов компонент React снова отображается на клиенте. Однако на этот раз он увлажняет существующее представление, а не перезаписывает его.
   1. «Увлажнение» представления означает, что оно прикрепляет любые обработчики событий к визуализируемым элементам DOM (объектная модель документа), но сохраняет визуализированные элементы DOM нетронутыми. Таким образом, состояние элементов DOM сохраняется, и не происходит сброса представления.
6. Веб-страница, наконец, полностью загружена, и теперь пользователь может взаимодействовать со страницей, которую он мог видеть на самом шаге 3.

Таким образом, одно из самых больших визуальных изменений с точки зрения пользователя заключается в том, что веб-страница становится «видимой» довольно быстро, поскольку рендеринг HTML не требует больших ресурсов, говоря с точки зрения браузера.

По своей сути это не заставляет страницу загружаться быстрее, чем приложение без SSR, но дает пользователям представление о веб-странице, поскольку файлы JavaScript загружаются и анализируются в фоновом режиме, после чего веб-страница становится интерактивной. Это означает, что TTI, то есть время до интерактивности (это время, которое требуется веб-странице, чтобы быть полностью интерактивной с момента, когда пользователь запрашивает веб-страницу), немного больше, чем время, необходимое для того, чтобы веб-страница стала видимой. в браузере.

Таким образом, в сценарии SSR для более быстрого первого рендеринга ваши HTML и CSS должны быть значимыми для пользователей, а JavaScript может быть улучшением HTML и CSS, поскольку его загрузка откладывается.

Распространенное заблуждение о работе SSR с React заключается в том, что после каждого изменения, например, когда пользователь запрашивает какие-либо новые данные, сервер снова выполняет все шаги и отправляет HTML-файл с новым пользовательским интерфейсом в браузер, но это не так. . Произведено лишь частичное обновление страницы. Хотя рендеринг выполняется сервером, окончательный вывод вставляется в DOM путем его «гидратации», как объяснялось ранее.

Рендеринг на стороне сервера | Когда и когда не использовать

• Если вам нужно сильное SEO, используйте SSR, так как поисковым системам легче сканировать.
• Для веб-сайтов, которые ориентированы на контент, а не на взаимодействие, таких как блоги, новостные веб-сайты, статические веб-сайты и веб-сайты с большим количеством текста, SSR может быть благом, поскольку он загружает суть вашего веб-сайта, т. е. быстро загружает контент.
• Со стороны сервера требуется время и усилия для рендеринга и создания файлов, которые будут отправлены в браузер. Поэтому, если у вас низкий сервер и бюджет на операции, вам лучше не внедрять SSR, так как на ваш сервер будет отправлено много запросов.
  • Однако с такими провайдерами, как Firebase, мы можем динамически генерировать контент с помощью облачных функций, а сервер может хранить его в кэше CDN.
  • Это приведет к тому, что в следующий раз, когда пользователь запрашивает, сервер не будет снова создавать файлы. Скорее, он просто обслуживается с локального края CDN, что сокращает время загрузки с точки зрения пользователя, а также использует меньше ресурсов сервера.

Чем React хорош для SSR?

React — отличный выбор для реализации SSR, поскольку он включает в себя концепцию виртуального DOM (объектная модель документа).

Это позволяет разработчикам создавать виртуальную версию приложения React и размещать ее на самом сервере.

Это упрощает визуализацию в HTML с помощью функции renderToString, как обсуждалось ранее, отправляет ее в браузер, чтобы браузер мог отобразить ее довольно быстро, и создать виртуальную версию на клиентской машине.

Итак, глядя на тот факт, что эта виртуальная версия совпадает с HTML, который мы отправили с сервера, React не будет повторно отображать его, тем самым уменьшая время до взаимодействия (TTI), что приводит к «более быстрой» загрузке веб-страницы.

ССР, весь день, каждый день!

Хотелось бы, чтобы для всего было универсальное решение, но это далеко не так, особенно с новыми технологиями. Хотя SSR имеет массу преимуществ, в некоторых случаях, как обсуждалось ранее, SSR может быть не лучшим выбором; высокоинтерактивные сайты находятся в авангарде этого.

Вот где на помощь приходят Creole Studios. У нас есть множество экспертов по технологиям, которые всегда в курсе почти каждой новой технологии, которая появляется в techverse. Мы поймем потребности вашего бизнеса и предоставим вам индивидуальные решения, будь то приложение SSR или CSR, и будьте уверены, вам не придется ни о чем беспокоиться, пока мы делаем всю тяжелую работу за вас. Свяжитесь с нами и воплотите свои идеи в приложении!