“Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать”, — Антуан де Сент-Экзюпери.
Всем нравятся одностраничные приложения (single page applications). Причем, в любой их форме: неважно, для какой платформы применяются React, Vue, Angular или даже Vanilla JavaScript.
Но как повысить рейтинг сайта в поиске? Как скормить краулеру статичный HTML JavaScript-приложения без ущерба для удобства клиентов? Рассмотрим же эту идею, собравшую нас здесь.
1. Вчера и сегодня
Отрисовка (рендер) на стороне сервера — SSR (Server-Side Rendering) — хорошо зарекомендовал себя за десятилетия популярности. Раньше на сторону клиента передавались только окончательно сгенерированные и отформатированные HTML-данные, из которых браузер создает пользовательский интерфейс без дополнительной работы. Когда на странице что-то изменилось, то раньше ее нужно было полностью перезагружать, заново инициализируя из бэкенда.
Подождите секунду, но как же одностраничные приложения? Не время волноваться, так как SSR отлично работает со SPA! Множество фреймворков вроде next.js помогут вам. Более того, всегда можно написать проект нуля. Получается, что вы в любом случае получите статичный сайт с поддержкой SEO.
Вопрос, который, вероятно, крутится у вас в голове с тех пор, как вы услышали о SSR — это отрисовка на стороне клиента — CSR (Client-Side Rendering). Впрочем, если бы в статье подробно рассматривались все технические нюансы отличий отрисовки на стороне сервера или пользователя, то вы бы даже не начали читать ее, верно?
Общая идея выбора CSR заключается в том, чтобы потратить гораздо меньше когнитивных ресурсов, сохраняя при этом баланс сложной архитектуры системы пользовательского интерфейса. Результат мгновенно отображается в интерфейсе пользователя, а отладка проблем, связанных с бэкендом, занимает меньше времени. Обсудим, что конкретно имеется в виду.
Что нужно для SSR?
Далее в руководстве от вас понадобятся базовые знания о React, HTML, CSS и JavaScript. Так вот, известный метод React.renderDOM() на сервере не сработает, потому что DOM API там недоступен, ведь он лишь часть браузера.
“Приходите и перепишите кучу кодовых баз”, — любители SSR.
По крайней мере, для начала замените метод React.renderDOM() в пользу React.hydrate(), избавившись от падения приложения, и начните изучать все больше и больше информации о SSR. Затем начните беспокоиться об управлении состояниями.
- 💡 Управление состоянием — сложная задача в написании SSR-ready SPA-приложения.
Добавим сюда инструменты управления состояниями типа redux и получим невероятную боль при синхронизации разметки пользовательского интерфейса с данными инициализации, вводимыми из бэкенда и заполняемыми при первой отрисовке каждого элемента.
Зачем разбираться в усложненных примерах, если технологии с легкостью все сделают сами?
3. Dynamic Rendering — всегда есть выход
Что, если вы все еще можете получить доступ к DOM API на сервере без опасения лишних неисправностей? Что, если… Да, этот список может быть длиннее спагетти-кода, так что перейдем к делу.
В течение последних 10 лет Google все больше понимал степень популярности статических приложений среди пользователей. Конечно, ведь они легкие, быстрые и очень востребованные — огромный скачок для веб-программирования. Следовательно, поисковая оптимизация тоже должна развиваться, поспевая в ногу со временем. Собственно, после короткого анонса 2015-го года Google объявили, что их краулинговые роботы теперь способны анализировать динамические веб-страницы на стороне клиента (например, речь идет про статические одностраничные приложения).
Несмотря на все, до сих пор иногда возникают разные подводные камни. Например, нет никакой гарантии, что робот успешно получит необходимые ресурсы страницы (изображения, стили CSS, данные) до того, как взять тайм-аут.
Вскоре после объявления от Google про поддержку индексации SPA, разработчикам открылась возможность делать настоящие скриншоты веб-страниц (имеется ввиду не файл .png/.jpg/.webp/.svg) под названием Dynamic Rendering — полностью заранее отрисованный на сервере HTML, хранящийся на стороне разработчика.
- 💡 Dynamic Rendering — предложенное корпорацией Microsoft решение для отрисовки JavaScript. Ознакомьтесь с информацией более подробно в документации для разработчиков.
Как только роботы попадают на веб-страницу, промежуточное программное обеспечение бэкенда (middleware — ознакомьтесь со связующим программным обеспечением в этом руководстве) перехватывает запрос, чтобы отправить роботу специальный SEO-оптимизированный скриншот. В то же время обычный конечный пользователь без изменений получит пакет HTML + CSS + JavaScript для отображения интерфейса в браузере.
В общем, сервер способен различать человека и робота, предоставляя человеку полный пользовательский опыт, а роботу — облегченную HTML-версию для анализа.
Настройка динамической отрисовки
Базовая конфигурация довольно проста, достаточно написать список краулеров и проверить заголовки запросов:
export const botUserAgents = [
'googlebot',
'bingbot',
'linkedinbot',
'mediapartners-google',
];
Следом определите, какой тип контента требуется выслать пользователю: для настольной или мобильной версии? Применяйте динамический показ, чтобы предоставить нужную версию. Вот пример, как определить тип устройства у пользователя:
const isPrerenderedUA = userAgent.matches(botUserAgents)
const isMobileUA = userAgent.matches(['mobile', 'android'])
if (!isPrerenderedUA) {
// Обслуживает обычный визуализированный контент на стороне клиента
} else {
servePreRendered(isMobileUA) // Обслуживает мобильную версию
}
Если вы хотите узнать больше, то посетите официальную страницу Google.
Настройка prerender.io
Итак, если вам не очень нравится писать весь код самостоятельно, то вам понравится Prerender.io — довольно интуитивно понятный сервис, с которым легко работать.
Прежде всего, установим пакет в проект:
// ./
npm install prerender-node --save
Когда вы создадите приложение на базе NodeJS (expressJS, nextJS и т. д.), добавьте к нему промежуточное ПО:
// ./server/index.js
app.use(require('prerender-node'));
…или же, если у вас есть аккаунт на prerender.io — укажите свой токен:
// ./server/index.js
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));
Если вам интересно узнать детальнее овозможностях Prerender.io, то покопайтесь в официальном репозитории на Github. Там вы найдете продвинутые ресурсы о тестировании снапшотов, настройке или даже написании собственного сервера для хранения снапшотов.
Выводы
Когда-нибудь весь этот беспорядок вокруг SEO исчезнет, а ИИ будет контролировать всю планету. Но пока что это лишь в процессе.
Поэтому давайте будем благодарны таким командам как Prerender.io, ведь они серьезно упрощают и ускоряют рутину разработки.
Читайте также:
- Совместное использование компонентов React с различными библиотеками управления состоянием
- Перехват ошибок в компоненте React
- Создание компонента Timeline с React
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Sviat Kuzhelev: Say goodby to Server Side Rendering. Prerender.io — SPAs with SEO in mind.
