# Руководство по отрисовке на стороне сервера
Данное руководство находится в стадии активной разработки
# Что такое серверный рендеринг (SSR)?
Vue.js — фреймворк для создания приложений, выполняемых на стороне клиента. По умолчанию компоненты Vue создают и манипулируют DOM в браузере. Однако, можно преобразовывать те же компоненты в HTML-строки на сервере, отправлять их в браузер, и наконец «гидратировать» статическую разметку в полностью интерактивное приложение.
Приложение Vue.js с отрисовкой на стороне сервера также можно считать «изоморфным» или «универсальным». Это означает, что большая часть кода приложения выполняется и на стороне сервера и на стороне клиента.
# Нужен ли SSR?
Сравнивая с традиционным приложением SPA (Single-Page Application), преимуществами отрисовки на стороне сервера будут:
Лучшая поисковая оптимизация (SEO), потому что поисковые роботы смогут видеть полностью отрисованную страницу.
Обратите внимание, на данный момент Google и Bing могут без проблем индексировать синхронные приложения JavaScript. Ключевое слово здесь — синхронные. Если запуск приложения сопровождается индикатором загрузки, чтобы получить данные через запрос к API, то поисковый робот просто не станет дожидаться окончания загрузки. Это означает, что для страниц где важен SEO и присутствует контент, получаемый асинхронно, отрисовка на стороне сервера необходима.
Лучшие тайминги отображения контента (TTI, time-to-content), особенно при медленном интернет-соединении или на медленных устройствах. Для разметки, отрисованной на стороне сервере, не нужно дожидаться пока весь JavaScript загрузится и выполнится, поэтому пользователь быстрее увидит полностью отрисованную страницу. Это приводит к улучшению пользовательского опыта и может иметь решающее значение для приложений, в которых TTI напрямую связано с коэффициентом конверсии.
Есть некоторые компромиссы, которые также необходимо учитывать при использовании отрисовки на стороне сервера:
Ограничения при разработке. Код, специфичный для браузера, можно использовать лишь в определённых хуках жизненного цикла; некоторым внешним библиотекам потребуется особый подход для запуска в приложении с отрисовкой на стороне сервера.
Более сложные требования к настройке и развёртыванию сборки. В отличие от полностью статичного SPA, которое можно опубликовать на любом статичном файловом сервере, для приложения с отрисовкой на стороне сервера требуется окружение, где сможет работать сервер Node.js.
Повышенная нагрузка на сервер. Рендеринг полноценного приложения в Node.js будет более требовательным к процессору, нежели простая раздача статичных файлов, поэтому если ожидаете большой трафик, то будьте готовы к соответствующей нагрузке на сервер и применяйте стратегии кэширования.
Прежде чем использовать отрисовку на стороне сервера для приложения, первый вопрос, который нужно задать себе, это действительно ли он так нужен. Например, при разработке панели мониторинга для внутренних нужд, где не так важны лишние несколько сотен миллисекунд начальной загрузки, отрисовка на стороне сервера будет излишеством. Однако, в случаях, когда время до контента абсолютно критично, отрисовка на стороне сервера позволит достичь наилучшей производительности начальной загрузки.
# SSR vs Пререндеринг
Если интересуетесь отрисовкой на стороне сервера только для улучшения SEO на паре маркетинговых страниц (например, /, /about, /contact, и т.д.), то наверняка лучше использовать пререндеринг. Вместо того, чтобы использовать веб-сервер для компиляции HTML на лету, пререндеринг просто сгенерирует статичные HTML-файлы для определённых путей на этапе сборки. Преимущество в том, что его настройка намного проще и позволяет сохранить фронтенд как полностью статический сайт.
При использовании webpack (opens new window), пререндеринг можно добавить с помощью prerender-spa-plugin (opens new window). Он был тщательным образом протестирован на приложениях Vue.
# Об этом руководстве
Это руководство будет очень подробным и предполагает знакомство как с самим Vue.js, так и достаточные знания по Node.js и webpack.
Если предпочитаете более высокоуровневые решения, обеспечивающие плавную работу из коробки, то стоит попробовать Nuxt.js (opens new window). Он построен на том же стеке Vue, но абстрагирован от многих кодовых элементов и предоставляет некоторые дополнительные возможности, такие как генерация статических сайтов. Однако он может не подойти, если нужен более прямой контроль над структурой приложения. В любом случае, будет полезно ознакомиться с его руководством, чтобы лучше понять, как всё работает вместе.
Наконец, стоит запомнить, что решения в этом руководстве не являются окончательными — они хорошо работают, но это не значит, что их нельзя улучшить. А в будущем они могут быть пересмотрены — не стесняйтесь вносить свой вклад, предлагая пулл-реквесты с исправлениями!