Как интегрировать серверный рендеринг в React-приложение, и зачем он вообще там нужен

Когда React-разработчики придумали, как на стороне сервера упростить рендеринг, его популярность стала набирать обороты. В компании RubyGarage тоже прониклись преимуществами серверного рендеринга и решили рассказать, как и почему используют его для React-приложений.

Что такое серверный рендеринг?

Серверный рендеринг (server-side rendering, SSR) — это техника рендеринга одностраничного приложения или сайта на сервере, а не в клиентском браузере.

Преимущества серверного рендеринга для приложений на React

Одно из значительных преимуществ серверного рендеринга — возможность повысить производительность приложения. Однако это не единственное преимущество, есть еще несколько. Вот они:

Улучшенный пользовательский опыт

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

Если же рендеринг происходит на стороне сервера, для первичного отображения загрузка JavaScript-файла не обязательна. Клиентский браузер моментально генерирует HTML-страницу со всем контентом, а JavaScript-файл потом загружается в фоне. Так выглядит процесс серверного рендеринга:

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

SEO-оптимизация

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

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

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

Увеличение трафика

Когда пользователи соцсетей репостят ссылку на приложение или сайт с серверным рендерингом, автоматически генерируется фрагмент страницы с заглавием и изображением:

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

Точные показатели загрузки страницы

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

Теперь, когда мы знаем преимущества серверного рендеринга, давайте посмотрим как его можно интегрировать в React-приложение. 

Как внедрить серверный рендеринг в React-приложение с помощью Next.js

В этом разделе мы поделимся подсказками по поводу того, как интегрировать серверный рендеринг в React-приложение. Как вы могли догадаться, для этого мы используем Next.js.

Что такое Next.js

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

Почему мы рекомендуем Next.js для интеграции серверного рендеринга

• Улучшенная производительность. У Next.js есть несколько встроенных функций для оптимизации работы, таких, как предзагрузка страниц, автоматическое разделение кода, различные варианты отображения страницы.
• Простота разработки. Фреймворк Next.js имеет характеристики, которые упрощают разработку React-приложений. Это такие характеристики как webpack-кастомизация, Hot Reload (моментальный отклик на изменения React-компонентов) и простой дебаггинг.
• Универсальный деплой. Самый простой и распространенный способ задеплоить проект, построенный на Next.js, — использовать платформу Vercel. Но можно использовать и любую другую платформу с сервером Node.js. У Next.js также есть фича Static HTML Export, которая помогает создать статический сайт с хостингом даже на GitHub.
• Растущее сообщество. Команда Next.js тесно сотрудничает с командой Google и React-командой Facebook, которые постоянно обновляют, улучшают и развивают фреймворк. Его также используют известные компании Netflix, Twitch, TikTok, Nike и Hulu. А на официальную конференцию Next.js, которая проходила 27 го октября 2020 года, только за первые два дня зарегистрировалось 20 тысяч человек.

Это основные свойства, которые нам нравятся в Next.js. Давайте посмотрим, как использовать этот фреймворк для интеграции серверного рендеринга в React-приложение. 

Вариант 1. Пре-рендеринг

Next.js позволяет использовать два типа пре-рендеринга: статическая генерация и серверный рендеринг. Каждый из этих видов пре-рендеринга логично использовать для разных страниц. Давайте разберемся. 

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

При статической генерации сервер получает список статей блога, страниц с документацией или другими подобными страницами и статически их генерирует. Когда пользователь заходит на такую страницу, сервер не получает запросов, и пользователь сразу может видеть наполнение страницы.

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

https://gist.github.com/sparrow/418718804cf02442a2c08dfef50c0b41#file-static_generation-js

Если же странице нужна информация из внешних источников, статическая генерация требует другого подхода и использования функции getStaticProps:

https://gist.github.com/sparrow/fc70b60a9e3014bc6254a60040f6a478#file-getstaticprops-js

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

https://gist.github.com/sparrow/c41a9ec4f2a9d2fbacbdfd9eedf4fc55#file-getstaticpaths-js

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

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

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

Чтобы интегрировать серверный рендеринг, можно использовать функцию getServerSideProps:

https://gist.github.com/sparrow/e3637955e31f0d580a3d3b936e5b4b3f#file-getserversideprops-js

Или функцию getInitialProps:

https://gist.github.com/sparrow/417fbaaa580e1d923f47392c2dd2afae#file-getinitialprops-js

Таким образом, нет необходимости выбирать только один тип пре-рендеринга, когда вы создаете приложение, или переделывать все приложение, если вам нужно поменять только тип пре-рендеринга. 

Вариант 2. Автоматическая статическая оптимизация

Автоматическая статическая оптимизация — это встроенная фича Next.js, которая создает гибридные приложения с разными типами пре-рендеринга. Это позволяет Next.js самостоятельно определить, может ли страница быть статически сгенерирована. При этом определяется, функционирует ли на странице getServerSideProps или getInitialProps. Если ни одной из этих функций нет, статическая генерация страницы запускается автоматически. 

Вариант 3. Статический экспорт HTML

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

Вариант 4. Поддержка AMP

Next.js может конвертировать любую React страницу в accelerated mobile page (AMP). Такие страницы позволяют улучшить пользовательский опыт, обеспечивая быструю и беспрепятственную загрузку.

Вывод

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