Я часто себя спрашиваю, а стоит ли пробовать что то новое, когда старое удовлетворяет твоим потребностям. И вы знаете, как не странно, но я стал отвечать - ДА, стоит. Если провести аналогию сравнения старого любимого ресторана за углом твоего дома и нового ресторана где то на другом конце города, но по рассказам ваших друзей подают там удивительного омара, возникает желание сравнения. Уж такое ли там удивительный омар и чем же он так удивителен чем в любимом ресторане. Спустя время, все равно идешь и пробуешь новое. Не скажу что уж в том ресторане омар настолько удивителен, но сравнить стоило.
А теперь от NUXT JS, ворвавшимся в мир web технологий заявив как вкусно он готовит блюдо. Вот и снова пробую новое. К счастью первые итоги были весьма удивительными. Nuxt поражает своей простотой в реализации решений которые нужны, здесь и сейчас, а не завтра. Итак по порядку.
1. Развернуть NUXT и не опечалится.
Изучив достаточно легкую документацию, в несколько кликов разворачивается готовый и отзывчивые web сервер не требующий ничего сверх естественного.
Если рассмотреть сборку Nuxt проекта в CI\CD, о которой я неоднократно писал, все настолько просто, что контейнер готов буквально за несколько минут. Как это сделать можете посмотреть на моем канале. По просьбам коллег и друзей я начал создание простого курса из 5 занятий который позволит на 100% развернуть проект на Nuxt.
2. Эксплуатация - культура продукта и элегантность оболочки.
Как не странно, еще с со второй ветки Nuxt когда я с ним впервые столкнулся, решение было простым. Удобная конфигурация, не громоздкий стиль работы с компонентами.
Файловый роутинг - что это? Сразу начинаются мысли что это для сайтов со 100 страницами ну может какого то блога и зайдет. Я ошибался и очень сильно.
Когда мы с ребятами собрали первый каталог товаров на 200 тыс товаров и запустили синтетический тест, как это делали в React и на чистом VUE я был восхищен. Поэтому файловый роутинг в NUXT - это надежное решение!
3. Скорость работы - когда об этом практически не нужно думать.
Nuxt позволяет сосредоточится на коде и своем решении, не задумываясь о сложной архитектуре. Конечно не все так гладко и нужно думать о том как вы пишите код, но из коробки Nuxt позволяет получить гораздо лучшее решение чем React или Vue.
Я не нацелен сравнивать продукты, я лишь говорю о том, что для меня есть реальность. За свою карьеру видел многое, пробовал многое но стек на протяжении последних пары лет уже работаю с Nuxt и не жалею.
Nuxt & SSR из коробки.
Может это конечно и звучит громко, но да. Начиная использовать Nuxt прописав несколько строг в конфигурации, можно получить вменяемое решение и сосредоточится на коде.
SSR в NUXT работает стабильно, надежно и быстро. Есть несколько подводных камней на счет скорости серверного рендеринга, но и тут есть решения которые есть в документации и рассказаны отлично.
Чтобы включить данный компонент достаточно в файле nuxt.config.ts указать одну строчку
export default defineNuxtConfig({
ssr: true,
})
Вот собственно и все, мы включили волшебную кнопочку ускорения нашего сайта. Для дальнейшей работы нужно конечно обращаться к документации, в которой мы четко можем понять как дополнить функционал.
На что стоит обратить первое внимание при внедрении SSR
Серверная и браузерная среда, как использовать элементы?
Так как находитесь в среде Node.js, у нас есть доступ к объектам Node.js, таким как req и res. У вас нет доступа к объектам window или document, поскольку они принадлежат среде браузера. Однако вы можете использовать window или documentс помощью элементов beforeMount или mounted.
beforeMount () {
window.alert('Привет мой читатель');
}
mounted () {
window.alert('Привет мой читатель');
}
Выглядит не сложно, в работе будет осложнено постоянным отслеживанием данного поведения.
Ссылки и элементы кода для отзывчивого Frontend.
В своем проекте рекомендую использовать правильные линки в формате <NuxtLink>. Привычные <a> тоже будут работать, но это не верно, а так же несет в себе не полное использование технологии.
Неприятное поведение в некоторых браузерах.
Основной особенностью SSR является пререндер на стороне сервера, когда браузер уже получил все готовое. Именно тут и начинаются некоторые не очень приятные моменты, но решаемые очень элегантно.
1. Ссылки на телефон. Привычный нам тег
<a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a>
Вроде все красиво и должно работать, но нет не выйдет. Для решения ставим в проект meta тег, для того чтоб остановить преобразование:
<meta name="format-detection" content="telephone=no" />
и все прекрасно начинает работать.
Подведем итоги по SSR в Nuxt.
Как уже говорил, технология достаточно простая. Позволяет легко укорить сайт. Для меня SSR в проектах включен всегда. Вся разработка только с данным параметром и отслеживанием, что где происходит.
Если у вас уже есть проект на Nuxt, он большой и есть много легаси кода, не спешите включать. Формально нужно сначала оценить что у вас уже работает на Server, а что вы отдаете на Frontend. Определив объемы можно принять решение включить или нет.
Важный момент нагрузки на сервера. При включенном SSR нагрузка выше, дольше происходит build, нужно все это взвешивать.
Был рад, что вы дочитали до конца, подписывайтесь и задавайте вопросы. С удовольствием готов провести индивидуальную встречу, чтоб рассказать подробней о технологии.
