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

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

Развязка

Компоненты JAMStack

  1. Генераторы статических сайтов
    Генератор статических сайтов – это инструмент, который создает полностью статический веб-сайт в формате HTML на основе необработанных данных и набора шаблонов.
    По сути, генератор статических сайтов автоматизирует задачу кодирования отдельных HTML-страниц и заблаговременной подготовки этих страниц к показу пользователям.

2. CDN (сеть доставки контента)

Сеть доставки контента (CDN) относится к географически распределенной группе серверов, которые работают вместе для обеспечения быстрой доставки интернет-контента.

CDN позволяет быстро передавать активы, необходимые для загрузки интернет-контента, включая HTML-страницы, файлы javascript, таблицы стилей, изображения и видео. Популярность услуг CDN продолжает расти, и сегодня большая часть веб-трафика обслуживается через CDN, включая трафик с крупных сайтов, таких как Facebook, Netflix и Amazon.

3. Безголовая CMS

Основная задача безголовой CMS — хранить и управлять вашим контентом. Неважно, что вы хотите делать с этим контентом. Основная задача платформ отображения, таких как веб-сайт или мобильное приложение, заключается в представлении контента людям. Им все равно, как этот контент хранится или управляется.

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

4. Бессерверные функции

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

Бессерверная архитектура включает в себя функцию «функция как услуга» (FaaS), которая позволяет создавать приложение из отдельных независимых функций. Поставщик FaaS размещает каждую функцию, которая может автоматически масштабироваться в соответствии с потребностями трафика.

JAM Stack и обычная арка

Рабочий процесс JAMStack

JAM Stack — преимущества

  1. Защищенные веб-сайты
    Обслуживание страниц и ресурсов в виде предварительно сгенерированных файлов позволяет размещать только для чтения, что еще больше снижает количество направлений атак.
  2. Производительность
    Сайты Jamstack устраняют необходимость генерировать просмотры страниц на сервере во время запроса, вместо этого генерируя страницы заранее во время сборки.
  3. Экономичность
    При использовании генератора статических сайтов и CDN вам не нужно тратить деньги на хранение данных, серверы и их обслуживание.
  4. Лучшее взаимодействие с пользователем
    Сайты JAMStack работают сравнительно быстрее, чем традиционные сайты, что повышает удобство работы пользователей на веб-сайте.
  5. Удобство для разработчиков
    Слабая связь и разделение элементов управления обеспечивают более целенаправленную разработку и отладку.
  6. Масштабируемость
    Сайты можно легко увеличивать или уменьшать, чтобы справляться с неожиданными изменениями трафика, поскольку они размещены в CDN.

JAM Stack против обычной арки по следующим факторам:

Производительность:

Стек JAM:

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

Традиционная архитектура

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

Безопасность:

Стек JAM:

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

Традиционная архитектура

Менее безопасный из-за множества распределенных открытых частей. Склонен к атакам, если мы явно не защитили приложение.

Расходы:

Стек JAM:

Веб-сайты Jamstack не требуют много инфраструктуры, что экономит деньги. Размещение статических файлов относительно намного дешевле (иногда бесплатно) по сравнению с серверами, где требуется база данных и специализированные надстройки.

Традиционная архитектура

Настройка и обслуживание инфраструктуры требуют более высоких затрат

Хостинг:

Стек JAM:

Приложение и хостинг не связаны, что означает полезные бессерверные функции.

Традиционная архитектура

Приложение и хостинг связаны. Визуальная часть (front-end) обычно связана с back-end, дополнительно требуется поддержка базы данных.

Обработка запросов:

Стек JAM:

Сайты JAMstack не зависят от единого кода на стороне сервера, запрос относится к географически рассредоточенным серверам, которые работают вместе для обеспечения быстрой доставки предварительно обработанного контента (CDN — сеть доставки контента).

Традиционная архитектура

Ответ обрабатывается и возвращается после длинной серии взаимодействий между базой данных, внутренним кодом, сервером, браузером и слоями кэша.

Управление контентом (CMS):

Стек JAM:

Обновление с помощью систем CMS, таких как Netlify CMS, Contentful или популярных безголовых версий CMS WordPress. Для просмотра в реальном времени нам необходимо управлять дополнительными услугами.

Традиционная архитектура

Контент обновляется через традиционные системы CMS, такие как WordPress или Joomla. Предварительный просмотр без проблем

Решающие факторы JAMStack:

  1. Веб-сайт включает в себя больше статических ресурсов / страниц, чем JAM Stack.
  2. Меньше фокусируйтесь на внутренней инфраструктуре
  3. Гибкость внесения изменений во фронтэнд (развязка)
  4. Масштабируемый продукт
  5. Качественные активы с производительностью
  6. SEO-приоритизация
  7. Многие сторонние сервисы, готовые к производству, сократят время производства.
  8. Стоимость меньше, так как у нас меньше инфраструктуры

Опрос об усыновлении

Реклама, маркетинг и СМИ, а также издательское дело — три доминирующие отрасли среди тех, кто решил начать разработку веб-приложений и приложений с помощью JAMstack.

Проекты JAMstack чаще всего создаются для личных веб-сайтов, программного обеспечения b2b и электронной коммерции. И электронная коммерция была растущей тенденцией на протяжении многих лет.

Принятие в реальном мире

Подводные камни стека JAM

  1. JAMStack в первую очередь предназначен для статических приложений, он менее подходит для обслуживания динамического контента.
  2. Когда изменения затрагивают несколько частей приложения, сквозные обновления в CMS/статическом сайте являются излишними и требуют много времени.
  3. Это удобно для разработчиков, но не для авторов контента.
  4. Меньше поддержки плагинов
  5. Когда нам нужны локальные серверы, JAM Stack будет не лучшим вариантом.
  6. Предоставить индивидуальный вкус / предложения, основанные на интересах пользователя, будет сложно.

Некоторые ссылки:

  1. https://jamstack.org
  2. https://softwarethings.pro/blog/jamstack-what-is-it-and-why-you-should-use-it-for-apps-and-web-development/#benefits
  3. https://frontendmasters.com/courses/jamstack/
  4. https://www.cloudflare.com/ru-ru/
  5. https://thoughtworks.udemy.com/course/jamstack/?src=sac&kw=Jamstack