Рендеринг на стороне сервера

Полное руководство по БСО

В этом разделе я предоставлю вам отдельное руководство по созданию приложений Vue для рендеринга на сервере. Это будет очень подробное руководство для тех, кто уже знаком с разработкой Vue на стороне клиента, разработкой webPack и Node.js на стороне сервера.

Перво-наперво, посмотрим, что такое SSR и зачем нам SSR.

Что такое рендеринг на стороне сервера

Vue.js, как мы знаем, является основой для создания клиентских приложений. Поведение компонентов Vue по умолчанию - создавать и управлять DOM в браузере в качестве вывода. Тем не менее, одинаково возможно визуализировать те же компоненты в строки HTML, затем отправить их непосредственно в браузер и, наконец, «гидрировать» статическую разметку в приложение, которое полностью интерактивно на клиенте.

Серверное приложение Vue.js также можно считать «универсальным» или «изоморфным» в том смысле, что большая часть кода нашего приложения выполняется на клиенте и сервере.

Почему ССР?

По сравнению с традиционным SPA (одностраничное приложение) преимущество SSR заключается, прежде всего, в следующем:

• То, что у него лучше SEO, это потому, что сканеры поисковых систем будут непосредственно видеть полностью отображаемую страницу.
• На данный момент Bing и Google могут индексировать синхронные приложения JavaScript просто отлично. Синхронный является ключевым словом там. Если наше приложение запускается с загрузчиком, а затем загружает контент через Ajax, сканер не будет ждать, пока мы закончим. Это означает, что если у нас есть контент, извлекаемый асинхронно на страницах, где важен SEO, SSR может понадобиться.
• У него меньше времени для контента, особенно на медленных устройствах или медленном интернете. Разметка, отображаемая на сервере, не должна ждать, пока весь JavaScript будет загружен и был выполнен для отображения, поэтому наш пользователь увидит полностью отрендеренную страницу раньше. Как правило, это приводит к улучшению взаимодействия с пользователем и может иметь решающее значение для любого приложения, где время до контента напрямую связано с коэффициентом конверсии.
  Есть также некоторые компромиссы, которые следует учитывать при использовании SSR: однако они включают в себя:
• Это имеет ограничения развития. Специфичный для браузера код может использоваться только внутри некоторых определенных хуков жизненного цикла; некоторые внешние библиотеки могут нуждаться в особой обработке для запуска в приложении, отображаемом на сервере.
• Это больше связано с настройкой сборки и требованиями к развертыванию. В отличие от полностью статического SPA, который может быть развернут на любом статическом файловом сервере, приложению, отображаемому на сервере, потребуется среда, в которой может работать сервер Node.js.
• У него больше серверной нагрузки. Когда мы создаем полноценное приложение в Node.js, очевидно, что оно будет более ресурсоемким, чем просто обработка статических файлов, поэтому, если мы ожидаем большой трафик, нам нужно быть готовым к соответствующей нагрузке на сервер и разумно использовать стратегии кэширования.

Nuxt.js

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

Quasar Framework SSR + PWA

Quasar Framework сгенерирует приложение SSR (с опциональной передачей обслуживания PWA), которое использует свою лучшую в своем классе систему сборки, расширяемость для разработчиков и разумную конфигурацию, чтобы сделать разработку и создание нашей идеи легким делом. Имея более ста конкретных компонентов, совместимых с Material Design 2.0, мы можем решать, какие из них выполнять на сервере, какие доступны в браузере, и даже управлять тегами <meta> нашего сайта. Quasar - это среда разработки на основе node.js и веб-пакетов, которая оптимизирует и ускоряет быструю разработку приложений SPA, PWA, Electron, Cordova и SSR - из одной кодовой базы.