Для начала вот термины, используемые в статье, чтобы помочь вам понять.

Рендеринг на стороне клиента

Рендеринг на стороне клиента позволяет разработчикам полностью отображать свои веб-сайты в браузере с помощью JavaScript. Вместо создания отдельной HTML-страницы для каждого маршрута веб-сайт, отображаемый на стороне клиента, динамически создает каждый маршрут непосредственно в браузере. Этот подход распространился после того, как JS-фреймворки упростили его использование.

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

Рендеринг на стороне сервера позволяет разработчикам предварительно заполнять веб-страницу пользовательскими данными непосредственно на сервере. Как правило, быстрее выполнять все запросы внутри сервера, чем делать для них дополнительные обходы между браузером и сервером. Это то, что разработчики делали до рендеринга на стороне клиента.

Разница между рендерингом на стороне клиента и на стороне сервера

Рендеринг на стороне клиента динамически управляет маршрутизацией без обновления страницы каждый раз, когда пользователь запрашивает другой маршрут. Но рендеринг на стороне сервера может отображать полностью заполненную страницу при первой загрузке для любого маршрута веб-сайта, тогда как рендеринг на стороне клиента сначала отображает пустую страницу.

Предварительный рендеринг

Предварительный рендеринг — это компромисс между рендерингом на стороне клиента и на стороне сервера. На каждой предварительно отрендеренной странице отображается каркасный шаблон, пока данные ожидают регидратации с помощью запросов AJAX/XHR. После получения страницы внутренняя маршрутизация выполняется динамически, чтобы воспользоваться преимуществами веб-сайта, отображаемого на стороне клиента.

Почему мы изначально выбрали Vue.js

Когда мы впервые запустились, мы начали с основ, которые представляли собой vue.js, размещенный на AWS S3 с Cloudfront. На самом деле это была очень хорошая установка в начале, потому что она была очень дешевой, затраты на S3 были очень незначительными.

Все шло хорошо, пока мы не столкнулись с некоторыми серьезными проблемами, а именно:

  • SEO не работает должным образом на веб-сайте (вызвано рендерингом на стороне клиента). Google неправильно индексировал наш веб-сайт, из-за чего наш веб-сайт был помечен неправильными ключевыми словами, например. заблокировать номер мобильного телефона и «обнаружение мошенничества» и тип файла: pdf.
  • Обмен социальными ссылками, возвращающими заголовок и описание домашней страницы (вызвано рендерингом на стороне клиента).
  • Страницы помечаются как дубликаты (вызвано рендерингом на стороне клиента).

Из-за этих многочисленных проблем мы заметили, что существует всего несколько способов исправить проблемы, связанные с рендерингом на стороне сервера и предварительным рендерингом.

Предварительный рендеринг не будет работать для нашего варианта использования, потому что у нас есть динамические маршруты, например. url/instructor/:id, и эти URL-адреса не могут быть предварительно обработаны для SEO, поэтому мы решили использовать рендеринг на стороне сервера.

Почему мы перешли на Nuxt.js

Вместо того, чтобы использовать веб-пакет и реализовывать рендеринг на стороне сервера в нашем приложении Vue.js, мы решили перейти на Nuxt.js, который имеет встроенный рендеринг на стороне сервера и дополнительные функции. Я также хотел бы упомянуть здесь, что при переходе на рендеринг на стороне сервера мы перестали использовать S3 и перешли на сервис AWS Elastic Container и инстансы EC2.

Мы оставили S3, потому что у него нет сервера и он предназначен только для статических веб-сайтов. Я также отмечу, что это приведет к увеличению наших затрат, поскольку мы платим за инстансы EC2, работающие круглосуточно и без выходных, а не за сегменты S3.

Nuxt.js — это интерфейсная структура, построенная на Vue.js, которая предлагает отличные функции разработки, такие как рендеринг на стороне сервера, автоматически генерируемые маршруты, улучшенное управление метатегами и улучшение SEO.

Nuxt.js предлагает множество преимуществ для фронтенд-разработчиков, но была одна ключевая особенность, которая сделала наше решение использовать этот фреймворк окончательным — улучшение SEO. Нам действительно была нужна эта функция, потому что, будучи молодым стартапом, пытающимся рассказать о нас, я считаю, что наше SEO должно быть эффективным на 100%, чтобы различные сканеры, например. Google может правильно проиндексировать ваш сайт.

Для улучшения SEO Nuxt.js использует SSR (рендеринг на стороне сервера). SSR извлекает данные AJAX и отображает компоненты Vue.js в строки HTML на сервере (Node.js). Он отправляет их непосредственно в браузер, когда вся асинхронная логика выполнена, а затем, наконец, передает статическую разметку в полностью интерактивное приложение на клиенте. Эта функция позволяет отлично анализировать элементы DOM с помощью парсера Google SEO. SEO-парсер анализирует элементы DOM с огромной скоростью сразу после загрузки DOM сайта.

С другой стороны, типичные приложения SPA, созданные с помощью таких фреймворков, как Vue.js, React, Angular и им подобных, извлекают данные из серверной части с помощью AJAX после загрузки DOM, и поэтому синтаксический анализатор SEO не может анализировать все элементы DOM, потому что еще не отрисованы. Извлечение AJAX является асинхронным, а анализ SEO — нет.

Вывод

Вот почему мы перешли с Vue.js на Nuxt.js. Позже я представлю обновленную информацию, чтобы узнать, насколько это изменение увеличило наш счет за AWS.

Если у вас есть какие-либо вопросы по этой теме, пожалуйста, свяжитесь с нами.

Первоначально опубликовано на https://blog.roundtheblock.ca 24 мая 2021 г.

Узнайте больше о нас здесь!