Пять шагов настройки SSR в Vuejs

Главная

База знаний

vue

Продвинутые техники Vue

Пять шагов по настройке SSR в Vuejs

08 июля 2025

Автор

Олег Марков

Введение

Разрабатваете Vue-приложение и хотите повысить его производительность, улучшить SEO и ускорить первый рендер для пользователей? Серверный рендеринг (SSR) — именно та технология, которая поможет решить эти задачи. Серверный рендеринг позволяет создавать HTML-контент заранее на сервере, а не только на стороне клиента — благодаря этому поисковые системы индексируют страницы лучше, первое отображение приложения становится моментальным, и значительно сокращается Time To First Byte.

В этой статье я покажу вам пять пошаговых этапов настройки SSR для Vue.js-приложения. Мы рассмотрим как индивидуальные настройки со своим сервером на Node.js, так и современные подходы с использованием фреймворка Nuxt.js — ведь это основной инструмент SSR в экосистеме Vue. Каждый шаг снабжен пояснениями и примерами — вместе на практике вы сможете построить гибкое и эффективное SSR-приложение.

Шаг 1. Понимание основ SSR в Vue.js

Чем SSR отличается от классического SPA

Традиционное приложение на Vue (SPA) полностью рендерится в браузере пользователя. При первой загрузке браузер скачивает лишь простой index.html и большой JavaScript-файл, а всё остальное подгружается и формируется на клиенте. Такой подход даёт гибкость, но страдает низкой скоростью первого отображения и плохой индексацией, если вы делаете публичный сайт.

С SSR всё иначе: полноценный HTML страницы отдается сразу с сервера. У пользователя мгновенно появляется интерактивная страница. После первой загрузки Vue «примонтируется» к уже отрендеренному HTML и продолжит работать как обычное SPA (этот процесс называется "гидратация").

Когда использовать SSR

Включать SSR стоит в проектах, где важны сумма следующих факторов:

Приложение публичное и критично для SEO
Важна минимизация Time To First Paint
Много динамического контента на страницах (например, интернет-магазины, блоги)
Для внутренних админок, где SEO не нужен, SSR, как правило, избыточен.

Шаг 2. Установка исходного проекта и необходимых зависимостей

Базовая установка Vue CLI

Начнем с создания базового проекта Vue. Использовать можно Vue CLI или Vite (последний более современный).

# Для Vue CLI
npm install -g @vue/cli
vue create vue-ssr-app
cd vue-ssr-app

Установка зависимостей для SSR

Для организации серверного рендеринга потребуются дополнительные пакеты. Если вы хотите настраивать всё «вручную», вам понадобятся:

vue
vue-server-renderer
express или другой Node.js-фреймворк

Устанавливаем зависимости:

npm install vue vue-server-renderer express

Для Nuxt.js

Если хочется идти более «батарейки в комплекте» способом, используйте Nuxt.js. Его инфраструктура уже включает SSR «из коробки», вам нужно только:

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

Вы можете выбрать любой вариант, который кажется понятным.

Шаг 3. Создание серверной части для SSR

Если вы решили собрать SSR-приложение без Nuxt, давайте рассмотрим организацию серверной части на Express.

Создание Vue-экземпляра для рендеринга

Создайте файл src/app.js:

// src/app.js
import Vue from 'vue'
import App from './App.vue'

export default function createApp() {
  return new Vue({
    render: h => h(App),
  })
}

Создание серверного рендерера

Добавьте сервер: файл server.js в корне проекта.

// server.js
const express = require('express')
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')
const createApp = require('./src/app').default

const server = express()

const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync(path.resolve(__dirname, 'index.template.html'), 'utf-8'),
})

// Обработка всех маршрутов
server.get('*', (req, res) => {
  const app = createApp()
  const context = { url: req.url }
  
  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(8080)

Пример шаблона

Создайте index.template.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Vue SSR App</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

Всё готово к запуску! Статические стили, скрипты и ассеты можно прокидывать через сервер Express.

Шаг 4. Асинхронные данные и маршрутизация (router, store) в SSR

SSR и асинхронные данные

Тонкость SSR — данные, которые должны быть загружены ДО рендера на сервере. Для этого в компонентах Vue используют функцию asyncData или специальные хуки.

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

Допустим, у нас есть страница, которая должна загрузить статьи с API до отдачи HTML-пользователю. Реализуем это с помощью создания отдельного метода для загрузки данных:

// src/App.vue
<template>
  <div>
    <h1>Список статей</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  asyncData({ route }) {
    // Здесь делается асинхронный запрос на сервер
    return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(posts => ({ posts }))
  },
  created() {
    // Если SSR, данные уже получены
    if (this.$options.asyncData) {
      Object.assign(this, this.$options.asyncData)
    }
  }
}
</script>

На практике в чистом Vue приходится реализовать такую прокладку самому. В Nuxt функция asyncData работает буквально «из коробки» именно так.

SSR с Vue Router

Если используется роутер, его тоже надо настраивать для SSR. Пример создания инстанса:

// src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/Home.vue'
import About from './pages/About.vue'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })
}

