Go static: 5 причин попробовать JAMstack в следующем проекте
Независимо от того, строите ли вы блог, настраиваете сайт электронной торговли или разрабатываете одностраничное приложение на основе JavaScript, дни WordPress для всех, проектов, сочтены. Статические генераторы сайтов и сверхбыстрые дистрибутивы на базе CDN обеспечивают создание веб-сайтов нового поколения, и настало время принять это.
Прежде чем погрузиться в то, почему , давайте быстро посмотрим, что .
JAMstack & Static Dev
Термин JAMstack обозначает JavaScript, API и Markup, а также описывает способ создания статических веб-сайтов без базы данных. Эта концепция обманчиво проста - слово «статическое» подразумевает простоту или отсутствие интерактивности, но это не так далеко истины. Когда мы говорим о статических веб-сайтах, мы имеем в виду технологию, используемую для сборки, питания и обслуживания.
Реальную мощь разработки JAMstack проще всего понять по сравнению с динамическими веб-сайтами под управлением CMS. Легко забыть огромное количество шагов, необходимых для выполнения одного запроса страницы, и сложность операций, которые постоянно выполняются на сервере для создания окончательного HTML, полученного браузером пользователя. Мы будем использовать типичный сайт WordPress в качестве нашего (сильно упрощенного) примера.
Когда пользователь запрашивает страницу, ваш сервер запрашивает базу данных MySQL и использует интерпретатор PHP в сочетании с данными из активной темы и плагинов, чтобы сшить документ HTML, который затем можно будет обслуживать в браузере пользователя. Это необычайно сложная операция, по сути, является шаблоном. Учитывая, что даже скромный блог слишком сложный, чтобы кодировать каждую страницу вручную, метод разделения контента на компоненты многократного использования и автоматизацию сборки имеет смысл.
Но почему эта операция шаблонирования должна произойти на сервере? Неужели нам действительно нужны базы данных и серверное программное обеспечение (которое открывает множество дыр в безопасности на этом пути), чтобы создать простой блог? В то время, когда сами браузеры стали операционными системами, способными взаимодействовать с бесчисленными API-интерфейсами и запуском сложных приложений на стороне клиента, а при разработке на переднем конце доминирует автоматизация на основе JavaScript с использованием npm, разве мы не переросли эту модель?
Статические генераторы сайтов, такие как Jekyll и Hugo, являются частью того, что делает это возможным. Они существенно заменяют PHP как нашу систему шаблонов, но вместо того, чтобы работать на сервере и генерировать контент «на лету», они запускаются локально как часть вашего процесса разработки. Ваш HTML создается заранее, и ваш веб-сайт - теперь коллекция легко кэшированных статических файлов - может быть распространен среди пользователей с невероятно быстрым CDN (сеть распространения контента).
И это делеко не все.
1. SEO
Очевидно, я собираюсь начать с SEO. Статическая разработка приходит с множеством преимуществ для видимости вашего сайта в органическом поиске, не все из которых широко оценены.
Во-первых, упрощение URL-адресов и архитектуры сайта часто проще с помощью JAMstack, чем с динамическим веб-сайтом и полной CMS. Вместо того, чтобы полагаться на сложные URL-адреса на стороне сервера, чтобы сделать ваш контент доступным на довольно URL-адресах ( example.com/?p=12345 → example.com/nice-and-tidy/ ), ваши URL-адреса могут быть такими, какие вы хотите, чтобы они были : они просто отражают расположение файлов вашего веб-сайта.
Потенциал для нежелательного дублирования также значительно сокращается. Многие CMS автоматически генерируют страницы для категорий, тегов и архивов на основе даты, которые вам даже не нужны. Как правило, такие страницы обрабатываются с помощью директив noindex или «?каконикализируются?» с использованием дополнительных плагинов. Статические генераторы сайтов вместо этого позволяют точно настраивать создание страницы и создавать любую систематизацию вашего контента. Если вам того требуется, многие генераторы включают мощную логику и функции для создания фильтрованных, разбитых на страницы архивов.
Наконец, есть много потенциальных преимуществ SEO для сайтов, которые активно используют рендеринг на стороне клиента и рамки JavaScript. Учитывая статичность исходного кода, процесс обслуживания предварительных версий вашего HTML-кода становится проще. Некоторые веб-хосты, специализирующиеся на статических сайтах, такие как Netlify, даже предлагают _escaped_fragment_
# предварительное обслуживание статического сайта будет кэшировать предварительно загруженные страницы в течение 24-48 часов.
2. Скорость
Тесно связанна с SEO, но очевидно, для UX тоже критична скорость.
Скоростные преимущества статических сайтов могут быть феноменальными. С заранее сгенерированным HTML и удаленными запросами к базам данных, ваш контент может быть мгновенно передан из глобального CDN, такого как Amazon Cloudfront. Эксперимент, Mathias Biilmann для журнала SmashineMagazine обнаружил, что с высоко оптимизированный динамический веб-сайт (в том числе надежная реализация кэширования), время до получения первого байта в среднем в шесть раз быстрее , используя статический версии, распространяемой через CDN. Сам журнал Smashing будет мигрировать в JAMstack и Netlify с их неизбежным редизайном.
Кэширование также становится намного проще. Используя WordPress (вообще любую динамическую CMS), URL-адреса могут возвращать различный контент в зависимости от строк запроса и факторов, например, независимо от того, авторизован ли пользователь, запрашивающий страницу. Изменения в тегах, категориях, комментариях, страницах авторов и т. д. влияет на актуальность кэшированной версии страницы. Со статическим веб-сайтом все URL-адреса возвращают один и тот же HTML всем пользователям, и обновления могут распространяться по всему миру почти мгновенно. Любой «динамический» контент обрабатывается на стороне клиента с использованием JavaScript и API, таких как Disqus для комментариев и FormKeep для форм.
3. Безопасность
Это коротко, статические веб-сайты являются абсолютной крепостью.
Без баз данных, плагинов или динамического программного обеспечения, работающих на вашем сервере, потенциал для инъекций и взломов кода значительно сокращается. Когда ваш сайт представляет собой коллекцию статических файлов, все динамические функции обрабатываются с помощью API и JavaScript на стороне клиента, что отрицает необходимость полагаться на плагины CMS. Хотя вполне возможно, что внешняя обработка API-данных с постоянными данными может выявить уязвимость, устраняя такую CMS, избавляет от множество вариантов отказа и векторов атак. Для статических блогов не будет преувеличением сказать, что безопасность по сути становится не-проблемой , по крайней мере, по сравнению с обычной установкой WordPress.
SSL-сертификаты также просты в установке и доступны бесплатно благодаря автоматическим службам сертификации, таким как LetsEncrypt .
4. Развертывание и рабочий процесс
Только после того, как вы работали на веб-сайте JAMstack - регулярное развертывание обновлений и публикация контента - вы начинаете ощущать разрушительный потенциал этого подхода к разработке. Он развивается настолько быстро, что иногда он может немного походить на дикий запад, с новыми инструментами и услугами, кажущимися
Основной принцип разработки JAMstack заключается в том, что все живет в репозитории Git; все от компонентов нашего статического сайта, конфигурационных файлов генератора, CSS & JS, до нашего письменного Контента (сохраненного как документы с открытым текстом). С помощью службы хостинга/развертывания, настроенной для непрерывного зеркального отображения соответствующей ветви репозитория, править сайт становится очень просто, коммит на GitHub. Весь ваш веб-сайт – код и содержимое-живет в одном централизованном месте, защищенном надежным контролем версий, и может быть настроен для непрерывного развертывания.
** Но как насчет клиентов?** Нетехнические пользователи? Специалисты по изготовлению контента, которые довольны редакторами в стиле WordPress, но для кого GitHub и markdown темный лес
Эта проблема была признана много лет назад, и многие захватывающие решения начинают расти. Некоторые из них удивительно просты. Даже если ваши редакторы контента не знакомы с основами markwown - как # heading , **bold** , *italic* - даже тогда они могут редактировать базовый репозиторий. Такие инструменты, как Prose.io, интегрируются с GitHub для обеспечения более дружественного пользовательского интерфейса для нетехнических авторов. Создайте ветку для редакторов контента, а затем просто объедините их изменения, чтобы публиковать новый контент.
Кроме того, существуют десятки так называемых «безголовых» CMS-решений, которые идеально подходят для статических веб-сайтов. Это, по сути, API-ориентированные системы управления контентом, которые отделяют ваш контент от внешнего интерфейса вашего веб-сайта. Например , Siteleaf работает с Jekyll и GitHub, чтобы предлагать облачное редактирование с помощью существующих инструментов
Как я уже сказал, это быстро развивающаяся область; вы столкнетесь с проблемами при адаптации к статическому рабочему процессу, особенно для более амбициозных проектов. Любой, кто заинтересован в использовании статических сайтов на коммерческой или крупномасштабной основе, должен проверить статью Stefan Baumgartner в журнале Smashing.
5. Взрывное сообщество
Растущая популярность разработки статических сайтов породила некоторые невероятные новые услуги.
Возьмите электронную торговлю , например. Для небольших ритейлеров, которые обычно могут полагаться на WordPress и WooCommerce, статический веб-сайт теперь является вполне жизнеспособным вариантом. Snipcart - это система корзины покупок и проверки на основе JavaScript, которая позволяет разработчикам добавлять функциональные возможности электронной торговли на любой веб-сайт. Управление запасами и продажами осуществляется через панель инструментов Snipcart, а его API позволяет интегрировать системы управления запасами, поставщиков доставки и т. Д. Альтернативные решения включают Foxycart и кнопку покупки Shopify .
Для блоггеров , которые обычно используют предварительно созданную тему для своего сайта, теперь есть сотни опций - просто просмотрите справочники темы Hugo и Hexo . Стоит упомянуть, что некоторые технические ноу-хау по-прежнему необходимы для запуска и запуска с одним из этих статических генераторов. Они, конечно же, давно уходят в процветающие тематические рынки сами по себе, но в лучшем случае это хорошо: раздутые темы, наполненные ненужными плагинами и инструментами для создания страниц, здесь это не проблема!
Существуют также хостинг-провайдеры, специализирующиеся на статических веб-сайтах. Netlify является наиболее известным и не без оснований. Они предлагают глобальные CDN, бесплатные пользовательские домены и SSL-сертификаты, а также интеграцию с GitHub для обеспечения возможности сборки и атомного развертывания прямо из командной строки. Услуга также может похвастаться мощным интерфейсом для обработки вещей, которые обычно обрабатываются на вашем сервере, например, перенаправления, пользовательские 404, защита паролем, проксирование и т. Д. (Да, это означает, что больше нет htaccess ).
Это для меня?
Естественно, существует множество видов веб-сайтов, которые никогда не будут хорошо подходить для разработки JAMstack. Есть также много законных проблем и препятствий - некоторые из которых вы столкнетесь даже с меньшими проектами, которые все еще необходимо преодолеть. Прежде всего, услуги, предназначенные для нетехнических пользователей и редакторов контента, еще нужно отполировать, а скорость, с которой развиваются многие инструменты, может сбить с толку новичков.
Тем не менее, я считаю, что экосистема вокруг статической веб-разработки теперь достигла переломного момента. Во многих случаях преимущества статического развития в настоящее время перевешивают недостатки, а более широкое использование этих инструментов, платформ и услуг будет подталкивать их к силе.
Итак, это для вас? Если вы дистанционно знакомы с веб-разработкой и еще не пробовали современный статический генератор сайтов, нет лучшего времени, чтобы дать ему повод и сделать это для себя. Прочитайте приведенные ниже ресурсы, просмотрите рассказ Матиаса Бильманна в Smashing Conf, затем попробуйте поднять свой персональный сайт с помощью современных статических средств разработки, отбросив базы данных и запустив себя на скоростном CDN.
Вам будет трудно вернуться, и возможности растут с каждым днем.
(с)перевод статьи https://builtvisible.com/go-static-try-jamstack/