Статья опубликована в рамках: LXX Международной научно-практической конференции «Научное сообщество студентов: МЕЖДИСЦИПЛИНАРНЫЕ ИССЛЕДОВАНИЯ» (Россия, г. Новосибирск, 03 июня 2019 г.)
Наука: Информационные технологии
Скачать книгу(-и): Сборник статей конференции
дипломов
РЕНДЕР REACT-ПРИЛОЖЕНИЯ НА СТОРОНЕ СЕРВЕРА
Большинство React-разработчиков для создания веб-приложений используют React CLI, более известный как Create React App (CRA). Использование CRA позволяет легко приступить к работе и имеет множество других преимуществ. Однако создание с помощью CRA имеет ряд недостатков, например, при просмотре исходной веб-страницы из веб-приложения, инициализированного с помощью CRA, можно заметить, что это почти пустая страница с разделом <head> и практически пустым разделом <body>.
Это связано с тем, что CRA отображает приложение на стороне клиента, что означает, что встроенный js-файл сначала загружается в браузер пользователя, а затем начинается загрузка остальной части страницы. Это увеличивает время начальной загрузки, и некоторые веб-сканеры не могут проиндексировать сайт. Есть ли лучший способ визуализации приложения? На данный вопрос может ответить рендеринг на стороне сервера для React.
Что такое рендеринг на стороне сервера (SSR)?
Рендеринг на стороне сервера (SSR) - это возможность отрисовки контента веб-страницы на сервере, а не в браузере с использованием JavaScript. Например, типичный сайт на PHP или WordPress, страница загружается из контента, поступающего через HTTP, который был отображен на сервере и представлен как полностью визуализированный HTML-файл. В этом состоит отличие от приложения React, созданного с помощью CRA, которое просто отправляет js-файл клиенту, а механизм JavaScript браузера клиента создает разметку после загрузки js-файла.
Именно так контент отображался на ранних веб-сайтах, вплоть до притока клиентских библиотек. Тем не менее, теперь серверные рендеринг-приложения React используют NodeJS для сервера, что является ключевым отличием от традиционных серверных рендеринг-приложений.
Причины, по которым необходимо перенести рендеринг на сторону сервера
Как уже говорилось ранее, рендеринг на стороне сервера изначально означает, что каждая страница отображается и загружается с сервера. Однако с введением серверной части React все немного изменилось.
Начальная страница отображается с сервера, то есть последующие страницы загружаются непосредственно с клиента. Таким образом, появляется возможность использовать лучшее из обоих миров - мощь начального контента на стороне сервера плюс быстрая последующая загрузка, которая запрашивает только тот контент, который необходим для будущих запросов.
В дополнение к вышеперечисленным преимуществам, вот некоторые другие преимущества, которые вы получаете от перехода на SSR:
Производительность
Арунода Сусирипала, инженер из Zeit, говорит о том, что производительность является основной причиной перехода на рендеринг на стороне сервера. Использование SSR означает, что для начальной загрузки нет необходимости в загрузчиках или спиннерах.
Более быстрое время загрузки приводит к лучшему опыту для конечного пользователя. Это одна из причин, по которой многие крупные компании используют подход SSR для своих сайтов.
SEO-оптимизация
Google сканирует веб-приложения, созданные на JavaScript, поэтому существует нобходимость иметь готовый контент на стороне сервера, который будет подготовлен для сканирования вашего сайта.
На данный момент Google и Bing могут индексировать синхронные приложения JavaScript – синхронность стала ключевым словом. Если приложение запускается с загрузчиком, а затем загружает контент через Ajax, сканер будет ждать загрузки всего несколько секунд до завершения. Это означает, что может понадобиться использовать SSR, если на страницах, где важна SEO-оптимизация, представлен контент, извлекаемый асинхронно.
Сильная сторона SSR - использование преимуществ SEO для традиционного веб-сайта, поскольку страница может сканироваться автоматизированными программами.
Обмен в социальных сетях
Еще одно преимущество SSR заключается в том, что существует возможность получить сложный фрагмент кода при отправке веб-страницы через социальные сети. Данной возможности не существует при использовании только клиентского приложения.
Как начать работу с приложением SSR
SSR возможно использовать без фреймворков, но данный подход не рекомендуется, поскольку в SSR-приложении React представлено много интерактивных частей.
Next.js
Next.js – это отличный фреймворк с большим сообществом разработчиков. С Next.js не нужно беспокоиться о пакетировании, минимизации или горячей перезагрузке, множество функций поставляются из коробки. Существует возможность создавать страницы как компоненты React внутри файлов. В дополнение к сообществу и поддержке, есть много крупных компаний, использующих Next.js в производстве, включая npm, Netflix и Auth0.
Razzle
Razzle - это инструмент, который абстрагирует всю сложную конфигурацию, необходимую для SSR, в единую зависимость - он предоставляет способ разработки create-react-app, а затем оставляет остальную часть архитектурных решений приложения, включая каркасы, маршрутизацию и извлечение данных разработчику. Начать работу с Razzle легко, он по умолчанию использует React Router 4, в отличие от Next.js, в котором нет встроенного маршрутизатора.
Альтернативы
React – не панацея. Возможно, команда разработчиков более знакома с Vue или другим фреймворком JavaScript. Возможно, статический сайт лучше всего подойдет в данном случае. Если использование React неоправданно или необходимо использовать Static Site Generator существуют следующие альтернативы:
Nuxt.js
Nuxt.js является серверной средой рендеринга для Vue.js. Данный фреймворк является альтернативным решением Next.js или Razzle в мире Vue.js.
Gatsby
Gatsby – это основанный на React генератор статических сайтов, который завоевал сердца многих разработчиков благодаря своему исключительному UX (пользовательский опыт) и DX (опыт разработчика). Представленный генератор не создает SSR во время выполнения. Gatsby, скорее, выполняет рендеринг на стороне сервера с Node.js во время сборки, где он создает статические HTML, CSS и JS при развертывании сайта. Это приводит к невероятно быстрой загрузке.
Вам всегда нужен SSR?
Скорее всего, ответ будет отрицательным. Не всем приложениям требуется рендеринг на стороне сервера, особенно приложениям с панелью мониторинга и аутентификацией, которые не требуют SEO или обмена через социальные сети.
Самое главное, что SSR-приложения React стоят намного дороже с точки зрения ресурсов, поскольку необходимо поддерживать работоспособность Node-сервера.
Заключение
Приложения React на стороне клиента великолепны, однако, рендеринг приложений на сервере имеет заметные преимущества:
1. Производительность
2. Видимость поисковой системы
3. Социальный обмен
Как и любые технологии, данное решение имеет свои недостатки, поэтому разработчик, должен сам решать, стоит ли использовать данную технологию или нет.
Список литературы:
- reactjs.org [Электронный ресурс] //Официальный сайт React – Режим доступа – URL: https://ru.reactjs.org
- nextjs.org [Электронный ресурс] //Официальный сайт NextJS – Режим доступа – URL: https://nextjs.org
- Статья «React и Code Splitting» [Электронный ресурс] // Информационный ресурс habr.com – Режим доступа – URL: https://habr.com/ru/post/442046/
дипломов
Оставить комментарий