В этой статье я расскажу об изоморфных веб-приложениях (также известных как универсальные приложения), зачем они нам нужны и как их создать.
Часть A. Зачем нужно изоморфное веб-приложение?
Время загрузки страницы — это среднее время, необходимое для отображения страницы. Он рассчитывается от начала, когда пользователь нажимает на ссылку страницы или вводит веб-адрес, до завершения, когда страница полностью загружается в браузере.
Время загрузки страницы обычно измеряется в секундах и состоит из двух частей:
- Сетевое и серверное время: время, необходимое для обслуживания статических ресурсов, таких как фотографии и другие файлы, зависит от скорости интернет-соединения.
- Время браузера: сколько времени требуется браузеру для анализа и выполнения документа и отображения страницы, чтобы сделать ее доступной для взаимодействия с пользователем.
На изображении выше показано, как время загрузки страницы влияет на продажи вашего сайта, качество обслуживания клиентов, доход и SEO (поисковая оптимизация). Изоморфное приложение нацелено на сокращение времени начальной загрузки страницы и поисковую оптимизацию, а следовательно, на качество обслуживания клиентов и доход.
Часть Б. Что такое изоморфные приложения.
Прежде чем углубляться в то, что такое изоморфные приложения, нам нужно понять эволюцию веб-приложений. Мы рассмотрим приложение с визуализацией на стороне клиента (CSR) и приложение с визуализацией на стороне сервера (SSR).
Приложение с визуализацией на стороне клиента/одностраничное приложение:
- Одностраничное приложение — это приложение, которое работает внутри браузера и не требует перезагрузки страницы во время использования, а перезагружается только содержимое, отличающееся от текущей страницы. Мы используем эти типы приложений каждый день, например, Facebook или GitHub.
- Одностраничное приложение — это приложение на стороне клиента (отображаемое браузером), которое загружает весь веб-сайт после первоначальной загрузки. Это означает, что когда вы посещаете веб-сайт с помощью браузера, сервер отправляет HTML-шаблон и некоторый код JavaScript для вашего браузера, чтобы выполнить код, отображающий фактическое содержимое веб-страницы.
- Из-за тесной связи кода, создающего DOM, одностраничное приложение может выполнять сложные манипуляции с DOM.
https://secure-peak-90342.herokuapp.com/
https://github.com/elavarasi/newsfeedcsr
Плюсы:
- Расширенное взаимодействие с сайтом
- Быстрая отрисовка веб-сайта после первоначальной загрузки. SPA работает быстро, так как большинство ресурсов (HTML+CSS+Scripts) загружаются только один раз на протяжении всего жизненного цикла приложения. Туда и обратно передаются только данные.
- Интерактивные веб-приложения с высокой скоростью отклика.
- Надежный выбор библиотек JavaScript.
Минусы:
- Низкое SEO, если оно реализовано неправильно.
- Первоначальная загрузка может занять больше времени.
- Требуется наличие и включение JavaScript.
- Первоначальный запрос к серверу является разреженным, возвращая пустой HTML-файл с набором ссылок CSS и JavaScript (JS). Затем необходимо извлечь внешние файлы, чтобы отобразить соответствующую разметку. Это означает, что пользователю придется дольше ждать начального рендеринга, а сканеры могут интерпретировать вашу страницу как пустую.
Приложение с визуализацией на стороне сервера/многостраничное приложение:
- Многостраничные приложения или приложение, полностью отображаемое на стороне сервера, — это традиционный способ создания веб-приложений, в котором для каждого запроса на отображение данных или отправка данных обратно на сервер вызываются вызовы для рендеринга новой страницы с сервера в браузер.
- В SSR сервер отвечает клиентам полным HTML-кодом страницы, которую необходимо отобразить.
https://gentle-wildwood-71150.herokuapp.com/
https://github.com/elavarasi/newsfeedssr
Плюсы:
- Первоначальная загрузка страницы выполняется быстрее
- Не мерцает пустая страница/ Загрузка…. изображение
- Отлично подходит для статических страниц
- Очень хорошо и просто для правильного управления поисковой оптимизацией. Это дает больше шансов на ранжирование по разным ключевым словам, поскольку приложение может быть оптимизировано для одного ключевого слова на странице.
Минусы:
- Частые запросы к серверу — узкое место из-за очень интерактивного сайта.
- Пропускная способность вашего сервера значительно меньше пропускной способности CSR.
- Несмотря на то, что страница отображается раньше и клиент может увидеть ее раньше, он не может взаимодействовать с ней до тех пор, пока не будет загружен JS.
- Необогащенное взаимодействие с сайтом.
- Сервер создает новую страницу при каждом взаимодействии с пользователем. Затем эта страница должна быть возвращена пользователю. Такое поведение может значительно увеличить время загрузки и привести к отсутствию отклика.
Изоморфное приложение/универсальное приложение:
Изоморфное приложение — лучшее из обоих миров. Гибридный подход нового и старого способов создания веб-приложений, где мы хотим обслуживать полностью сформированный HTML с сервера для начальной производительности загрузки страницы и SEO, в то же время мы нужна скорость и гибкость логики клиентского приложения.
Изоморфный код — это код, который может выполняться как на клиенте, так и на сервере. При первом открытии веб-сайта все операции выполняются на сервере, и браузер получает HTML-код со всей информацией (так же, как и на традиционных веб-сайтах со статическими страницами, которые могут индексировать поисковые системы). После загрузки JavaScript веб-приложение превращается в «одностраничное приложение» и работает соответственно. Это открывает всевозможные двери для оптимизации производительности, улучшения удобства обслуживания, поисковой оптимизации и большего количества веб-приложений с отслеживанием состояния.
Часть C: Создание изоморфных приложений с помощью React
React отлично подходит для создания изоморфных приложений, поскольку React был разработан с использованием виртуального DOM. Виртуальный DOM похож на DOM в вашем браузере, за исключением того, что он не в вашем браузере, потому что он виртуальный, а это означает, что он также может быть на сервере.
Мы можем взять то же реагирующее приложение, создать его виртуальную версию и преобразовать в строку, которая представляет собой просто HTML, отправленную в браузер. Браузер быстро отрендерит его и создаст виртуальную версию на клиенте. Виртуальная версия на клиенте совпадает с HTML-кодом, который мы отправили с сервера, и реакция знает, что не нужно повторно отображать его, что дает нам гораздо более быстрое время до взаимодействия (TTI).
Какие модули и методы необходимы для создания изоморфного веб-приложения.
- Экспресс-сервер для обработки нашего приложения React.
- renderToString из react-dom/сервера
- ReactDOM.hydrate из react-dom.
- StaticRouter из react-router-dom
- Redux для управления состоянием
- React Helmet — SEO — Управляйте всеми вашими изменениями в заголовке документа
- Вавилон
- Веб-пакет
