Vue Academy · Урок

Режимы SSR, SSG и SPA

ssr:true/false, предварительная генерация Nitro, команда generate и гибридный рендеринг для отдельных маршрутов

Урок 4 из 413 шагов

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

Обзор режимов рендеринга

Nuxt может отрисовывать приложение тремя способами: SSR (сервер обрабатывает каждый запрос), SSG (страницы заранее создаются во время сборки) и SPA (всё отрисовывается в браузере). Их можно даже сочетать для разных маршрутов.

SSR: режим по умолчанию

При ssr: true (режиме по умолчанию) сервер отрисовывает HTML для каждого запроса, а клиент добавляет к нему интерактивность. Это обеспечивает быструю первую отрисовку и хорошую оптимизацию для поисковых систем, поскольку поисковые роботы видят всю разметку.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Когда SSR особенно полезен

SSR подходит для часто меняющегося или персонализированного содержимого — панелей управления, лент, интернет-магазинов с актуальными ценами, — когда Вам нужна свежая HTML-разметка при каждом запросе.

Режим SPA

Установка ssr: false превращает Nuxt в одностраничное приложение: сервер отправляет пустую оболочку, а браузер отрисовывает всё содержимое. Размещать такое приложение проще, но оптимизация для поисковых систем хуже, а первая отрисовка медленнее.

export default defineNuxtConfig({
  ssr: false
})

Когда подходит SPA

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

SSG: генерация статического сайта

Команда nuxt generate заранее отрисовывает каждую страницу в статический HTML во время сборки. В результате получается папка с файлами, которую можно разместить где угодно без сервера Node.

npx nuxt generate
# outputs static HTML to .output/public

Когда подходит SSG

SSG идеально подходит для редко меняющегося содержимого — блогов, документации и маркетинговых сайтов. Страницы работают очень быстро, а их размещение в CDN обходится недорого.

Рендеринг для отдельных маршрутов с помощью routeRules

Конфигурация routeRules задаёт режим рендеринга для каждого шаблона пути. Это гибридный рендеринг: разные части одного приложения используют разные стратегии.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Распространённые параметры routeRules

prerender: true создаёт страницу во время сборки; ssr: false превращает её в SPA; swr: n кэширует результат SSR на n секунд (старая версия с последующим обновлением); redirect перенаправляет пользователей в другое место.

Инкрементальная генерация статического сайта

Параметр isr создаёт страницу при первом запросе и кэширует результат, периодически генерируя его заново. Он сочетает скорость SSG со свежестью SSR для популярных страниц.

routeRules: {
  '/products/**': { isr: 600 }
}

Выбор стратегии

Начните с SSR как с оптимального варианта по умолчанию, сочетающего поисковую оптимизацию и интерактивность. Используйте SSG для статического содержимого, SPA — для закрытых приложений, а routeRules — чтобы настраивать отдельные маршруты по мере возникновения требований к производительности.

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

Проверьте свои знания о режимах рендеринга.

Ответь в интерактивном уроке

Итоги

Вы изучили режимы рендеринга:

SSR (по умолчанию) отрисовывает страницу для каждого запроса: это обеспечивает хорошую поисковую оптимизацию и быструю первую отрисовку.
ssr:false создаёт SPA для закрытых приложений.
nuxt generate создаёт статический сайт SSG.
routeRules поддерживает гибридный рендеринг: prerender, swr, isr и ssr:false для отдельных маршрутов.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Режимы SSR, SSG и SPA» бесплатный?

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

Чему я научусь в уроке «Режимы SSR, SSG и SPA»?

ssr:true/false, предварительная генерация Nitro, команда generate и гибридный рендеринг для отдельных маршрутов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Режимы SSR, SSG и SPA»?

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

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

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

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

← Назад к Vue Academy