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

Nuxt.js, минималистичный фреймворк, который первоначально был выпущен три года назад, кажется, набирает обороты и привлекает больше сторонников после стабильного выпуска в конце 2019 года. На данный момент его репозиторий имеет более 25 тысяч звезд, и пользователи активно улучшают фреймворк. . Nuxt работает поверх Vue.js и предназначен для создания универсальных приложений, а также статических сайтов гораздо более простым способом.

Универсальные приложения

Одностраничные приложения становятся все более и более популярными, потому что они позволяют веб-сайту мгновенно реагировать на взаимодействие с пользователем и соответствующим образом изменять контент. SPA, разработанные с помощью Vue.js, визуализируются на стороне клиента, что означает, что их можно настроить намного быстрее. Однако их труднее индексировать поисковыми системами, так как сайт содержит пустую index.html страницу.

Nuxt.js, с другой стороны, позволяет разрабатывать универсальные приложения, которые предварительно загружаются на сервер и отправляют обработанный HTML-код при получении запроса от браузера. HTML включает в себя каждый маршрут на веб-сайте, что ускоряет загрузку и позволяет поисковой системе сканировать страницу, тем самым улучшая SEO.

Статические сайты

Кроме того, с помощью фреймворка Nuxt можно генерировать статические сайты с помощью команды nuxt generate без необходимости запускать Node.js на серверной части. Он создает HTML для каждого маршрута и сохраняет его в своем собственном файле. Это позволяет отображать веб-приложения без сервера.

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

Разделение кода

Поскольку Nuxt позволяет генерировать HTML для каждого маршрута, каждая страница также получает файл JavaScript. Это позволяет частям приложения генерироваться асинхронно, только когда они инициируются пользователями. Разделение кода помогает сократить время загрузки, поскольку один файл Javascript значительно легче, чем все веб-приложение.

Структура каталога

В отличие от Vue.js, Nuxt.js имеет структуру каталога по умолчанию, которая упрощает начало разработки веб-приложения.

Макеты позволяют добавлять дополнительные макеты, кроме default.vue, который создается по умолчанию.

Страницы содержат все представления и маршруты, составляющие основу приложения.

Компоненты — это просто повторно используемые компоненты во всем приложении.

Store управляет состоянием с помощью Vuex.

Static содержит все статические файлы, которые, скорее всего, не будут изменены во время разработки приложения (favicon, robots.txt).

Ресурсы включают нескомпилированные ресурсы, такие как стили (less, scss), шрифты или изображения.

Плагины — это плагины JavaScript, которые необходимо загрузить перед запуском приложения Vue.

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

nuxt.config.js — это файл, который используется для хранения пользовательских конфигураций разработчика.

Модули в Nuxt.js

Nuxt.js передает структуру модуля. Модули — это просто отдельные функции, которые запускаются вместе со стартом приложения.

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

Официальные модули Nuxt включают:

- @nuxtjs/axios — безопасная и простая интеграция nuxt с axios;

- @nuxt/http — универсальная альтернатива axios;

- @nuxtjs/pwa — стабильное PWA-решение;

- @nuxtjs/auth — модуль аутентификации пользователей.

Другие модули, созданные сообществом Nuxt.js, доступны на GitHub.

Заключение

Nuxt.js — полезное дополнение к фреймворку Vue не только при разработке универсальных приложений или создании статических сайтов. Nuxt помогает оптимизировать PWA и SPA, чтобы они работали быстрее и индексировались поисковой системой. Кроме того, самым большим преимуществом фреймворка является возможность создавать бесшовные и легкие приложения.

Автор: Дамиан Калвик, веб-разработчик Moonbite S.A.