Генерация статического сайта с помощью Nuxt

Введение

Статические сайты приобретают всё большую популярность благодаря своей скорости, безопасности и простоте развертывания. В современном веб-разработке инструменты, способные автоматизировать создание статических сайтов из современных JavaScript-приложений, чрезвычайно востребованы. В этой статье вы узнаете, как использовать Nuxt для генерации статических сайтов: пошаговая настройка, внутренние механизмы, преимущества, настройки рендеринга и лучшие практики. Всё подкреплено примерами и разъяснениями, что особенно важно, если вы только приступаете к изучению Jamstack и статической генерации с помощью Nuxt.

Что такое Nuxt и почему его выбирают для статических сайтов

Nuxt — это фреймворк для создания приложений на Vue.js с ориентиром на универсальность: он может работать как серверный рендеринг, SPA или как статический сайт. Если вам нужна высокая производительность, простота хостинга и снижение нагрузки на сервер, Nuxt Static Generation (SSG) — именно то, что стоит рассмотреть.

Преимущества генерации статического сайта на Nuxt

• Скорость загрузки — все страницы отдаются как статические HTML-файлы.
• SEO-дружелюбие — контент доступен поисковым ботам сразу, нет необходимости в рендеринге на стороне пользователя.
• Более простое и дешевое размещение — можно использовать CDN, GitHub Pages, Vercel и другие статические хостинги, без своего сервера.
• Безопасность — отсутствие уязвимостей, связанных с серверным кодом.
• Гибкость — Nuxt облегчает подключение к CMS и API для генерации контента.

Как работает генерация статического сайта в Nuxt

SSR, SPA и SSG — основные режимы

Nuxt поддерживает несколько режимов работы:

• SSR (Server Side Rendering) — HTML генерируется на сервере по запросу.
• SPA (Single Page Application) — всё генерируется на клиенте, как в обычном Vue-приложении.
• SSG (Static Site Generation) — HTML генерируется на этапе сборки приложения.

В этой статье мы сосредоточимся на SSG, или режиме статической генерации.

Генерация статического сайта с помощью Nuxt - это отличный способ создать быстрый, безопасный и SEO-оптимизированный веб-сайт. Чтобы эффективно генерировать статические сайты, нужно понимать, как Nuxt обрабатывает роутинг, как получать данные во время сборки и как оптимизировать сайт для производительности. Если вы хотите узнать больше о генерации статических сайтов с помощью Nuxt, приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Как устроен процесс статической генерации

• При сборке (nuxt generate или nuxi generate в Nuxt 3) для каждой доступной маршрутизации создается отдельный HTML-файл и сопутствующие ресурсы.
• Страницы могут получать данные на этапе build-time из API, CMS или файлов.
• После генерации вы просто копируете папку сгенерированного сайта на любой статический хостинг.

Подготовка проекта — создаём основу для статического сайта

Установка и начальная настройка

Давайте разберём процесс создания с нуля на примере Nuxt 3:

1. Создаём проект:

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

2. Структура проекта

   • pages/ — ваш основной каталог с Vue-страницами.
   • nuxt.config.ts или nuxt.config.js — основной файл настроек.

3. Включаем статическую генерацию:

В файле nuxt.config.ts добавьте опцию:

export default defineNuxtConfig({
  // Включаем режим генерации статического сайта
  ssr: false, // Cпециально для SPA, если нужно только статику, оставляем true
  nitro: {
    preset: "static"
  }
})

Важно! В Nuxt 3 статическую генерацию активирует команда nuxi generate и опции в секции nitro. В Nuxt 2 используется свойство target: 'static'.

Базовые страницы и маршруты

Всё, что вы помещаете в папку pages, становится специальным маршрутом, который Nuxt отработает при генерации.

Пример создания простой страницы:

pages/index.vue:

<template>
  <main>
    <h1>Главная страница статического сайта</h1>
    <p>Поздравляем, вы развернули статическую генерацию на Nuxt!</p>
  </main>
