Vite SSG: статическая генерация для Vue 3

Vite SSG (Static Site Generation) — это плагин для Vite, который превращает Vue 3 приложение в набор статических HTML-страниц на этапе сборки. В отличие от SPA, где контент рендерится в браузере, SSG отдаёт готовый HTML — мгновенная загрузка и идеальное SEO.

Почему Vite SSG

  • Скорость сборки. Vite использует esbuild для трансформации и Rollup для бандлинга. Сборка 500+ страниц занимает менее 120 секунд.
  • Автоматический code-splitting. Каждая страница получает только нужный ей JavaScript.
  • Lighthouse 100/100. Статический HTML + минимальный JS + правильные мета-теги = максимальные баллы.
  • Горячая замена модулей (HMR). В dev-режиме изменения в Markdown-файлах применяются мгновенно без перезагрузки.

FAQ

Q: Чем SSG лучше SSR? A: SSG генерирует HTML один раз при сборке. SSR генерирует HTML при каждом запросе. Для контентных сайтов (блогов, документации) SSG быстрее, дешевле и надёжнее — не нужен Node.js сервер.

Q: Работает ли SSG с динамическими маршрутами? A: Да. Vite SSG автоматически обнаруживает все маршруты Vue Router и генерирует HTML для каждого. Маршруты в GitHub CMS строятся динамически из content/blog/.

Q: Как обновить сайт после добавления статьи? A: Push в main → GitHub Actions → npm run build → rsync на VPS. Полный цикл: 2-3 минуты.

Попробуйте сами

GitHub CMS использует Vite SSG из коробки. Клонируйте репозиторий, запустите npm run dev и убедитесь в скорости сборки на своих данных.

Vite SSG (Static Site Generation) — это плагин для Vite, который превращает Vue 3 приложение в набор статических HTML-страниц на этапе сборки. В отличие от SPA, где контент рендерится в браузере, SSG отдаёт готовый HTML — мгновенная загрузка и идеальное SEO.
## Почему Vite SSG - **Скорость сборки.** Vite использует esbuild для трансформации и Rollup для бандлинга. Сборка 500+ страниц занимает менее 120 секунд. - **Автоматический code-splitting.** Каждая страница получает только нужный ей JavaScript. - **Lighthouse 100/100.** Статический HTML + минимальный JS + правильные мета-теги = максимальные баллы. - **Горячая замена модулей (HMR).** В dev-режиме изменения в Markdown-файлах применяются мгновенно без перезагрузки.

FAQ

## Попробуйте сами GitHub CMS использует Vite SSG из коробки. Клонируйте репозиторий, запустите `npm run dev` и убедитесь в скорости сборки на своих данных.