Настройка Nuxt

Nuxoblivius имеет встроенную поддержку Nuxt 3, поэтому его легко подключить в проект.

В nuxt.config.ts нужно указать модуль и его настройки:

export default defineNuxtConfig({
  modules: [
    "nuxoblivius/nuxt", // Подключаем модуль
  ],

  nuxoblivius: {
    logs: true,
    clientLogs: true,
    rules: {
      "/api": "http://my-api",
    },
  },
});

Все параметры для nuxoblivius:

logs: boolean — включает серверные логи.

При активации в консоли отображается ход выполнения запросов, что облегчает отладку и позволяет отслеживать работу объектов Record.

clientLogs: boolean ^1.7.12 - включает клиентские логи, в браузере.

При активации в консоли браузера отображается процесс выполнения запросов. Это упрощает отладку и даёт возможность отслеживать работу объектов Record.
Дополнительно, при включённом SSR можно увидеть, был ли запрос выполнен до гидрации или уже после неё.

rules: globalThis.Record<string, string> - позволяет задать правила для Record при SSR.

С их помощью определённые запросы могут выполняться напрямую (по указанному адресу), минуя NitroRouteRules.

Eсли запрос начинается с указанного ключа, он заменяется на полный URL.

Пример:

• Исходный запрос: /api/posts
• Правило: '/api' -> 'http://my-api'
• Результат на сервере: http://my-api/api/posts

Как работает SSR в Nuxt

Когда ваш код выполняется на сервере, Nuxt использует стандартный fetch (обёрнутый в useAsyncData). Это значит, что можно писать запросы так же, как и на клиенте, но данные будут загружены ещё до отдачи HTML-страницы пользователю.

Как обрабатывает запросы Nuxoblivius

Чтобы было понятно, что происходит «под капотом», разберём процесс пошагово:

1. Запуск Nuxt

   При старте подключается модуль nuxoblivius/nuxt, который настраивает взаимодействие Nuxt и Nuxoblivius.

2. Запрос с клиента

   Когда клиент обращается к серверу, Nuxoblivius создаёт уникальный uid запроса. Это нужно, чтобы отслеживать логи и удобно отлаживать.

3. Получение данных (Запросы от Record)

   Когда в коде вызывается useAsyncData, Nuxoblivius перехватывает этот вызов и делает запрос на указанный ресурс. Если включены правила (rules), то на Сервере URL может быть автоматически заменён на другой.

4. Формирование HTML-страницы (SSR Rendering)

   После того как все данные загружены, Nuxt рендерит HTML и отдаёт его клиенту. Затем Nuxoblivius очищает временные данные, чтобы они не утекали между запросами.