Еще о SEO

Case study с сайта Strapi

Наше одностраничное приложение (SPA) на базе Nuxt. js генерируется статически и передается через CDN по всему миру для максимальной скорости и доступности. Это необычно для электронной коммерции, но позволяет нам поддерживать множество продуктов без необходимости предварительно рендерить и статически генерировать тысячи страниц во время сборки/развертывания, так как мы столкнулись с этой проблемой на ранних этапах разработки.

Мы используем CDN Netlify и их предварительный рендерер, который обрабатывает запросы для SEO и обновлений, поскольку у нас обычно нет серверных или индексных файлов.

Для Seo можно использовать пререндереры хостеров, как здесь.

#seo #nuxt

Забавный твит

Моя жена только что сказала мне, что сайт по покупке билетов не работает. Оказывается, она просто нажимала кнопку до того, как JS закончил гидратацию, поэтому ничего не происходило 🙈. Спасибо, SSR...

#ssr #nuxt

12 марта 2024 года в Core Web Vitals (основные показатели качества вебсайта) заменят
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.

В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.

В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.

#webvitals #nuxt #google

Case study о вреде Nuxt и ошибках в архитектуре

VueStorefront, предлагавший услуги Frontend-as-a-Service, а именно, фронтенд для онлайн магазинов для подключения к headless e-commerce решениям, так и не смог за 4 года апгрейднуть Nuxt со второй на третью версию и в расстроенных чувствах решил переехать на React и Next.js, попутно сменив название на Alokai

При выборе технологий для магазина Arty-Crafty я долго изучал VueStorefront, но так и не понял, что это за зверь и с чем его едят. Теперь это проблема реактовцев.

#nuxt #ecommerce #vuestorefront

Nuxt 4 собираются выпустить к 14 июня 2024, обгоняя версионность Vue.js

#nuxt

Для накстовцев наконец тоже придумали свою сертификацию

Кстати, если кто встречал в интернете образцы вопросов для Vue.js Developer сертификации, оставьте в комментариях ссылку, пожалуйста.

#nuxt #certification

Самое время узнать, за счет чего главная лендинговая статичная страница GitLab смогла набрать 13Мб в скриптах

На скриншоте бандлофобии разрезолвились не все пакеты

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

#gitlab #optimization #nuxt #i18n

Немного OSINT-a в ленту.

Давайте еще поизучаем результаты исследования бандла лендинга GitLab, потому что это интересно и познавательно.

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

На третьем месте хорошая библиотека для генерации налету диаграмм по тексту mairmaid . Я тоже хотел поставить её на Vue-FAQ, поставил, посмотрел насколько она просадила размер бандла и производительность в браузере, убрал и заменил генерацию налету на статичные заранее сгенеренные ею картинки ради UX.

На втором - slippers-ui, это гитлабовский относительно небольшой (20 компонент) UI kit. Без какого- либо тришейкинга и оптимизации, естественно. Очень много, с учетом того, что любая современная UI библиотека весит в несколько раз меньше.

Ну и победитель - то, за что так любят Nuxt. Это когда он берет что-то хорошее и делает его еще лучше. В этот раз он взял vue-i18n, естественно, для интернационализации.

Используя pkg-size.dev смотрим сперва на vue-i18n, отключив учет peer dependencies:

Install size: 2.8MB / 6 packages
Bundle size: 73KB minified (23KB gzip) / 9 modules

Очень неплохо для i18n библиотеки

То же с @nuxtjs/i18n:

Install size: 61MB / 239 packages
Bundle size: Не собрался (ошибки)

Error: Process exited with code 1
✘ [ERROR] No matching export in "node_modules/unicorn-magic/default.js" for import "toPath"

Bundlephobia тоже дала ошибки при сборке

Самая простая реализация i18n пишется в один composable. Но на Nuxt-e всё намного серьезней.

#nuxt #optimization #i18n #gitlab

Сегодня Nuxt 2 всё

End-of-Life

#nuxt

Аргументация против глобальных автоимпортов (типа тех, что в Nuxt) от Artyom Tuchkov

1. Это явно - ты всегда видишь, откуда взялся компонент и в один клик можешь провалиться в него, а не в *.d.ts ;)

2. Это наглядно видно не только в редакторе, но и на всяких гитхабах, когда смотришь там код, с автоимпортами тебе придется гадать, откуда взялся компонент

3. Если проект вырастает во что-то большее, чем маленький пет, то количество компонентов уже не даст нормально и лампово работать с автоимпортами, если их названия будут собираться на основе папочек, где они лежат, а в больших проектах это вообще самоубийство

4. Не нужно генерировать портянку *.d.ts для того, чтобы редакторы видели их, и, как следствие, без них ты получаешь более качественный тулинг и анализ твоего кода

5. Ты уверен, что тришейкинг работает правильно и ты явно контролируешь загрузку каждого конкретного компонента в каком-либо месте, а не полагаешься на то, что за тебя это каким-то магическим образом сделает автоимпорт

6. Импорты может проставлять сама IDE, а еще их можно сворачивать в 1 строку, если визуально отвлекают

#architecture #bestpractices #tip #nuxt