Создание веб-сайта с NuxtJS

Создание веб-сайта с NuxtJS — что нужно знать

Яйцо перед курицей, так что vuejs перед nuxt… что, черт возьми, vuejs ?

Последние тенденции связаны с рендерингом шаблонов в браузере. Больше никаких удаленных серверов, выгружающих полную страницу для вашего браузера. В настоящее время ваш браузер выполняет рецепт и буквально создает страницу с нуля.

Vuejs — это инструмент, помогающий отображать объекты на экране. Это основная идея.

Представьте, что вы хотите отобразить список элементов в маркированном списке, вы знаете, что вам придется использовать <ul> и несколько <li> для выполнения задачи... но если вы начинаете с пустой страницы, вам придется иметь дело с куча элементов createElement и appendChild в тело страницы... это будет очень многословно, и я говорю только о первом рендеринге, представьте, что теперь вы хотите удалить некоторые из них, добавить новые или переупорядочить их... кому понадобится куча кофе и много строк кода.

Вот почему существует такой фреймворк, как vuejs. Идея довольно старая, 10 лет назад (палеолитический век Интернета) у людей была та же проблема, и они начали использовать JS на стороне клиента для выполнения этой работы.

Альтернативой является выполнение работы на стороне сервера: вы нажимаете на ссылку, отправляете какие-то переменные на сервер, перезагружаете страницу (спойлер: главное здесь), и у вас есть новая страница со всеми данными, которые вы хотите . Это в значительной степени то, что происходит на каждой CMS. Это быстро, но… вы знаете… вам нужно ждать дополнительное время, прежде чем просматривать следующую страницу, и опыт не очень гладкий!

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

Спасибо за напоминание, но этот пост посвящен nuxt, верно?

Простое приложение Vuejs пусто. Все, что вам нужно, — это точка монтирования, тег на странице, куда вы будете внедрять свое приложение.

<body>
	<div id="app"></div>
	<script src="app.js" />
</body>

Это все, что вам нужно. Это простой HTML, ваш браузер сделает все остальное, эта простая структура — все, что нужно для загрузки вашего приложения… но это также то, что увидят боты поисковых систем, и эта страница не содержит данных. Это очень важно, потому что большинство из них возьмут код, который вы им дали, для извлечения важной информации. (Я знаю, что SEO-боты не такие тупые, и некоторые из них могут запускать код js для отображения страницы, но ради этой статьи я предполагаю, что они видят только то, что вы им даете).

Итак, это довольно плохой код, если вы хотите попасть на первую страницу Google! 😭

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

<body>
	<div id="app">
		<h1>People I love</h1>
		<ul>
			<li>My kids</li>
			<li>My wife</li>
			<li>Netflix</li>
		</ul>
	</div>
</body>

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

Если это трудно проглотить, позвольте мне разделить это на более простые слова.

кто бы ни спросил: для заданного URL, вашего браузера, SEO-бота, линтера facebook или bash-скрипта, все они получат хорошо отформатированную страницу с разметкой.
Окончательный рендер: этот вывод является последним шагом, возможно, для некоторых расчетов, таких как упорядочение или любое необходимое преобразование данных.
все, что нужно браузеру для обновления страницы: HTML-страница также будет содержать некоторые инструкции JS для выполнения дополнительной работы после отображения страницы (например, упорядочение списка при нажатии кнопки)

Вы также можете думать так: я буду отображать страницу со всеми данными для отображения (html-разметка) и логикой для обновления макета, когда мне нужно (javascript), пользователь не увидит пустую страницу очень быстро, а данные после этого это будет простая скучная HTML-страница.

Как только страница будет отрендерена, вы сможете обновить документ на стороне клиента (классическая логика vuejs)… но помните, vuejs найдет лучший способ обновить только то, что изменилось, и потому что много данных уже находится на правильное место на странице это беспроигрышный процесс! 😎

Хватит болтать и дай вещи в реальной жизни

