Деплой SSR приложений

Quasar поддерживает серверный рендеринг (SSR) на базе Node.js, что позволяет создавать высокопроизводительные приложения с улучшенной индексацией для поисковых систем. Основной принцип SSR заключается в генерации HTML на сервере перед отправкой его клиенту, в отличие от традиционного SPA, где HTML формируется на клиенте.

Для начала необходимо убедиться, что проект создан с поддержкой SSR. В терминале выполняется команда:

quasar create my-ssr-app

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

Необходимые зависимости для SSR включают:

  • express или любой другой серверный фреймворк для Node.js
  • quasar/wrappers для интеграции Quasar с серверной логикой
  • vue и vue-router для маршрутизации на сервере

Файл src-ssr/index.js отвечает за запуск Node-сервера и обработку запросов.

Конфигурация Quasar для SSR

В quasar.config.js необходимо задать следующие параметры:

ssr: {
  pwa: false,
  prodPort: 3000,
  middlewares: [
    'render' // основной middleware для рендеринга HTML
  ]
}

Ключевые моменты конфигурации:

  • prodPort — порт, на котором сервер будет доступен в продакшн-режиме.
  • middlewares — список middleware, которые обрабатывают HTTP-запросы перед генерацией страницы. Обычно достаточно 'render', который отвечает за рендеринг Vue-компонентов на сервере.
  • pwa — отключается для SSR-приложений, чтобы избежать конфликтов с сервис-воркерами.

Дополнительно можно настроить кэширование страниц на сервере через lru-cache или использовать CDN для ускорения отдачи статических ресурсов.

Маршрутизация и асинхронные данные

SSR требует предварительной загрузки всех данных перед рендерингом. В Quasar используется функция asyncData или композиционные API:

export default {
  async asyncData({ params }) {
    const response = await fetch(`https://api.example.com/item/${params.id}`)
    return { item: await response.json() }
  }
}

Эта функция вызывается на сервере перед генерацией HTML. Все возвращаемые данные инъецируются в компонент и доступны при клиентском гидрировании (hydration).

Для маршрутизации важно использовать history mode в vue-router, чтобы URL оставались чистыми:

const router = createRouter({
  history: createMemoryHistory(),
  routes
})

В SSR не используется createWebHistory, так как на сервере отсутствует объект window.

Сборка и деплой

Для продакшн-сборки выполняются команды:

quasar build -m ssr

Результатом будет папка dist/ssr со следующей структурой:

  • www — статические ресурсы (JS, CSS, изображения)
  • server — скомпилированный Node.js серверный код

Запуск сервера производится командой:

node dist/ssr/server/index.js

Для деплоя на VPS или облачные платформы (Heroku, AWS, DigitalOcean) рекомендуется:

  1. Копировать папку dist/ssr на сервер.
  2. Установить Node.js той же версии, что использовалась для сборки.
  3. Настроить переменные окружения (PORT, NODE_ENV=production).
  4. Использовать процесс-менеджеры вроде PM2 или systemd для управления сервером и перезапуска при сбоях:
pm2 start dist/ssr/server/index.js --name my-ssr-app

Оптимизация производительности

Для SSR важно минимизировать время генерации страницы на сервере:

  • Ленивая загрузка компонентов: использовать defineAsyncComponent для тяжелых блоков, чтобы рендеринг основных частей страницы происходил быстрее.
  • Кэширование: сохранять HTML-ответы часто посещаемых страниц, например, с помощью lru-cache.
  • Минимизация CSS/JS: Quasar автоматически выполняет tree-shaking и минимизацию, но можно дополнительно отключить ненужные плагины и компоненты.
  • Сжатие ответа: включить gzip или brotli через middleware Express для уменьшения объема передаваемых данных.

Интеграция с CDN и балансировщиками

Для больших проектов SSR полезно разносить статические файлы через CDN, а серверный рендеринг отдавать через балансировщик нагрузки:

  1. Настроить nginx для проксирования запросов на Node.js сервер.
  2. Статические файлы отдавать напрямую через CDN, что снижает нагрузку на сервер.
  3. Использовать ETag и Cache-Control для кеширования контента.

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

SSR-приложения требуют мониторинга производительности:

  • Использовать morgan или встроенные middleware для логирования HTTP-запросов.
  • Подключать мониторинг через New Relic, Datadog или встроенные метрики Node.js.
  • Отслеживать время рендеринга страниц (response-time) и ошибки гидрирования на клиенте.

Обработка ошибок

В Quasar SSR ошибки нужно обрабатывать как на сервере, так и на клиенте:

app.use((err, req, res, next) => {
  console.error(err.stack)
  res.status(500).send('Internal Server Error')
})

Важно возвращать корректные HTTP-коды для SEO и корректного поведения ботов поисковых систем.

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

Оглавление