Сравнение с рендерингом на стороне клиента, преимущества и недостатки 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 имеет еще больше преимуществ, чем перечисленные выше.
- Он оптимизирует веб-страницы для социальных сетей, а не только для поисковых систем. Когда кто-то делится вашей страницей в Facebook или Twitter, публикация содержит предварительный просмотр страницы.
- Он имеет ряд преимуществ в производительности, которые улучшают UX вашего сайта. Страницы SSR имеют гораздо более быстрое время загрузки и гораздо более быструю первую отрисовку контента, потому что контент быстрее становится доступным в браузере. Это означает, что у вашего пользователя будет меньше времени, чтобы посмотреть на экран загрузки.
- JavaScript требует больших ресурсов и кода. Загрузка его в браузер с помощью CSR значительно увеличивает вес страницы. Размер одного файла JavaScript в среднем составляет около 1 МБ, в то время как в соответствии с передовой практикой веб-разработки размер всей страницы не должен превышать 5 МБ.
- Улучшения производительности, которые приходят с SSR, также имеют свои преимущества для SEO. Google отдает приоритет в поиске сайтам, которые загружаются быстрее всего. Более быстрая загрузка улучшает пользовательские показатели, такие как продолжительность сеанса и показатель отказов; Алгоритмы Google учитывают эти показатели и дают вам дополнительный стимул для поисковой оптимизации.
Более быстрые веб-страницы. Удачных поисковых систем. Счастливый пользователь.
Недостатки ССР
Если SSR намного более технически оптимизирован и оптимизирован для SEO, почему не все веб-сайты используют его? Оказывается, использование SSR для вашего веб-сайта имеет некоторые существенные недостатки.
- Это дорого, сложно реализовать и требует много рабочей силы для настройки. Веб-сайты, использующие фреймворки JavaScript, нуждаются в универсальных библиотеках для включения SSR; Для Angular требуется Angular Universal, для React и Vue требуется Next.JS. Все они требуют дополнительной работы от вашей инженерной команды, что стоит вам денег.
- Это также возлагает бремя рендеринга содержимого JavaScript на ваши собственные серверы, что увеличивает расходы на обслуживание вашего сервера.
- Страницы SSR будут иметь более высокую задержку TTFB и более медленное время до взаимодействия. Ваш пользователь увидит контент раньше, но если он на что-то нажмет, ничего не произойдет. Они расстроятся и уйдут.
Вывод
SSR имеет множество преимуществ, которые компенсируют технические недостатки и ухудшение пользовательского опыта CSR. Однако он имеет свои ограничения и может быть не лучшим решением для вашего сайта. Вам необходимо оценить технические потребности и проблемы вашего веб-сайта, прежде чем размещать его на месте.
Я надеюсь, что вы нашли это полезным. Спасибо за чтение :)