Режимы работы Nuxt.js

Просмотров 54
Сложность:

Nuxt.js может работать в двух режимах. Сами разработчики рекомендуют запускать Nuxt.js в отдельном процессе.

Отдельный фронтенд

В качестве встроенного сервера в Nuxt.js используется Connect (https://github.com/senchalabs/connect). При запуске приложения у нас есть процесс только с фронтендом. Бэкенд устанавливаем отдельно. Запускаем процесс с бэкендом отдельно на другом порте.

Так как приложения запущены по разным адресам, на бэкенде нужно прописать CORS.

Если в режиме разработки вы вносите изменения в бэкенд, то фронтенд не пересобирается. Это ускоряет процесс разработки.

Также вы получаете полностью независимые два процесса, которые даже на Github обычно хранят в двух разных репозиториях.

Все крупные проекты имеют раздельные фронтенд и бэкенд.

Nuxt.render

Однако, есть и второй режим работы Nuxt.js - nuxt.render (https://nuxtjs.org/docs/2.x/internals-glossary/nuxt-render). Использование в качестве middleware для бэкенд фреймворка. Именно в таком режиме будет работать наше простое приложение.

За запуск Nuxt.js в таком режиме отвечают две настройки. Во-первых, в package.json прописаны инструкции по запуску приложения:

"scripts": {

"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",

"build": "nuxt build",

"start": "cross-env NODE_ENV=production node server/index.js"

}

Во-вторых, в файле index.js, который хранится в папке сервер указаны инструкции для Nuxt.js:

const { loadNuxt, build } = require("nuxt");

const isDev = process.env.NODE_ENV !== "production";

async function start() {

const nuxt = await loadNuxt(isDev ? "dev" : "start");

app.use(nuxt.render);

if (isDev) { build(nuxt) }

app.listen("3000");

}

В таком режиме не требуются CORS. Приложение работает в едином процессе. По своему опыту скажу, что для небольших сайтов и приложений это даёт небольшой рост в производительности относительно двух отдельных процессов. Сайт, на котором вы сейчас находитесь, работает именно в таком режиме.

Автор: Александр Дергунов
Дата публикации: 17.3.2021 г.
Поделиться:

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
2787 просмотров2787
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
49 просмотров49
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
51 просмотров51
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
54 просмотров54
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
62 просмотров62
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
48 просмотров48
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
31 просмотров31
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
51 просмотров51
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika