Prerendering для SPA

Пререндеринг в контексте SPA (Single Page Application) — это процесс генерации статического HTML для отдельных маршрутов приложения на этапе сборки. Он позволяет улучшить SEO, ускорить первую загрузку страницы и уменьшить нагрузку на клиентскую часть. В Quasar этот процесс интегрирован через возможности сборки с использованием Vue и Webpack.

Основные концепции

SPA и проблемы SEO SPA загружает контент динамически с помощью JavaScript. По умолчанию поисковые роботы видят минимальный HTML, что негативно сказывается на индексации. Пререндеринг решает эту проблему: для указанных маршрутов создается статический HTML, который сразу содержит готовый контент.

Пререндеринг vs SSR

  • SSR (Server-Side Rendering) – динамическая генерация страниц на сервере при каждом запросе.
  • Пререндеринг – статическая генерация страниц на этапе сборки. Пререндеринг проще в настройке, не требует серверной инфраструктуры и идеально подходит для сайтов с фиксированным контентом.

Настройка пререндеринга в Quasar

Quasar поддерживает пререндеринг через встроенные плагины Vue и quasar.conf.js. Основная идея — определить маршруты, которые должны быть пререндерены, и сгенерировать для них HTML на этапе сборки.

  1. Установка зависимостей Для пререндеринга рекомендуется использовать пакет prerender-spa-plugin, который совместим с Vue и Webpack:

    npm install prerender-spa-plugin --save-dev

  2. Конфигурация Webpack в Quasar В файле quasar.conf.js необходимо подключить плагин через extendWebpack:

    const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');

module.exports = function (/* ctx */) {
  return {
    build: {
      extendWebpack(cfg) {
        if (process.env.NODE_ENV === 'production') {
          cfg.plugins.push(
            new PrerenderSPAPlugin({
              staticDir: path.join(__dirname, 'dist/spa'),
              routes: ['/home', '/about', '/contact'],
              renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
                renderAfterDocumentEvent: 'prerender-ready',
                headless: true,
              }),
            })
          );
        }
      },
    },
  };
};

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

    • staticDir — папка с финальной сборкой SPA.
    • routes — массив маршрутов для пререндеринга.
    • renderAfterDocumentEvent — событие, после которого контент считается готовым для генерации HTML.

  3. Подготовка событий для рендеринга В компоненте Vue нужно отправить событие prerender-ready, когда весь асинхронный контент загружен:

    mounted() {
  this.$nextTick(() => {
    window.dispatchEvent(new Event('prerender-ready'));
  });
}

Динамические маршруты и асинхронные данные

Пререндеринг статичен, поэтому для маршрутов с динамическими параметрами (/product/:id) нужно заранее определить список всех возможных значений и включить их в routes. Асинхронные данные должны быть загружены до генерации события prerender-ready. Это может потребовать использования Vuex или прямого вызова API в async mounted.

Оптимизация процесса

Минимизация JavaScript Пререндеринг сокращает время до интерактивности, но не уменьшает общий объем JS. В Quasar можно включить минификацию и разбивку на чанки:

build: {
  vueRouterMode: 'history',
  uglifyOptions: { compress: true },
  analyze: true,
}

Кэширование Сгенерированные HTML-файлы могут кэшироваться на CDN, что дополнительно ускоряет загрузку для пользователей.

SEO и мета-теги Пререндеринг позволяет корректно использовать vue-meta для генерации уникальных мета-тегов на каждом маршруте:

export default {
  metaInfo() {
    return {
      title: this.pageTitle,
      meta: [
        { name: 'description', content: this.pageDescription }
      ]
    };
  }
}

Ограничения пререндеринга

  • Динамический контент на клиенте: элементы, обновляющиеся после события prerender-ready, не попадают в статический HTML.
  • Большое количество маршрутов: пререндеринг всех страниц может значительно увеличить время сборки. В таких случаях эффективнее использовать комбинацию SSR и SPA.
  • Сложная интерактивность: приложения с тяжелым взаимодействием (например, игры или редакторы) не выигрывают от пререндеринга.

Интеграция с Quasar CLI

Quasar CLI полностью поддерживает расширение сборки Webpack, что упрощает включение пререндеринга. Дополнительно можно использовать плагины для генерации sitemap, что совместимо с маршрутизатором Vue:

const SitemapPlugin = require('sitemap-webpack-plugin').default;

cfg.plugins.push(
  new SitemapPlugin({ base: 'https://example.com', paths: ['/home', '/about'] })
);

Это обеспечивает, что статический контент сразу доступен поисковым системам.

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

Оглавление