Сравнение с рендерингом на стороне клиента, преимущества и недостатки SSR

Что такое SSR и зачем вам это нужно знать?

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

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

Что такое ССР?

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

  • Исторически сложилось так, что поисковым системам было трудно сканировать и индексировать веб-сайты, созданные с использованием JavaScript, а не HTML.
  • Google индексирует веб-страницы на основе JavaScript, используя систему двухэтапного индексирования. Когда робот Googlebot впервые сталкивается с вашим веб-сайтом, он сканирует ваши страницы и извлекает все их HTML, CSS и ссылки, как правило, в течение нескольких часов.
  • Затем Google помещает содержимое JavaScript в очередь, отображая его, когда у него есть ресурсы. Иногда на это уходят дни или недели. В течение этого времени ваши веб-страницы не индексируются и, следовательно, не могут быть найдены в Google. Вы теряете много трафика.
  • Что еще хуже, если ваши страницы JavaScript не могут быть просканированы и проиндексированы должным образом, Google читает их как пустой экран и ранжирует их соответствующим образом, что может иметь катастрофические последствия для SEO-здоровья вашего сайта.
  • Google утверждает, что робот Googlebot может отлично сканировать и индексировать веб-страницы на основе Javascript, но это еще предстоит доказать. Другие поисковые системы, такие как Bing, Yandex и DuckDuckGo, не могут сканировать JavaScript вообще.
  • Независимо от поисковой системы, JavaScript представляет собой проблему, потому что ему требуется дополнительная вычислительная мощность для сканирования и индексирования, тем самым съедая больше выделенного бюджета сканирования вашего веб-сайта.
  • SSR предназначен для этой проблемы. Он отображает JavaScript на ваших собственных серверах, а не возлагает бремя на пользовательский агент, делая контент быстрым и легко доступным по запросу.

Что такое рендеринг на стороне клиента и чем он отличается от рендеринга на стороне сервера?

Рендеринг на стороне клиента (CSR) становится все более популярной альтернативой SSR. Разница между ними аналогична заказу готового набора для еды в таких сервисах, как Blue Apron или Green Chef, или покупке всех ингредиентов и приготовлению еды самостоятельно.

  • Рендеринг на стороне клиента загружает JavaScript веб-сайта в браузер пользователя, а не на сервер веб-сайта. Это заказ готового обеденного набора.
  • Веб-сайты, созданные с использованием фреймворков JavaScript, таких как Angular, React или Vue, по умолчанию используют CSR. Это проблематично с точки зрения SEO, потому что когда поисковые роботы обнаруживают страницу на вашем веб-сайте, все, что они видят, — это пустой экран.
  • В то же время рендеринг на стороне сервера является более традиционным вариантом; это покупка продуктов и приготовление еды самостоятельно. Он загружает ваш контент JavaScript на сервер вашего сайта.
  • SSR восходит к тому времени, когда JavaScript и PHP были главным образом базовыми технологиями, а Java использовалась просто для того, чтобы сделать веб-сайты на основе HTML более интерактивными, а не создавать их с нуля.
  • SSR преобразует ваши HTML-файлы в информацию, удобную для чтения браузером пользователя. Робот Google может видеть основной HTML-контент на вашей веб-странице без использования JavaScript, в то время как пользователь видит полностью отрендеренную страницу во всей красе. Ваш веб-сайт правильно оценивается в Google, и ваш пользователь получает доступ к веб-интерфейсу, который является праздником для глаз и ушей.

Преимущества ССР

Мы уже обсуждали некоторые преимущества SSR для SEO: безукоризненно просканированные и проиндексированные страницы JavaScript, больше не тратить краулинговые бюджеты впустуюили резкое падение рейтинга в поиске. , отсутствие медленного двухэтапного индексирования; просто плавная и бесшовная индексация и сопровождающий ее стабильный поток трафика Google.

SSR имеет еще больше преимуществ, чем перечисленные выше.

  1. Он оптимизирует веб-страницы для социальных сетей, а не только для поисковых систем. Когда кто-то делится вашей страницей в Facebook или Twitter, публикация содержит предварительный просмотр страницы.
  2. Он имеет ряд преимуществ в производительности, которые улучшают UX вашего сайта. Страницы SSR имеют гораздо более быстрое время загрузки и гораздо более быструю первую отрисовку контента, потому что контент быстрее становится доступным в браузере. Это означает, что у вашего пользователя будет меньше времени, чтобы посмотреть на экран загрузки.
  3. JavaScript требует больших ресурсов и кода. Загрузка его в браузер с помощью CSR значительно увеличивает вес страницы. Размер одного файла JavaScript в среднем составляет около 1 МБ, в то время как в соответствии с передовой практикой веб-разработки размер всей страницы не должен превышать 5 МБ.
  4. Улучшения производительности, которые приходят с SSR, также имеют свои преимущества для SEO. Google отдает приоритет в поиске сайтам, которые загружаются быстрее всего. Более быстрая загрузка улучшает пользовательские показатели, такие как продолжительность сеанса и показатель отказов; Алгоритмы Google учитывают эти показатели и дают вам дополнительный стимул для поисковой оптимизации.

Более быстрые веб-страницы. Удачных поисковых систем. Счастливый пользователь.

Недостатки ССР

Если SSR намного более технически оптимизирован и оптимизирован для SEO, почему не все веб-сайты используют его? Оказывается, использование SSR для вашего веб-сайта имеет некоторые существенные недостатки.

  1. Это дорого, сложно реализовать и требует много рабочей силы для настройки. Веб-сайты, использующие фреймворки JavaScript, нуждаются в универсальных библиотеках для включения SSR; Для Angular требуется Angular Universal, для React и Vue требуется Next.JS. Все они требуют дополнительной работы от вашей инженерной команды, что стоит вам денег.
  2. Это также возлагает бремя рендеринга содержимого JavaScript на ваши собственные серверы, что увеличивает расходы на обслуживание вашего сервера.
  3. Страницы SSR будут иметь более высокую задержку TTFB и более медленное время до взаимодействия. Ваш пользователь увидит контент раньше, но если он на что-то нажмет, ничего не произойдет. Они расстроятся и уйдут.

Вывод

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

Я надеюсь, что вы нашли это полезным. Спасибо за чтение :)