Vue.js – фреймворк для создания пользовательских интерфейсов и одностраничных приложений (SPA). Nuxt.js – это тоже фреймворк, только построенный на базе Vue, т.е. расширяющий его функциональность с фокусом на удобство для разработчика.
Что есть в Nuxt, чего нет во Vue?
Две основные фичи – серверный рендеринг и статическая генерация. И кое-что еще.
Серверный рендеринг
Архитектура одностраничных приложений подразумевает, что html страница в проекте всего одна, да и содержит она обычно boilerplate-разметку и подключение js. Server Side Rendering же позволяет генерировать html на сервере.
Для приложений это, зачастую, не важно. А вот для проектов вроде блогов, журналов или интернет-магазинов это может добавить минимум две проблемы:
- отсутствие SEO
- низкая скорость работы
Рассмотрим подробнее.
Проблемы на поиске
Мы можем поменять мета-теги (title, description) во vue приложении, но без серверного рендеринга они добавятся после подключения js и только на клиенте (в браузере). Роботы же увидят одинаковую пустую html страницу на каждый url. Да, некоторые роботы уже умеют работать с js, но далеко не все и с ограничениями.
Приложение, вроде внутренней CRM для автосалона, может быть полностью закрыто от индексации с содержимым доступным только авторизованным пользователям. Для интернет-магазина отсутствовать в поиске – это проблема.
Кстати альтернативное решение на замену серверному рендерингу – это пререндеринг, о котором поговорим в следующих статьях.
Скорость работы
Продолжим рассматривать пример с интернет-магазином. Предположим, пользователь просматривает карточку товара. Рассмотрим типовой сценарий. С браузера отправляется ajax запрос на api-ендпоинт, возвращается json с данными по товару, приложение показывает данные пользователю.
Но содержимое статьи или описание товара навряд ли будут часто меняться. Мы можем закешировать ответ на запрос на сервере, чтобы не ходить лишний раз в базу данных, но с серверным рендерингом на nuxt мы можем закешировать этот ответ и на клиенте. Это снижает нагрузку на сервер и повышает скорость работы сайта. Это может снижать и издержки на инфраструктуру, если мы рассматриваем магазины с десятками-сотнями тысяч товаров.
Не могу не отметить, что вообще-то существует плагин vue-server-renderer, который позволяет добавить ssr без nuxt, но с последним это делается намного проще.
Статическая генерация
Вкратце означает возможность нагенерировать html страниц на build этапе. А так как у нас набор статических файлов, мы можем размещать их хоть на shared-хостинге, нам больше не нужен запущенный node.js сервер.
Используется, зачастую, не для превращения сайта в статический, а для ускорения работы.
Если же необходимо создать статический сайт, то возможностей тут хватает и без Nuxt.js.
Другие возможности Nuxt
Nuxt в целом упрощает работу с частью Vue функциональности, в этом его основная идея. Например, для работы с routes приложения на чистом Vue, нам придется объявить свойство routes во vue-router и прописывать свойства для каждой страницы в приложении. Nuxt же создаст этот объект самостоятельно, основываясь на файловой структуре. То же самое произойдет и с vuex модулями.
Также у nuxt есть богатая инфраструктура, еще мощнее расширяющая функциональность. Из примеров – nuxt auth или nuxt content. Есть свой плагин для axios.
Когда стоит использовать Vue?
В моем представлении, всегда, когда не нужен SSR. Все таки чистый Vue представляет больше свободы, но это, разумеется, вкусовщина.
Также в третьем Vue значительно улучшилась поддержка TypeScript, а вот в TypeScript в Nuxt все еще ругают.