Фішки JAMstack: чому статичні сайти перевершують традиційні динамічні

У цій статті ми розберемо з вами ключові моменти розробки статичних сайтів та пізнаємо перевагу static site над traditional dynamic site.

Intro

Все більше і більше обертів набирає досить новий і нетрадиційний підхід в створенні сайтів — JAMstack.

Для початку давайте розберемося, що таке JAMStack, з чим його їдять і чому він «перевершує» традиційні web-сайти. Щоб не заглиблюватися в подробиці і не перетворювати інформаційну статтю в копіпаст з офіційних джерел, я постараюся описати в двох словах, що ж таке цей JAMstack.

JAMstack — не технологія. Я б назвав це методологією або підходом, який пропонує безліч інструментів на вибір для створення статичних сайтів. Він з'явився не так давно, але вже набрав досить пристойне ком'юніті.
JAMstack це — «J» — JavaScript, «A» — API, «M» — markup (так зазначено на офіційному сайті ).

Виходячи з розшифровки абревіатури, стає зрозумілим, що для створення статичного сайту, який не поступатиметься динамічному, нам необхідно всього 3 компонента:

JavaScript — для додання інтерактивності нашому сайту;
API — джерело інформації, що використовується сайтом;
Markup — якийсь контент-генератор або, як його називають, «шаблонизатор», що дозволяє створити розмітку сторінок.

Деталі

JavaScript

Хто стикався з JavaScript, той мене зрозуміє, навіщо він потрібен і з чим його їдять. Для тих, хто не стикався, трохи поясню.

JavaScript — мультипарадигменный мову програмування. Підтримує об'єктно-орієнтований, імперативний і функціональний стилі. Є реалізацією мови ECMAScript (стандарт ECMA-262[8]). Тут детальніше . Коротко — це те, що допомагає користувачеві взаємодіяти з DOM-елементами на web-сторінках. За великим рахунком для зовсім простих сайтів можна обійтися і без нього.

API

API, або простіше кажучи, Application Interface, в даному випадку має на увазі собою джерело вхідної інформації, контенту, необхідного для вбудовування в шаблон нашого Markup.

Це можуть бути: контент-файли, які розташовані безпосередньо в контент-генераторі; стороння адмін-панель, яка підключається до нашого генератора; повноцінне REST API для виведення більш структурованою і складної інформації.

Markup

На примітивному рівні можна використовувати звичайні HTML-файли, які залинкованы між собою і свідомо наповнені контентом. Але звичайний сайт має на увазі під собою мінімум 10 сторінок, багатомовність і можливість редагування контенту нетехническому користувачеві.

Саме для цієї мети були створені SSG — статик сайт-генератори.

Що роблять ці SSG?

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

Ми зупинили свій вибір на статичному контент-генераторі Hugo (тут детальніше про нього). Чому?

доступна документація;
наявність CLI;
підтримка багатомовності;
FREE;
підтримка роутінга;
і повне задоволення SEO-потреб (редиректи, xml ... і т. д).

Все добре, але навіщо? Є маси традиційних CMS

Відповідь досить проста. Із зростаючою потребою в швидкості завантаження і простоті підтримки готового продукту традиційні CMS — досить непростий випадок:

уразливість перед атаками хакерів;
при великому напливі відвідувачів сервер зависає;
найчастіше низька швидкість сайту;
потребує постійної підтримки та модерування сервера.

Звичайно, всі ці проблеми вирішувані. Але знову ж таки повторюся, для вирішення цих завдань необхідно участь досвідченого веб-майстри, роботу якого потрібно оплатити. А ще уявіть ситуацію, коли сайт зламують, або він починає «падати», або вантажиться довго. Це завжди обертається втратою грошей для клієнта.

Як JAMstack решіт ці проблеми?

Для деплоя статичного сайту вам не потрібен традиційний web-сервер. Статичний сайт можна розмістити де завгодно, і він буде працювати від Git Pages до Amazon CDN або на інших сервісах для зберігання файлів. Їх море. Тобто проблема з сервером вирішена — він нам більше не потрібен.

Безпека. Максимум, що може зробити зловмисник — скопіювати наші HTML-файли. Ну і на здоров'я, вони і так публічні :)

Швидкість сайту. Тут все ще простіше — сторінка вже зібрана, вона не будується в рантайме. Користувачеві при запиті приходить простий HTML-файл, який вже заповнений контентом. Як плюс, приємні фічі Asset Optimization від Netlify дозволяють зробити вагу нашої сторінки мінімальним.

Ніякої циклічній підтримки, бекапів і модерації. Все зберігається в Github/Bitbucket/GitLab або у вашому архіві на жорсткому диску (ах так, це я про основи). А стосовно згенерованого контенту, у випадку з Netlify ваш сайт розміщений на тисячах CDN-серверів по всьому світу :)

Звучить прикольно, але все ще незрозуміло, як це працює

Процес роботи з JAMstack я спробую описати на особистому досвіді.

Першим ділом ми реєструємося на GitHub — це безкоштовно. Потім створюємо репозиторій і додаємо в нього наш проект, розроблений на Hugo. Після чого реєструємося в Netlify, виконуємо швидкий туторіал і деплоим наш сайт.

На цьому етапі все простіше, ніж здається. Ми внесли зміни в контент і зробили комміт. Netlify це побачив і запустив новий процес складання. Після успішного завершення збирання Netlify розміщує згенеровані файли на CDN-серверах по всьому світу. Всі.

Звичайно, нам потрібна адмін-панель. Для цього можна використовувати Netlify CMS — безкоштовно, Forestry — умовно безкоштовно, DatoCMS — умовно безкоштовно. Сам процес описувати не буду, але якщо задатися метою, то все дуже просто.

У підсумку

Я на власному досвіді переконався в тому, що, якщо створювати сайт на JAMstack (я використовував Dato + Hugo + Netlify), час розробки скорочується в 2 рази. У клієнта є безкоштовний SSL — сертифікат і HTTP2. Немає аптаймов, сайт вантажиться швидко — можна хвалитися PageSpeed. Клієнт може редагувати контент. У підсумку з 15 сайтів, створених на JAMstack, — 15 задоволених клієнтів.

Приклади:
cantoneri.com <<< ого, та це ж інтернет-магазин :)
clue.ouraring.com
noiseoftime.merikeskusvellamo.fi

Опубліковано: 03/11/17 @ 11:01
Розділ Безпека

SEO Блог