Возьмем простой пример: представьте, что вы хотите отобразить простой список элементов, и после отображения страницы вы хотите добавить в конец списка новый элемент. На стороне сервера nuxt (vuejs под капотом) отправит полную страницу в браузер. Как только страница будет полностью загружена на стороне клиента, vuejs запустится и проанализирует существующую разметку, учтет это и воспользуется этим, когда новый элемент будет добавлен в список.

Это здорово, потому что у вас есть как преимущества рендеринга на стороне сервера, так и на стороне клиента в одном потоке 😎

Я зарабатываю на жизнь созданием веб-сайтов, зачем мне все это?

Основным преимуществом всего этого является использование vuejs. Nuxt — это дополнительный слой сахара, но реальная сделка заключается в создании целого веб-сайта только с помощью vuejs. Давайте рассмотрим возможность использования nuxt только для рендеринга страниц для кормления SEO-ботов. Есть много дополнительных вещей, которые вы можете сделать с nuxt, но давайте пока отложим их в сторону.

Когда вы думаете о веб-сайте, с CMS или без, вы, вероятно, будете хранить свои данные в базе данных и создавать страницу с некоторыми запросами (будем честными: много) и склеивать результат с некоторой разметкой. Это в основном то, что делает CMS. Wordpress является хорошим примером этого: данные в БД, шаблоны с темой. В этом нет ничего плохого — я зарабатываю этим на жизнь, я не выброшу это.

Когда вы думаете о приложении, вы думаете о «состоянии». Это прекрасное место, где хранятся все ваши данные. с геттером и сеттером ваши данные доступны из любого места (вы их получаете? или вам нужен геттер? — шутка). Это параллельная идея базы данных в нашем мире CMS. Большая разница в том, что данные ЕСТЬ здесь, нет необходимости делать запрос к БД, чтобы поймать их, если одни и те же данные используются на нескольких страницах: это действительно большая экономия времени.

Я знаю, что данные должны откуда-то поступать… они не могут волшебным образом появиться в вашем приложении в нужном месте в нужное время!

Nuxt позволяет вам выполнять работу «запросить мои данные» на разных уровнях «жизненного цикла».

Более простой пример — функция fetch, которую может использовать компонент. Эта функция запускается только сервером (подробнее об этом позже) и позволяет вам вводить в ваш магазин приложений (не тот, что на вашем iPhone — шутка) данные, которые вы только что получили (да, я знаю, имя функции простое).

переформулировка Представьте, что вы хотите показывать текущую погоду на каждой странице вашего сайта. Когда кто-то запрашивает страницу из своего браузера, сервер nuxt запрашивает данные из API погоды в облаке (шутка) и передает их в магазин. Когда страница отправляется пользователю, все данные доставляются в виде гигантского объекта, и vuejs восстанавливает его состояние из этого объекта (подробнее об этом позже).

Представьте теперь, что вы хотите динамически обновлять погоду в зависимости от выбора пользователя или местоположения вместо предопределенного места. Логика та же: запросите API погоды, обновите магазин и обновите страницу (последняя часть выполняется vuejs автоматически, спасибо, братан). Если вы дочитали до этого места, то должны были заметить, что работа с функцией выборки уже выполнена. Спойлер, повторно использовать функцию нельзя 🤨, но можно (и нужно) извлечь из нее логику 😎.

Вот где nuxt+vuejs действительно хорош: вместо того, чтобы выполнять работу дважды (сначала, например, на стороне сервера с PHP/MySQL, затем на стороне клиента, с Ajax), вы разделяете логику между обеими сторонами.

Другой пример: пагинация. Представьте, что у вас есть большой список элементов, настолько большой, что вы не можете уместить их на одной странице, вам нужно создавать фрагменты данных, скажем, по 10 элементов на странице. Первая загрузка даст вам всю страницу: меню, верхний и нижний колонтитулы и первые 10 элементов. Вторая страница даст вам те же данные, но следующие 10 элементов. Почему вам нужно предоставить подавляющее большинство документа, который у вас уже есть (верхний и нижний колонтитулы, меню….), единственное, что вы действительно хотите, это следующие 10 пунктов, верно?

