Vue.js - отличный фреймворк для разработки различных типов веб-приложений, однако у него есть проблема с SEO: асинхронный контент приложения не может быть оптимально просканирован. ботами поисковых систем, поэтому это может стать огромной проблемой для вашего бизнеса. В этой статье мы расскажем вам об одном из самых простых способов решить эту проблему и, в то же время, улучшить UX вашего приложения. Да, мы поговорим о пререндеринге.
Предварительная отрисовка - это процесс предварительной загрузки всех элементов на странице и создания статического HTML-кода вашего одностраничного приложения.
Преимущества предварительной рендеринга
Использование предварительной обработки дает следующие преимущества:
- SEO. Да, наконец, мы можем решить проблему SEO для сайтов с асинхронными данными: все эти данные будут предварительно загружены до того, как краулер проиндексирует ваш сайт.
- Ускорение загрузки содержимого страницы. Пользователь может получить доступ к вашему приложению даже до того, как загрузится весь JavaScript, что значительно улучшает UX вашего приложения. Никто не любит долго ждать.
- Дешевая изящная деградация. Этот пункт следует за предыдущим. Теперь даже пользователи старых браузеров или пользователи с отключенным JS или медленным устройством имеют доступ к вашему приложению. Конечно, они не могут полностью взаимодействовать с ним, но они могут получить доступ к важной информации вместо того, чтобы видеть пустую страницу.
- Богатые превью. Все уникальные метаданные OpenGraph теперь предварительно загружаются правильно. Поделитесь своим сайтом в Facebook и других социальных сетях, чтобы расширить целевую аудиторию.
Официальная документация Vue предлагает использовать prerender-spa-plugin для предварительной визуализации. Обычно плагин выполняет следующие действия:
- Он создает экземпляр Phantom JS и запускает приложение.
- Делает снимок DOM.
- Выводит снимок в HTML-файл в нашей папке сборки.
Хорошо, давайте посмотрим, как это работает на практике.
Практика: предварительная отрисовка в приложении Vue.js
Для демонстрации я буду использовать приложение, которое было создано в нашей предыдущей статье об одностраничном приложении Vue. Ознакомьтесь с проектом и начните с создания простого SPA, следуя руководству в статье, или, если вы хотите продолжить прямо сейчас, просто клонируйте репо и переходите к шагу 4 в этом руководстве:
Теперь установите плагин:
После этого нам необходимо настроить плагин для корректной работы. Заходим в webpack.conf.js и добавляем следующие настройки:
Здесь мы указываем каталог, из которого хотим получить страницу для предварительной отрисовки. В нашем случае это корневой каталог. Также мы должны добавить список маршрутов, которые мы хотим предварительно рендерить. В демонстрационных целях возьму только первые четыре сообщения.
Мы также должны учитывать, что мы получаем данные асинхронно, поэтому, если мы продолжим создание приложения, следуя этому подходу, мы получим сгенерированный HTML без содержания. Для решения этой проблемы плагин предлагает три следующих варианта (дополнительную информацию см. В документации):
Вот и все, ребята! Теперь, если мы создадим приложение, мы получим предварительно обработанный HTML. Если вы хотите управлять метаданными, вы можете использовать один из доступных плагинов для Vue, например, vue-meta. Например, давайте добавим уникальный заголовок для каждой страницы. Для этого нам нужно установить плагин.
Добавьте его в main.js
И вставьте следующее в src / components / Post.vue
Достаточно сделать проиндексированное содержимое приложения, а также сделать его доступным для пользователей с отключенным JavaScript. Теперь поисковые системы и социальные сети могут читать метаинформацию нашего сайта. Также нам удалось сократить время загрузки FMP (первая значимая отрисовка), браузер не ждет полной загрузки JavaScript, а начинает рендеринг нашей страницы, как только загружается HTML. В результате пользователь может раньше начать получать информацию с нашего сайта.
Когда вам не нужна предварительная отрисовка
Используя простой плагин prerender-spa-plugin на этапе сборки, вы можете легко улучшить поисковую оптимизацию и повысить удобство использования вашего приложения Vue. К сожалению, есть несколько случаев, когда использование предварительной визуализации нецелесообразно.
- Контент, специфичный для пользователя: контент некоторой страницы, например содержимое страницы профиля пользователя должно отображаться только для определенного пользователя. На этапе сборки мы не знаем, кто именно откроет эту страницу, поэтому мы не можем выполнить предварительную визуализацию. В любом случае, если бы мы это сделали, то открыли бы личную информацию пользователя для всех.
- Часто меняющийся контент: если вы работаете над чем-то вроде чата, какого-либо приложения для онлайн-торговли или игры в реальном времени, где контент должен быть всегда актуальным, использование предварительной визуализации может быть неэффективным, поскольку он отображает старый контент до тех пор, пока клиентский JS не вступит во владение с последние данные. В качестве потенциального решения вы можете настроить свою сборку на повторную предварительную визуализацию каждый раз при изменении данных или достаточно часто, чтобы быть уверенным, что контент актуален. Но это может быть очень ресурсоемким для сервера. Для данных, которые обновляются даже чаще, чем каждую минуту, следует избегать предварительной отрисовки.
- Большое количество маршрутов: не рекомендуется предварительно визуализировать тысячи маршрутов, так как это займет много времени для создания вашего приложения.
В таких случаях лучше всего использовать рендеринг на стороне сервера, о котором вам расскажут в следующей статье.
Полезные ссылки
Официальная документация Vue
Документация плагина Prerender SPA
Изначально размещено на веб-сайте ADCI Solutions.
Автор - Дмитрий Чучин, Front-end разработчик ADCI Solutions
Дмитрий демонстрирует удивительную способность осваивать новые технологии. Более того, он стремится делиться своим опытом, обучая начинающих разработчиков и проводя занятия на образовательных мероприятиях. Также он любит кататься на сноуборде и горных велосипедах.
Следите за нами в социальных сетях: Twitter | Facebook | LinkedIn
