Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Архитектура одностраничных приложений набрала обороты благодаря популярности реактивных фреймворков: VueJS, ReactJS, AngularJS.
Все больше компаний стремятся отделить логику Backend и Frontend приложений, опираясь на принципы микросервисной архитектуры.
Разберемся, чем рендеринг на стороне клиента (CRR) отличается от серверного (SSR).
Серверный рендеринг происходит в четыре этапа. Допустим, вы ввели в адресной строке URL и зашли на сайт:
- Сервер отдает клиенту готовый к рендерингу HTML ответ
- Браузер рендерит полученный HTML и загружает JS код. На этом этапе страница доступна к просмотру
- Браузер исполняет JS код, а вместе с ним и код Vue/React
- Страница становится интерактивной
При клиентском рендеринге страница доступна после выполнения кода. Благодаря чему пользователь не видит голый, не оживленный JS-ом скелет страницы:
- Сервер присылает ответ клиенту
- Браузер загружает JS
- Браузер исполняет Vue/React
- Страница доступна и интерактивна
Способ показа страницы пользователю не единственное различие CSR и SSR. Нередко маршрутизация SPA тоже делается на клиенте. У этого подхода есть недостатки с точки зрения CEO, но об этом дальше. Сначала рассмотрим преимущества SPA.
Преимущества одностраничных приложений
Новый подход не получил бы такого распространения, не имея существенных преимуществ
- Выше скорость работы приложения
- Лучше User Experience
- Меньше нагрузка на сервер
- Универсальная платформа
- Отзывчивый интерфейс
Скорость
Благодаря внутренним оптимизации VDOM скорость обновления нод на странице выше, чем при использовании VanillaJS. В реактивных фреймворках используются и другие оптимизации, которые повышают отзывчивость интерфейса и улучшают user experience.
Сервер
Благодаря клиентской маршрутизации снижается нагрузка не сервер. Сервер не отдает заново набор повторяющихся скриптов и контента. При переходе между страницами вся работа по отрисовке контента делегирована JS. Фактически происходит эмуляция постраничной навигации. С точки зрения сервера страница остается такой же.
Универсальность
Благодаря новому подходу, можно разбить приложение на микрофронтенды для разных платформ: вэба, мобильных и десктопных устройств.
Архитектура одностраничных приложений
Фреймворки для создания одностраничных приложений реализуют MVC паттерн, позволяя разделить клиентское приложение на модель, представление и контроллер.
Контроллер
Контроллер обрабатывает действия пользователя и меняет состояние приложения. Контроллер отвечает не только за навигацию, но и обработку пользовательских событий: кликов, отправки форм, текстового ввода и т.п.
При проектировании Vue приложения лучше создать 1 компонент-контейнер, в который эмитятся пользовательские события. Он импортируется в качестве компонента в routes.js
routes.js
Модель
Модель отвечает за хранение и работу с данными. В качестве хранилища данных во Vue используются Vuex, Vue Apollo, EventBus, RxJS. Взаимодействие с API для удобства выносится в отдельных файл. Взаимодействие с хранилищем происходит в компонентах.
Представление
Представление во Vue — это шаблон, заключенный в тэг
template. Представление отвечает за отрисовку данных пользователю.Одностраничные приложения делятся по способу рендеринга на client side rendering и server side rendering.
Преимущества клиентского рендеринга
- Не перезагружает контент страницы при постраничной навигации
- После первоначальной загрузки работа с контентом происходит быстрее
- Удобно для работы в режиме development благодаря горячей перезагрузке
Противниками CSR выступают CEO-специалисты. Одностраничное CSR приложение плохо индексируется поисковыми роботами.
Преимущества серверного рендеринга
Для SSR в экосистеме Vue существует библиотека vue-server-renderer:
- Загрузка страницы быстрее, чем CSR
- Лучше для SEO
- Время первичной отрисовки контента ниже так, как не ожидается загрузка JS
- Взаимодействие с сайтом происходит быстрее благодаря клиентской навигации VueJS
- Нет необходимости в излишних запросах к серверу, которые происходят при первоначальной загрузке страницы при клиентском рендеринге
Главный недостаток CSR — проблемы индексации в поисковых системах. Google с 2015 года начал индексировать CSR страницы. Проблема заключается в том, что поисковику приходится самостоятельно рендерить страницу и дожидаться финального HTML. Этот процесс может занять около недели.
Что выбрать?
Нередко компании настраивают 2 варианта билда одностраничных приложений: CSR и SSR. Их используются в зависимости от задач и потребностей бизнеса. Решение о способе рендеринга одностраничных приложений выносится на основании запросов бизнеса. Для некоторых приложений СЕО-оптимизация не является критичной. Их создатели делают ставку на отзывчивость интерфейса, удобство разработки.
При выборе SSR для VueJS лучше воспользоваться NuxtJS. Это минималистичный фреймворк с доступной документацией.
