Настройка SSR режима

Server-Side Rendering (SSR) в Quasar позволяет рендерить приложения на сервере перед отправкой HTML пользователю. Это улучшает SEO, ускоряет первый рендер и повышает восприятие производительности. Настройка SSR в Quasar требует последовательного подхода, включающего конфигурацию проекта, серверной логики и интеграцию с фронтенд-компонентами.

Инициализация проекта с SSR

При создании нового проекта Quasar необходимо указать поддержку SSR:

quasar create my-ssr-app

В процессе выбора опций следует включить поддержку SSR. Quasar создаст структуру каталогов, включающую:

  • /src-ssr — серверная логика и middleware.
  • /src/router — маршруты, используемые как на клиенте, так и на сервере.
  • /src/store — Vuex или Pinia для хранения состояния.
  • /quasar.conf.js — основной конфигурационный файл, где можно включать SSR-специфичные настройки.

Конфигурация quasar.conf.js для SSR

Основные блоки, отвечающие за SSR:

module.exports = function (/* ctx */) {
  return {
    ssr: {
      pwa: false,               // отключение PWA, если не требуется
      prodPort: 3000,           // порт для production сервера
      maxAge: 1000 * 60 * 60 * 24, // кеширование HTML
      middlewares: [
        'render',               // обязательный middleware для рендера
        'customMiddleware'      // можно добавить собственные
      ]
    },
  }
}

Ключевые моменты:

  • prodPort — порт, на котором SSR-сервер будет слушать запросы.
  • maxAge — определяет время кеширования HTML для ускорения повторных запросов.
  • middlewares — последовательность функций, которые обрабатывают запрос до генерации HTML. Порядок важен.

Структура /src-ssr

В каталоге /src-ssr содержатся следующие важные файлы:

  • index.js — точка входа SSR сервера.
  • middlewares/ — каталог для кастомных middleware.
  • server-entry.js — серверный рендеринг Vue приложения.
  • extension.js — конфигурация дополнительных модулей.

Пример простого middleware:

module.exports = function (req, res, next) {
  console.log(`[SSR] URL запроса: ${req.url}`);
  next();
}

Middleware подключаются в quasar.conf.js через массив ssr.middlewares.

Настройка маршрутов и состояния

SSR требует корректной работы роутинга и состояния. В Quasar маршруты определяются в /src/router/routes.js:

const routes = [
  {
    path: '/',
    component: () => import('pages/IndexPage.vue')
  },
  {
    path: '/about',
    component: () => import('pages/AboutPage.vue')
  }
]

Для сохранения состояния между сервером и клиентом используется Vuex или Pinia. Сервер рендерит HTML с текущим состоянием, которое передается на клиент:

export function createStore () {
  const store = createPinia()
  return store
}

Передача состояния в клиент осуществляется через глобальный объект window.__INITIAL_STATE__.

Работа с асинхронными данными

При SSR важно загружать данные на сервере, чтобы клиент получал полностью сформированный HTML. Используется asyncData или хук beforeMount с серверной проверкой:

export default {
  async asyncData({ store }) {
    await store.dispatch('fetchData')
  }
}

Quasar автоматически вызывает этот метод при серверном рендеринге, если настроена правильная структура middleware и store.

Кэширование и оптимизация

SSR-сервер Quasar поддерживает встроенное кеширование HTML. Настройка maxAge в quasar.conf.js позволяет хранить сгенерированные страницы в памяти. Дополнительно можно использовать внешние кеш-системы, например Redis, для хранения HTML и снижения нагрузки на сервер.

Пример интеграции кеша:

const NodeCache = require('node-cache');
const ssrCache = new NodeCache({ stdTTL: 60 });

module.exports = function(req, res, next) {
  const cachedPage = ssrCache.get(req.url)
  if (cachedPage) {
    return res.send(cachedPage)
  }
  next()
}

Запуск и отладка SSR

Запуск приложения в режиме разработки:

quasar dev -m ssr

Для production:

quasar build -m ssr
node .quasar/ssr-server/index.js

Отладка включает проверку:

  • правильности рендеринга страниц на сервере,
  • наличия переданного состояния на клиенте,
  • корректной работы middleware и асинхронных данных.

Интеграция с PWA и другими модулями

Quasar позволяет совмещать SSR с PWA, но требует осторожности. В quasar.conf.js:

ssr: { pwa: true }

При этом следует учитывать:

  • кеширование PWA и SSR не дублируется,
  • асинхронные данные должны загружаться до генерации сервис-воркера,
  • роутинг и state должны быть синхронизированы между клиентом и сервером.

Поддержка стилей и ресурсов

Все CSS и JS-файлы, подключаемые в проекте, должны быть совместимы с SSR. Quasar автоматически обрабатывает стилевые файлы через Vue SSR сборку. Для сторонних библиотек с прямым доступом к window или document необходимо использовать условные проверки:

if (process.env.SERVER === false) {
  // код, работающий только на клиенте
}

Это предотвращает ошибки при рендеринге на сервере.

Логирование и мониторинг

Для производственного SSR важно иметь детальное логирование. Quasar позволяет подключать middleware для логирования запросов и ошибок:

const morgan = require('morgan')
app.use(morgan('combined'))

Это позволяет отслеживать:

  • скорость генерации страниц,
  • ошибки серверного рендеринга,
  • загрузку middleware и асинхронных операций.

Настройка SSR в Quasar — это последовательная работа с конфигурацией, серверной логикой, состоянием и роутингом. Правильная организация проекта обеспечивает быструю отдачу HTML, корректное состояние приложения на клиенте и стабильную производительность.

Оглавление