Роутер нужно создавать ЗАНОВО для каждого SSR-запроса (иначе между пользователями могут мигрировать состояния).

SSR с Vuex Store

Для хранилища данных также нужен новый инстанс на каждый запрос:

// src/store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore() {
  return new Vuex.Store({
    state: () => ({
      counter: 0
    }),
    mutations: {
      increment(state) { state.counter++ }
    }
  })
}

Шаг 5. Конфигурация сборки и запуск SSR (Webpack / Vite / Nuxt)

Сборка SPA и SSR бандлов

SSR требует двух разных JavaScript-бандлов:

Клиентский (для гидратации в браузере)
Серверный (для рендеринга на сервере)

Для этого в Webpack (или Vite) конфиге используются разные точки входа.

Пример Webpack-конфигов

webpack.client.config.js:

module.exports = {
  entry: './src/entry-client.js',
  output: {
    filename: 'bundle.client.js',
    path: __dirname + '/dist/client'
  },
  // ...другие настройки
}

webpack.server.config.js:

module.exports = {
  entry: './src/entry-server.js',
  target: 'node',
  output: {
    filename: 'bundle.server.js',
    path: __dirname + '/dist/server',
    libraryTarget: 'commonjs2'
  },
  // ...другие настройки
}

Запуск сервера

После сборки запускается server.js, который импортирует серверный бандл и шаблон.

SSR в Nuxt.js — проще и удобнее

Если используете Nuxt, шаги гораздо проще:

В корне проекта выполните:
bash npm run dev
Для production выполните:
bash npm run build && npm run start

Nuxt сам управляет раздельной сборкой и всем стеком SSR, а вы фокусируетесь только на бизнес-логике приложения и компонентах.

SSR через Vite

В новой экосистеме возможно SSR-сборка через Vite (например, c vite-ssr плагинами). Но для базового понимания Webpack и Nuxt остаются стандартом.

Заключение

Пять шагов настройки сервеного рендеринга в Vue.js включают: понимание основ SSR, базовую настройку проекта и зависимостей, написание серверной части, правильную организацию маршрутизации и асинхронных данных, а также корректную настройку инструментов сборки и запуска. Настроив SSR в вашем Vue-приложении, вы получаете максимум от современных веб-технологий: SEO, скорость рендера, единый подход к работе с данными.

Наиболее удобным и быстрым способом реализации SSR во Vue является Nuxt.js. Он скрывает большинство технических деталей и делает внедрение максимально простым. Однако если вам важен полный контроль или кастомизация, настройка SSR вручную через серверный рендерер тоже остаётся отличной практикой.

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

Как подключить сторонние библиотеки (например, сторонний UI или axios) при SSR?

Сторонние библиотеки нужно подключать только в коде, совместимом с сервером. Если библиотека использует напрямую window или document, она "сломается" в среде Node.js. Окружайте такие вызовы проверкой:

if (process.client) {
  // window/document используются только на клиенте
}

В Nuxt для этого предусмотрены хуки и переменные среды.

Как делается аутентификация пользователей с SSR?

Вариант — хранить токен сессии в http-only cookie и проверять её на сервере при каждом запросе. На сервере (например, в Express или Nuxt middleware) валидируйте cookie и прокидывайте пользователя в рендер-функции через context.

Почему SSR часто работает медленнее, чем CSR после первого рендера?

SSR нагружает именно сервер, а не браузер клиента. При большом кол-ве одновременных запросов сервер может не справляться, особенно на дешёвом хостинге. Решают через оптимизацию кэша (например, отдавать HTML из генератора только раз в N минут).

Как прокинуть данные пользователя из back-end в клиент при SSR?

Передавайте данные пользователя через context при рендере сервера, добавляя их в начальный state приложения. В Nuxt.js это можно сделать в middleware, в Express — через передачу переменных внутрь template.

