# Отрисовка на стороне сервера

# Полное руководство по SSR

Для приложений Vue с отрисовкой на стороне сервера создано отдельное руководство. Это очень подробное руководство для тех, кто уже знаком с разработкой на Vue на стороне клиента и разработкой на Node.js на стороне сервера, а также с webpack. Ознакомиться с ним можно здесь.

# Nuxt.js

Правильно настроить все аспекты приложения с отрисовкой на стороне сервера готового к развёртыванию на production может быть сложной задачей. К счастью, есть отличный проект сообщества, который призван облегчить всё это: Nuxt.js (opens new window). Nuxt.js — фреймворк более высокого уровня, построенный поверх экосистемы Vue, который обеспечивает чрезвычайно упрощённый опыт разработки для создания универсальных приложений на Vue. Более того, его можно использовать в качестве генератора статических сайтов (со страницами в виде однофайловых компонентов)! Настоятельно рекомендуем попробовать.

# Quasar Framework SSR + PWA

Quasar Framework (opens new window) позволит создать приложение с SSR (опционально с PWA), использующее лучшую в своём классе систему сборки, оптимальную конфигурацию по умолчанию и удобную расширяемость для разработчиков, чтобы облегчить разработку и воплощение идеи. С более чем сотней компонентов, соответствующих «Material Design 2.0», можно решить какие из них должны выполняться на сервере, какие доступны в браузере, и даже управлять <meta> тегами сайта. Quasar — среда разработки на основе node.js и webpack, которая ускоряет и оптимизирует разработку приложений SPA, PWA, SSR, Electron, Capacitor и Cordova — всё из одной кодовой базы.

# Vite SSR

Vite (opens new window) — новый инструмент сборки фронтенд-проектов, который значительно улучшает опыт разработки. Он состоит из двух основных частей:

  • Сервер разработки, предоставляющий исходные файлы в качестве нативных ES-модулей, с богатой функциональностью и поразительно быстрой горячей заменой модулей (HMR).

  • Команда build, которая создаёт сборку кода с помощью Rollup (opens new window), предварительно сконфигурированного для выдачи хорошо оптимизированных статических ресурсов для production.

Vite также предоставляет встроенную поддержку для отрисовки на стороне сервера (opens new window). Можно ознакомиться с примером проекта на Vue здесь (opens new window)