Еще о 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

Nuxt славится своей агрессивной маркетинговой политикой, Vue на фоне его идет тихой сапой.

Но если посмотреть на NPM статистику скачивания пакетов для того и другого, то видно, что проектов на Vue где-то в 6-7 раз больше, чем проектов на Nuxt

#nuxt #vuejs #stats

К Дурову можно по-разному относиться, но людей, у которых руки растут не из жопы, он умеет находить

Chrome DevTools -> Memory -> Total JS heap size

#benchmark #telegram #nuxt

Web WhatsApp - 170MB
Slack - 125MB
VK.com - 120MB
Dzen.ru - 70MB
Nuxt.com - 40MB
Google Calendar - 40MB
Google.com (пустой) - 30MB
Web Telegram - 25MB
Vuejs.org, vue-faq.org - 5-10MB

Кратко, о чем нам поведал безвременно ушедший

В мире фронтед мета-фреймворков крутятся огромные деньги в виде рекламы, спонсорства и донатов - сотни миллионов долларов. Деньги просто так никто давать не будет. Смысл в том, чтобы втянуть молодых (18-20 лет) разработчиков в работу на этих фреймворках, чтобы потом стричь деньги со стартапов и компаний, которые будут нанимать подобных разработчиков, потому что размещать эти проекты будут на платформах типа Vercel, стоимость хостинга на которой в тысячи раз больше обычного хостинга.

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

При этом огромные деньги тратятся на продажных ютюберов и прочих инфлюенсеров, агрессивно впаривающих тебе эту шнягу из каждого утюга. Убеждающих, что если ты не используешь их "современные технологии", то ты какой-то ущербный. Часто это работает наподобие сетевого маркетинга типа продаж БАДов или продукции Avon.

В частности, следствием этого является, также, многолетняя ложь, что SEO без SSR невозможно, что Web Vitals с ними лучше и прочая маркетинговая ахинея.

Так что Nuxt, ребята, это не про свободу open source-а и лучшие практики.

Лучшие практики - это когда ты как пастушок с дудочкой пасешь коровок на экологически чистых горных альпийских лугах.

А когда специально выведенная генно-модифицированная корова, ни разу не видевшая белого света, обколотая тысячами различных антибиотиков и гормонов, стоит в стойле фермы с вывеской Vercel, с транспортером комбикорма перед носом, транспортером говна позади, и шнырявые разработчики с доильными аппаратами и лопатами для говна переползают от одной к другой, - это, ребята, называется бизнес.

#nuxt #verсel #ssr

Попадают три кота в кошачий приют. Первый - кот ангулярщика, второй - реактера, третий - накстовца. Дают им каждому по миске с китекэтом. 

Кот ангулярщика вываливает миску на пол, раскладывает корм ровными прямоугольниками, глядит некоторое время на них удовлетворенно, съедает корм и тихонько ложится спать довольный.

Кот реактера также высыпает корм, раскладывает из него какой-то архитектурный план, долго что-то двигает, думает, меняет детали местами, наконец съедает всё и чинно ложится спать.

Кот накстовца высыпает еду на пол, напряженно смотрит на нее, начинает неистово долбить корм миской, раздалбывает его в пыль, раскладывает из этой пыли три дороги, вынюхивает их, трахает первых двух котов, падает на спину и колошматя лапами по полу в истерике орет - "Бл.дь, я не могу так работать!"

#humor #nuxt

Интересная табличка

Google проверяет какие сайты проходят их тест на Web Vitals

Как видим, у Vue результаты значительно лучше, чем и SSR-ного Nuxt, одним из заманивающих доводов которого вроде бы и является хорошие веб метрики.

Также очень точно подтвердился наш подсчет по npm пакетам о соотношении сайтов на Vue и Nuxt - Vue примерно в 6-7 раз больше.

Ну и если отмотать на статистику 2020 года, то можно увидеть, что React превалировал над Vue в 10 раз. Сейчас - примерно в 2.

Script setup - this is how it's done.

#vuejs #nuxt #react #stats

Никто не заметил, что Svelte быстро догоняет Nuxt на гугловской статистике?

На сайте есть ссылка на методику подсчета, выглядит вполне убедительно.

#svelte #nuxt #stats