Как обновлять только нужные части страницы без полного SSR?

SSG/ISR (статическая генерация или инкрементальная статическая сборка) позволяет рендерить только части сайта по мере их изменения, не обновляя весь сайт. В Nuxt такие возможности предоставляет Nuxt Content, в ручных решениях — через отдельные endpoint’ы и частичный рендеринг компонентов.

Работа с teleport для управления DOM во Vue Использование Shadcn UI компонентов с Vue для продвинутых интерфейсов

Все гайды по Vue

Инструменты и экосистема Vue

Руководство по валидации форм во Vue.js Интеграция Tiptap для создания редакторов на Vue Работа с таблицами во Vue через TanStack Инструкция по установке и компонентам Vue slider Управление пакетами Vue js с помощью npm Управление пакетами и node modules в Vue проектах Как использовать meta для улучшения SEO на Vue Полный гайд по компоненту messages во Vuejs 5 правил использования Inertia с Vue и Laravel Работа с модулями и пакетами в Vue Инструкция по работе с grid на Vue Github для Vue проектов - подробная инструкция по хранению и совместной работе Настройка ESLint для Vue проектов и поддержка качества кода Обработка ошибок и отладка в Vue.js Использование Vue Devtools для отладки и мониторинга приложений Работа с конфигурационными файлами и скриптами Vue Создание и настройка проектов Vue с помощью Vue CLI 3 способа интеграции Chart.js с Vue для создания графиков Работа с Canvas во Vue Инструкция по реализации календаря во Vue Работа с Ant Design Vue для создания UI на Vue

Управление состоянием и API

Обзор и использование утилит Vue для удобной разработки Работа с обновлениями компонента и жизненным циклом update Использование query-параметров и их обработка в маршрутах Vue Разрешение конфликтов и ошибок с помощью Vue resolve Загрузка и управление состоянием загрузки в Vue Работа с JSON данными в приложениях Vue Использование библиотек Vue для расширения функционала Как работать с экземплярами компонента Instance во Vue Экспорт и импорт данных и компонентов в Vue Получение данных и API-запросы во Vue.js Обработка событий и их передача между компонентами Vuejs Гайд по defineEmits на Vue 3 Понимание core функционала Vue и его применение Понимание и применение Composition API в Vue 3 Понимание и работа с компилятором Vue Когда и как использовать $emit и call во Vue Взаимодействие с внешними API через Axios в Vue

Запуск проектов на Vue.js

Веб приложения на Vue архитектура и лучшие практики Использование Vite для быстрого старта и сборки проектов на Vue 3 Работа с URL и ссылками в приложениях на Vue Работа с пользовательскими интерфейсами и UI библиотеками во Vue Организация и структура исходных файлов в проектах Vue Обзор популярных шаблонов и стартовых проектов на Vue Использование Quasar Framework для разработки на Vue с готовыми UI-компонентами Интеграция Vue с PHP для создания динамичных веб-приложений Как организовать страницы и маршруты в проекте на Vue Nuxt JS и Vue 3 для SSR приложений Создание серверных приложений на Vue с помощью Nuxt js Использование Vue Native для разработки мобильных приложений Организация и управление индексной страницей в проектах Vue Использование Docker для контейнеризации приложений на Vue Интеграция Vue.js с Django для создания полноценных веб-приложений Создание и работа с дистрибутивом build dist Vue приложений Работа со стилями и CSS в Vue js для красивых интерфейсов Создание и структурирование Vue.js приложения Как исправить ошибку cannot find module vue Настройка и сборка проектов Vue с использованием современных инструментов Интеграция Vue с Bitrix для корпоративных решений Разработка административных панелей на Vue js

Интеграции Vue

5 библиотек для создания tree view во Vue Интеграция Tailwind CSS с Vue для современных интерфейсов Интеграция Vue с серверной частью и HTTPS настройками Как обрабатывать async операции с Promise во Vue Интеграция Node.js и Vue.js для разработки приложений Руководство по интеграции Vue js в NET проекты Примеры использования JSX во Vue Гайд по импорту и регистрации компонентов на Vue Многоязычные приложения на Vue с i18n Интеграция FLIR данных с Vue 5 примеров использования filter во Vue для упрощения разработки 3 примера реализации drag-and-drop во Vue

Основы работы с Vue.js

Продвинутые техники Vue

Открыть базу знаний