7 причин использовать генератор статических сайтов

Генераторы статических сайтов (SSG - Static site generators) становятся все более популярными в последнее десятилетие. В этой статье узнаешь, как твой сайт может выиграть от удобных для разработчиков процессов сборки, более легкого развертывания, повышенной производительности и лучшей безопасности, которые предлагает статический сайт.

Во-первых, давай выясним, что мы подразумеваем под термином «генератор статических сайтов».

Что такое статический сайт?

Вспомни первый созданный тобою сайт. Большинство разработчиков начинают с создания серии страниц, содержащихся в отдельных HTML-файлах. Каждая из них содержит такие активы, как изображения, CSS и возможно, JavaScript. Возможно, ты запускал эти файлы непосредственно из файловой системы без веб-сервера. Это было просто.

Трудности возникают по мере того, как твой сайт становится больше и сложнее. Рассмотрим навигацию: она может быть одинаковой в каждом файле, но добавление новой страницы требует обновления всех остальных. Даже ссылки на CSS и изображения могут стать неудобными по мере развития структуры папок. Возможно, ты рассматривал такие варианты, как серверные include или PHP, но более простым вариантом может быть система управления контентом (CMS).

Что такое система управления контентом?

CMS обычно предоставляет административные панели управления. Они позволяют авторам писать контент, который хранится в внутренней базе данных. Когда посетитель запрашивает URL-адрес, CMS:

1. Определяет, какая страница требуется
2. Запрашивает соответствующее содержимое из базы данных
3. Загружает HTML-шаблон (обычно из файловой системы)
4. Отображает содержимое шаблона
5. Возвращает отформатированную HTML-страницу в браузер посетителя

Это происходит практически мгновенно. Шаблон может включать код для генерации меню в соответствии с иерархией навигации. Более четырех из десяти человек выбирают для управления своим сайтом CMS WordPress, работающую на PHP/MySQL и имеющую открытый исходный код.

К сожалению, CMS поднимает другой набор проблем:

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

Что такое генератор статических сайтов?

SSG - это компромисс между статическим сайтом, созданным вручную и полноценной CMS, сохраняя при этом преимущества обеих систем. По сути, ты создаешь статический сайт на основе HTML-страниц, используя концепции, подобные CMS, такие как шаблоны. Содержимое может быть извлечено из базы данных, файлов Markdown, API или любого удобного места хранения.

Термин "статичный" не означает "неизменный". SSG создает страницу один раз, в то время как CMS создает ее при каждом запросе. Конечный результат идентичен и пользователи не заметят разницы.

Связанная концепция - это "безголовая" или " раздельная" CMS. Она использует интерфейс, такой как WordPress, для управления контентом, но позволяют другим системам получать доступ к данным через REST API или GraphQL API. Таким образом, SSG, например Eleventy, может создать статический веб-сайт, используя содержимое страниц WordPress, извлеченное с внутреннего сервера. Полученные HTML-файлы могут быть загружены на веб-сервер, но WordPress не должна быть в общедоступен.

Термин Jamstack (JavaScript, APIs и Markup) также используется по отношению к статическим сайтам. Он относится к росту числа фреймворков, бессерверных функций и связанных с ними инструментов, которые генерируют статические файлы, но позволяют создавать более сложные интерактивные возможности.

Популярные генераторы статических сайтов такие, как Jekyll, Eleventy, Gatsby, Hugo и Metalsmith. SSG доступны для большинства языков. Такие фреймворки, как Next.js, по возможности статически отображают страницы, но также позволяют разработчику выполнять код на стороне сервера, когда это необходимо.

Давай рассмотрим преимущества использования SSG:

1. Гибкость

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

На статическом сайте виджет можно просто вставить в файл напрямую или с помощью частичного/фрагментарного файла. Ограничений немного, поскольку ты не ограничен тем, что накладывает на тебя CMS.

2. Лучшая производительность

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

Статические сайты могут создавать предварительно кэшированные страницы, срок действия которых никогда не истекает. Файлы также могут быть минифицированы перед развертыванием для обеспечения наименьшей нагрузки и легко развернуты через глобальные сети доставки контента (CDN). Статический сайт всегда будет работать быстрее, чем версия на базе CMS, использующая аналогичный шаблон.

3. Меньше зависимостей на стороне сервера

Типичная установка WordPress требует:

подходящая операционная система, например Ubuntu или CentOS
веб-сервер, такой как Apache или NGINX
PHP с соответствующими расширениями и конфигурациями веб-сервера
MySQL
приложение WordPress
все необходимые плагины
код темы/шаблона

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

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

4. Повышенная надежность

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

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

5. Превосходная безопасность

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

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

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

Кто-то может получить доступ к серверу через SSH или FTP и испортить страницы или загрузить файлы. Однако обычно просто проверить изменения (возможно, используя git status), стереть весь сайт и создать его заново.
API, вызываемые статическим сайтом, открыты в браузере и могут быть использованы точно так же, как и любой код на стороне сервера - например, почтовая программа с формой. Хорошая практика безопасности, CORS и CSP помогут в этом.

6. Соображения по поводу клиентского контроля

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

Статический сайт может быть настолько ограниченным или гибким, насколько ты захочешь. Если ты используешь Markdown или аналогичные плоские файлы, у редакторов меньше возможностей сделать ошибку или негативно повлиять на стиль страницы. Некоторым будет не хватать панелей администрирования контента CMS, но ты можешь сделать то же самое:

использовать существующую CMS и очищать данные перед генерацией
предоставлять более простые рабочие процессы, такие как редактирование файлов на основе Git в StackEdit или Hackmd.io.

7. Контроль версий и тестирование

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

Статический сайт, как правило, безопаснее. Контент можно хранить в:

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

Тестирование также упрощается, поскольку сайт можно создавать и просматривать где угодно - даже на клиентском ПК.

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

Итак, все хорошо в мире статических сайтов. Или нет? Прочти последующую статью 7 причин НЕ использовать генератор статических сайтов.

Источник: https://www.sitepoint.com/7-reasons-use-static-site-generator/