</template>

Nuxt автоматически создаст HTML для этого маршрута.

Генерация статического сайта — основные команды

Генерация и сборка

• Сборка проекта:
  Для Nuxt 3: bash npm run build Для Nuxt 2: bash npm run build

• Генерация статики:
  Для Nuxt 3: bash npx nuxi generate Для Nuxt 2: bash npm run generate

Итоговый результат размещается в папке ./.output/public (Nuxt 3) или ./dist (Nuxt 2). Вы можете скопировать содержимое на любой статический сервер.

Стандартная структура после генерации

Обычно вы увидите:

.output/
  public/
    index.html
    about/index.html
    _nuxt/
      app.js
      assets.js
      ...

index.html — главная страница сайта
about/index.html — другая страница
_nuxt/ — технические ресурсы (JS, CSS, изображения)

Динамические страницы и генерация маршрутов

Часто требуется не только статическая генерация для фиксированных страниц, но и для динамически создающихся, например, карточек товаров, блогов и т.д.

Пример: генерация динамических маршрутов

Допустим, у вас есть статический блог на Nuxt, и список статей приходит с внешнего API.

pages/posts/[slug].vue:

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </article>
</template>

<script setup>
const { params } = useRoute()

// Используем useFetch для загрузки данных на build-time
const { data: post } = await useFetch(`https://my-api.com/posts/${params.slug}`)
// На этапе генерации Nuxt подставит slug из списка маршрутов
</script>

Чтобы Nuxt на этапе генерации знал, какие именно страницы нужны (/posts/1, /posts/2, /posts/3), вы должны явно указать их список:

Nuxt 3: динамические маршруты через prerender.routes

nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/posts/1',
        '/posts/2',
        '/posts/3'
        // добавьте нужные маршруты
      ]
    }
  }
})

Откуда брать список маршрутов?
Вы можете сгенерировать этот объект динамически (например, скриптом через API перед запуском generate).

Nuxt 2: опция generate.routes

export default {
  generate: {
    routes: async () => {
      // Получаем список slug из API или файлов
      const posts = await fetch('https://my-api.com/posts').then(res => res.json())
      return posts.map(post => '/posts/' + post.slug)
    }
  }
}

Важный момент: данные для страницы должны быть доступны на этапе сборки!

Загрузка данных для статической генерации

Иногда вам нужно загрузить данные в компоненте для генерации контента. В Nuxt 3 для этого используется специальная функция useFetch — она автоматически работает на сервере во время генерации.

Пример получения данных:

pages/about.vue:

<template>
  <section>
    <h2>О нас</h2>
    <p>{{ aboutText }}</p>
  </section>
</template>

<script setup>
const { data: aboutText } = await useFetch('https://my-api.com/about')
</script>

Что происходит:
Nuxt делает данный запрос на этапе сборки, строит HTML и после генерации этот HTML уже содержит нужный вам текст.

Ограничения и нюансы SSG с Nuxt

• Если API/данные недоступны на этапе билда — страницы с ними не будут сгенерированы!
• Для truly-dynamic user-ограниченных страниц используйте только клиентский рендеринг (SPA).
• Статически сгенерированный сайт не поддерживает server-side middleware.
• Для обновления контента требуется повторная генерация и деплой.

Готовим сайт к публикации

После генерации Nuxt-ом у вас будет папка, которую можно развернуть практически где угодно. Вот популярные варианты:

• GitHub Pages
  Просто копируйте содержимое папки output (.output/public или dist) в ветку gh-pages.

• Vercel/Netlify
  Автоматически развернут Nuxt static build (выберите Output Directory — ./.output/public или ./dist).

• Собственный сервер или CDN
  Загружаете контент через FTP или rsync — нет необходимости в Node.js или другом сервере.

Конфигурация путей и маршрутов

При размещении не в корне домена иногда требуется задать базовый путь (например, /my-nuxt-site/):

nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    baseURL: '/my-nuxt-site/' // устанавливаем базовый путь
  }
})

Теперь все ваши ресурсы (/_nuxt/, ссылки и маршруты) будут автоматически использовать правильную базу.

Оптимизация статического сайта на Nuxt

• Оптимизируйте данные — кешируйте API-ответы перед билдом.
• Минифицируйте изображения и стили — используйте встроенные плагины или внешние сервисы.
• Подключайте только нужные скрипты — не включайте лишние модули и библиотеки.
• Проводите Lighthouse-анализ — проверяйте итоговый build на производительность и SEO.
• Используйте инкрементальную генерацию — некоторые страницы можно обновлять изолированно (в Nuxt 3 поддержка расширяется).

На что обратить внимание при генерации крупных проектов

• Используйте генерацию списка маршрутов динамически через API.
• Не размещайте большую часть содержимого в client-only компонентах, иначе теряется смысл статики.
• Разбивайте проект на модули, продумайте lazy-loading для тяжелых страниц.
• Следите за размерами бандлов (_nuxt/) — они напрямую влияют на первую загрузку.

Заключение

Генерация статических сайтов с помощью Nuxt — крайне мощный и гибкий инструмент для современных разработчиков. Вы можете с легкостью получать статические HTML-файлы из своих Vue-приложений, подключать внешние источники данных, обеспечивать отличную SEO-оптимизацию и замечательную скорость загрузки. Nuxt делает генерацию и развёртывание статических сайтов максимально простым и удобным. При этом вы сможете подключить огромное количество готовых расширений — от работы с headless CMS до автоматической оптимизации ресурсов. Всё это позволяет сделать сложные сайты доступными, быстрыми и масштабируемыми.

Генерация статических сайтов - это лишь один из способов использования Nuxt. Чтобы создавать гибкие и масштабируемые приложения, необходимо освоить все возможности фреймворка, включая работу с сервером, базами данных и API. На нашем курсе Nuxt - fullstack Vue фреймворк вы найдете все необходимые знания и навыки для достижения успеха. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как добавить новую страницу в статический Nuxt-сайт без полной регенерации всего проекта?

Обычно при добавлении страницы требуется новая генерация. В Nuxt 3 появляется поддержка частичной (инкрементальной) генерации, когда можно пересобрать только измененные или новые маршруты. Используйте команды генерации с указанием новых маршрутов через nitro.prerender.routes и пересоберите только нужные страницы, сохранив остальные.

Почему после деплоя на GitHub Pages или Netlify не работают маршруты вида /about или /posts/slug?

Проблема часто связана с отсутствием правильного baseURL или ошибками в конфигурации путей. Проверьте настройку app.baseURL в nuxt.config и корректность маршрутов в файле. Для SPA-режима понадобится редирект всех запросов на index.html (rewrites).

Как внедрить динамический sitemap.xml и robots.txt на Nuxt SSG?

Создайте в директории server/routes файлы sitemap.xml.ts и robots.txt.ts (Nuxt 3). В Nuxt 2 используйте специальные модули (@nuxtjs/sitemap и @nuxtjs/robots). Для статического сайта сгенерируйте эти файлы на этапе билда (например, через отдельный скрипт) и поместите их в папку public.

Как подключить внешнюю CMS (например, Contentful или Strapi) к статической генерации на Nuxt?

Воспользуйтесь функцией получения данных (например, useFetch или asyncData) — на этапе сборки Nuxt отправит запросы к API вашей CMS для каждой страницы. Не забудьте убедиться, что API публичный или доступны нужные токены в env-переменных для build-time.

Почему статика на Nuxt занимает много места, как уменьшить размер конечного build?

Ограничьте подключаемые сторонние библиотеки, минимизируйте размер картинок и стилей. Используйте ленивую загрузку (lazy load) для тяжёлых компонентов и страниц, настройте tree-shaking. Анализируйте папку _nuxt и удаляйте неиспользуемые ассеты перед публикацией.