С точки зрения nuxtjs, у вас будет функция, отвечающая за получение 10 элементов. При первой загрузке будет вызвана функция fetch, и вы сможете запросить данные, ввести их в хранилище и отобразить полную страницу с данными. Элементы будут сохранены в магазине (глобальное состояние вашего приложения), а позже, если элементы в магазине изменятся... пользовательский интерфейс будет автоматически обновлен. Итак, чтобы получить следующие 10 элементов и так далее, вам нужно запросить данные на сервер (в основном с помощью API — подробнее об этом позже) и обновить хранилище. 2 запроса (первый в функции fetch и второй (например, из следующей «кнопки следующего результата») будут иметь одну и ту же логику!

Новый стек, новые правила

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

Сервер

Классический стек веб-сайтов — это LAMP (Linux, Apache, MySQL, PHP) — вы найдете их у каждого хостинг-провайдера по всему миру. и из-за этого многие CMS построены вокруг этого (wordpress, prestashop и т. д.). Я предполагаю, что вы имеете представление о том, как все работает с этим стеком.

С nuxt все по-другому, потому что сервер и клиент имеют много общего. Nuxt создан на основе expressjs (хорошо известного веб-сервера/фреймворка в сообществе nodejs). Когда вы создаете/компилируете свое приложение, под капотом проделывается много работы, чтобы разделить ваш компонент на экспресс-маршруты, функции, которые должны выполняться на стороне сервера, другие на стороне клиента и т. д.

Самое большое дело здесь в том, что ваш сервер apache не может запустить ваш код vuejs и волшебным образом отобразить страницу. это должно быть сделано через сервер nuxt/express.

Такие сервисы, как netlify или heroku, помогут вам решить проблему хостинга и развертывания. Но если вы чувствуете себя предприимчивым, вы можете запустить виртуальный сервер из цифрового океана, установить nginx + nodejs и запустить свое приложение за считанные минуты… но вам все равно придется управлять многими вещами (да, я говорю здесь о безопасности) вы вероятно, не готовы иметь дело с.

Данные

Если я продолжу свой предыдущий пример классической CMS, данные хранятся в базе данных, и ваш веб-сайт может легко запросить их. Вам не нужно писать SQL-запросы для извлечения данных, и вы можете делать это где угодно: ничего страшного, вся страница обрабатывается перед отправкой клиенту.

С nuxt вы не можете выполнять SQL-запросы из своего кода. (хорошо, может быть, вы можете, но не должны). поскольку ваш код сервера/клиента является общим, вы, вероятно, закончите с некоторыми учетными данными, открытыми в вашем коде (и вы этого не хотите). Вы будете полагаться на такие запросы, как API REST или GraphQL. На первый взгляд, это не может показаться разумным выбором (разделение на части), но у вас будут некоторые преимущества, такие как разделение задач, дополнительные возможности масштабирования для внутренних и внешних частей вашего приложения.

Вот как потребляются данные: через API. Wordpress имеет встроенный REST API, который предоставляет данные, готовые для использования JS-скриптом (гуттенберг — довольно хороший пример этого — строгое разделение между блоками данных и пользовательским интерфейсом).

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

Что теперь ?

Я создал пару веб-сайтов, используя nuxt, и мне это очень понравилось. Я призываю всех попытаться построить что-то с этим, чтобы сформировать собственное мнение. Конечно, хейтеры всегда найдут, что сказать, и nuxt не для всех — я понял.

Очень рекомендую попробовать. Nuxt очень мощный. Поскольку его сердцевина наполнена множеством добрых намерений, вы быстро почувствуете себя непринужденно. Конечно, если вы уже знакомы с vuejs (хотя бы немного), вам будет легко работать с nuxt, но древовидная структура проекта nuxt по умолчанию достаточно проста, чтобы помочь вам написать пару страниц и компонент.

Создание веб-сайта с NuxtJS