Составляющие JAMstack

Вернемся к стеку JAM: он обычно состоит из трех компонентов: Javascript, API и Markup. Его история связана с превращением термина «статический сайт» во что-то более значимое (и востребованное на рынке).

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

Что такое JAMstack
Что такое JAMstack

Хотя нет какого-либо определенного набора инструментов, которые вам нужно использовать, или каких-либо инструментов, кроме простого HTML, есть отличные примеры того, что может составлять каждую часть стека. Давайте немного углубимся в каждый компонент.

Javascript

Компонент, который, вероятно, проделал большую часть работы по популяризации JAMstack, — это Javascript. Наш любимый язык браузера позволяет нам предоставлять все динамические и интерактивные элементы, которых у нас могло бы не быть, если бы мы обслуживали простой HTML без него.

Именно здесь вы часто будете видеть, как в игру вступают UI-фреймворки, такие как React, Vue, и новички, такие как Svelte.

Составляющие JAMstack
Пример «Простой компонент» с сайта reactjs.org

Они делают создание приложений более простым и организованным, предоставляя API-интерфейсы компонентов и инструменты, которые компилируются в простой HTML-файл (или их набор).

Эти HTML-файлы включают в себя группу ресурсов, таких как изображения, CSS и фактический JS, которые в конечном итоге передаются браузеру через ваш любимый CDN (сеть доставки контента).

API

Использование сильных сторон API — это основа того, как сделать приложение JAMstack динамичным. Будь то аутентификация или поиск, ваше приложение будет использовать Javascript для отправки HTTP-запроса другому провайдеру, что в конечном итоге улучшит работу в той или иной форме.

В Gatsby придумали фразу «контентная сетка», которая довольно хорошо описывает возможности.

Вам не обязательно обращаться только к одному хосту для получения API, но вы можете обратиться ко многим, сколько вам нужно (но постарайтесь не переусердствовать).

Например, если у вас есть безголовый (headless) WordPress API, в котором вы размещаете свои записи блога, учетную запись Cloudinary, в которой вы храните свои специализированные мультимедийные файлы, и Elasticsearch, который предоставляет функции поиска, все они работают вместе, чтобы предоставить качественный и единый опыт для людей, использующих ваш сайт.

Markup

Markup — разметка. Это критическая часть. Будь то написанный от руки HTML или код, который компилируется в HTML, это первая часть, которую вы предоставляете клиенту. Это своего рода де-факто часть любого сайта, но то, как вы его обслуживаете, является самой важной частью.

Чтобы считаться приложением JAMstack, HTML необходимо обслуживать статически, что в основном означает, что он не будет динамически отрисовываться с сервера.

Если вы собираете страницу вместе и обслуживаете ее с помощью PHP, то, скорее всего, это не приложение JAMstack. Если вы загружаете и обслуживаете один HTML-файл из хранилища, в котором создается приложение с помощью Javascript, это звучит как приложение JAMstack.

Составляющие JAMstack
Статический вывод Gatsby на AWS S3

Но это не значит, что мы всегда должны собирать 100% приложения внутри браузера. Такие инструменты, как Gatsby и другие статические генераторы сайтов, позволяют нам извлекать некоторые или все наши источники API во время сборки и выводить страницы в виде HTML-файлов.

Подумайте, если у вас есть блог WordPress, мы можем извлечь все записи и, в конечном счете, создать новый HTML файл для каждой записи. Это означает, что мы сможем обслуживать прекомпилированную версию страницы непосредственно в браузере, что обычно приравнивается к более быстрой первой отрисовке и более быстрому опыту для вашего посетителя.

Мы говорили выше о 3-х компонентах (Javascript, API, Markup), но о чем мы не говорили, так это о том, что вам не обязательно использовать все 3 из них, чтобы считать ваш сайт достойным названия JAM.

На самом деле все сводится к разметке и тому, как вы ее обслуживаете. Вместо того, чтобы ваше приложение Rails отображало ваш HTML-код для вас, вы можете разместить на S3 предварительно скомпилированное приложение React, которое обращается к Rails через набор API.

Но вам даже не нужны API. Вам даже не нужен Javascript! Пока вы обслуживаете HTML-файл без необходимости его компилирования на сервере во время запроса (то есть предварительного рендеринга), у вас есть сайт JAMstack.

Была ли эта страница полезной?