Когда React-разработчики придумали, как на стороне сервера упростить рендеринг, его популярность стала набирать обороты. В компании RubyGarage тоже прониклись преимуществами серверного рендеринга и решили рассказать, как и почему используют его для React-приложений.
Серверный рендеринг (server-side rendering, SSR) — это техника рендеринга одностраничного приложения или сайта на сервере, а не в клиентском браузере.
Одно из значительных преимуществ серверного рендеринга — возможность повысить производительность приложения. Однако это не единственное преимущество, есть еще несколько. Вот они:
Когда рендеринг приложения или сайта происходит на стороне клиента, приложению необходимо сначала загрузить JavaScript-файл и обработать его. Только потом приложение будет функциональным. JavaScript-файлы обычно большие, и это увеличивает изначальное время загрузки приложения. Вот как происходит рендеринг на стороне клиента:
Если же рендеринг происходит на стороне сервера, для первичного отображения загрузка JavaScript-файла не обязательна. Клиентский браузер моментально генерирует HTML-страницу со всем контентом, а JavaScript-файл потом загружается в фоне. Так выглядит процесс серверного рендеринга:
Если вы используете серверный рендеринг, пользователи вашего приложения могут сразу видеть его контент, а не наблюдать за значком загрузки, которая может продолжаться вечность.
В отличие от пользователей вашего приложения, которые могут быть достаточно терпеливыми, чтобы дождаться полной загрузки страницы, Google-боты ждать не будут.
Боты быстро индексируют статические HTML-страницы, но не так хороши в индексировании JavaScript-страниц. Без серверного рендеринга боты ведут себя так же, как и ваши пользователи: ждут, пока загрузится JavaScript-файл, чтобы распознать контент страницы.
Проблема в том, что время, которое боты уделяют анализу одной страницы, ограничено. Потому если ваша страница не загрузится вовремя, боты не проиндексируют ее и, соответственно, не покажут в выдаче поисковика.
Когда пользователи соцсетей репостят ссылку на приложение или сайт с серверным рендерингом, автоматически генерируется фрагмент страницы с заглавием и изображением:
Этот фрагмент служит предпросмотром и дает пользователям больше информации о контенте страницы, которую зарепостили. Такие фрагменты в соцсетях могут помочь привлечь внимание к вашей странице и увеличить трафик.
Когда рендеринг происходит на странице клиента, ни вы, ни сервер не получаете информацию о том, как быстро клиент смог распознать контент страницы. Соответственно, вы не будете знать, загружается ли ваша страница достаточно быстро или требует улучшения.
Теперь, когда мы знаем преимущества серверного рендеринга, давайте посмотрим как его можно интегрировать в React-приложение.
В этом разделе мы поделимся подсказками по поводу того, как интегрировать серверный рендеринг в React-приложение. Как вы могли догадаться, для этого мы используем Next.js.
Next.js — это надежный фреймворк, который способствует разработке легко масштабируемых React-приложений. Одно из основных преимуществ Next.js — это гибкость при выборе вариантов рендеринга. Next.js позволяет рендерить страницы как на стороне клиента, так и на стороне сервера, либо же смешивать два типа рендеринга.
Это основные свойства, которые нам нравятся в Next.js. Давайте посмотрим, как использовать этот фреймворк для интеграции серверного рендеринга в React-приложение.
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
Таким образом, нет необходимости выбирать только один тип пре-рендеринга, когда вы создаете приложение, или переделывать все приложение, если вам нужно поменять только тип пре-рендеринга.
Автоматическая статическая оптимизация — это встроенная фича Next.js, которая создает гибридные приложения с разными типами пре-рендеринга. Это позволяет Next.js самостоятельно определить, может ли страница быть статически сгенерирована. При этом определяется, функционирует ли на странице getServerSideProps или getInitialProps. Если ни одной из этих функций нет, статическая генерация страницы запускается автоматически.
Эта функция позволяет экспортировать ваше приложение в статический HTML-файл без необходимости использования сервера Node.js. Это стандартный функционал, который не требует дополнительных конфигураций. Статический экспорт HTML можно использовать только для приложений, которые не нуждаются в серверном рендеринге.
Next.js может конвертировать любую React страницу в accelerated mobile page (AMP). Такие страницы позволяют улучшить пользовательский опыт, обеспечивая быструю и беспрепятственную загрузку.
Серверный рендеринг стоит вашего внимания и усилий, если вы хотите улучшить производительность своего приложения, SEO-показатели и трафик. Хотя интеграция серверного рендеринга может показаться сложной, наш опыт показывает, что этот процесс можно облегчить используя Next.js.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…
