Frontend Academy · Урок

Развёртывание: статика и SSR

Создайте полностью статический сайт с помощью nuxt generate, разверните приложение SSR на сервере Node или в среде выполнения на границе сети и настройте движок Nuxt nitro

«Развёртывание: статика и SSR» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Nuxt работает везде

Nuxt 3 поддерживает четыре режима развёртывания: статический (nuxt generate), SSR (сервер Node), граничный (Cloudflare Workers, Vercel Edge), гибридный (для отдельных маршрутов).

Статическое развёртывание

nuxt generate предварительно создаёт HTML-файлы для каждого маршрута. Разверните папку .output/public на любом статическом хостинге (Netlify, Vercel, GitHub Pages, S3).

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

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

Для маршрутов вроде /blog/[slug] Nuxt должен знать все значения slug. Передайте их через nitro.prerender.routes в config.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

SSR-развёртывание на Node

nuxt build создаёт сервер Nitro. Разверните его на любом хостинге Node (Render, Railway, Fly.io, собственный VPS), запустив node .output/server/index.mjs.

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — универсальный сервер

Сервер Nuxt 3 — это Nitro, переносимый движок для любой среды выполнения: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify, AWS Lambda. Меняйте целевую среду с помощью nitro.preset.

Граничное развёртывание (Cloudflare Workers)

Установите preset в значение cloudflare-pages или cloudflare. Сборка создаёт Worker, работающий на граничной сети Cloudflare.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

Граничное развёртывание (Vercel Edge)

Vercel автоматически определяет Nuxt и выбирает правильный preset. Чтобы принудительно использовать Edge Runtime, укажите: preset: 'vercel-edge'.

Гибридный рендеринг

Разные маршруты могут отображаться по-разному. Настройте это с помощью routeRules.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

Выбор между статическим режимом и SSR

Статический режим: содержимое редко меняется, максимальная скорость, недорогой хостинг через CDN (блоги, маркетинговые сайты, документация). SSR: содержимое зависит от пользователя, динамические данные, результаты поиска (панели управления, электронная коммерция). Гибридный режим позволяет сочетать оба варианта для разных маршрутов.

Переменные среды

Используйте runtimeConfig в nuxt.config.ts. Свойство public доступно клиенту, остальные параметры остаются только на сервере.

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

Кэширование сборки в CI

Кэшируйте .nuxt/ и node_modules/ между запусками CI, чтобы ускорить сборку. В Vercel и Netlify это выполняется автоматически.

Проверка производительности

После развёртывания запустите Lighthouse для развёрнутого URL, а не для localhost. Так вы проверите настоящий CDN, настоящие граничные точки и реальное ограничение CPU.

Быстрая проверка

Какая команда Nuxt 3 предварительно создаёт статический HTML для всех маршрутов, чтобы развернуть сайт на CDN вроде Netlify или Cloudflare Pages?

Итоги: развёртывание Nuxt

nuxt generate → статический режим (развёртывание .output/public). nuxt build → SSR (развёртывание с Node). Preset Nitro предназначены для Cloudflare, Vercel, Netlify, AWS и других платформ. routeRules используются для гибридного рендеринга (prerender, isr, ssr, spa для отдельных маршрутов). runtimeConfig предназначен для переменных среды (public доступен клиенту). Проверяйте сайт с помощью Lighthouse по развёрнутому URL.

Часто задаваемые вопросы

Урок «Развёртывание: статика и SSR» бесплатный?

Да — полный текст урока «Развёртывание: статика и SSR» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Развёртывание: статика и SSR»?

Создайте полностью статический сайт с помощью nuxt generate, разверните приложение SSR на сервере Node или в среде выполнения на границе сети и настройте движок Nuxt nitro Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Развёртывание: статика и SSR»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Файловая маршрутизация и автоматические импорты
useFetch и useAsyncData
Модули Nuxt: изображения, аутентификация и интернационализация
Развёртывание: статика и SSR

← Назад к Frontend Academy