Gatsby.js — это framework для создания сайтов. Он позволяет создавать очень быстрые сайты с высокими показателями Performance. Это генератор статичных страниц, который использует React для создания компонентов и Node.js для создания страниц. На GitHub проект получил 54 000 звезд начиная с 2016 года. В этом посте мы расскажем, почему он такой быстрый и какие особенности в нем есть.
Статическая генерация против динамической
Большинство сайтов используют динамический подход к отрисовке страниц. Это означает, что когда пользователь заходит на страницу, то происходит запрос на бекенд, в котором, в свою очередь, происходит запрос к базе данных, потом ответ из базы данных обрабатывается и отправляется пользователю в браузер.
Static Site Generation отрисовывает все запросы заранее, что позволяет исключить этот долгий путь в динамическом варианте и значительно ускорить загрузку. Это, к сожалению, порождает ситуацию, в которой любое изменение сайта требует его пересборки. Но при этом стоить отметить, что можно создавать динамические компоненты на сайте, которые будут запрашивать актуальную информацию на бекенде во время взаимодействия пользователя с сайтом.
Такой подход можно назвать винтажным. Так как с этого подхода все начиналось.
Немного занудства. Вообще, динамическую отрисовку стоит разделить на Client-side rendering и Server-side rendering. Вопрос в том, где будет создаваться HTML-документ, — в браузере или на сервере. В зависимости от задач проекта будут использоваться разные подходы, при этом их можно миксовать. Например, для сложных приложений Static Site Generation и Server-side rendering не подойдут, лучше использовать Client-side rendering. Но это тема другой статьи уже, вернемся к Gatsby.
Посмотрим, какие еще вещи позволяют добиваться такой производительности.
База на React
Это означает, что вся экосистема React может использоваться для создания сайта. А она на данный момент доминирует во всем мире. И любой React-разработчик разберется с Gatsby за один день. А если он знает Next, так ему хватит одного часа.
Производительность React кроется в виртуальном дереве DOM, которое изменяет при необходимости лишь те части веб-страницы, которые действительно изменились. Например, во время перехода между страницами страницы не будут целиком заново загружаться, а загрузится только часть, которая должна поменяться.
Предварительная выборка (pre-fetching)
Это техника, которая используется для повышения производительности сайта или приложения. Она заключается в предварительной загрузке контента или данных, которые, вероятно, будут запрошены в будущем. Это происходит в фоновом режиме после основной загрузки страницы. Gatsby видит, какие страницы может посетить пользователь на текущей странице, и загружает данные, которые могут потребоваться, если он будет переходить на них. Предварительная выборка может существенно улучшить пользовательский опыт и увеличить скорость загрузки сайта.
Подобный подход позволяет осуществлять очень быстрый переход между страницами. Это может занимать сотые миллисекунды и происходить мгновенно.
Gatsby использует WebP
Это формат изображения, разработанный компанией Google. Он был создан с целью улучшения качества изображений при меньшем размере файла, чем у традиционных форматов, таких как JPEG и PNG. Он экономичнее на 25-34%. На данный момент он поддерживается уже всеми браузерами.
Разделение кода (code splitting)
Это техника в разработке программного обеспечения, при которой основной код приложения разделяется на меньшие, отдельные части или блоки. Это позволяет загружать приложение только с необходимым кодом для конкретной страницы или функции, а не загружать вcю кодовую базу сразу. Это приводит к улучшению производительности, поскольку приложение загружает только необходимый код для действий текущего пользователя. Разделение кода также помогает лучше организовать и поддерживать код, поскольку каждый блок кода может быть разработан, протестирован и обновлен независимо.
Система управления контентом (CMS)
Gatsby может забирать данные из любых CMS. Есть официальные плагины от основных производителей, которые позволяют очень быстро установить связь.
Документация
У Gatsby прекрасная документация и большое англоязычное коммьюнити. Любой вопрос можно решить и найти ответ на GitHub.
Недостаток Gatsby
Нужно пересобирать сайт при каждом обновлении. Это означает, что обновления на сайте появятся с задержкой в 5-20 минут в зависимости от объема сайта. При больших объемах нужно будет заменить генерацию страниц с Static Site Generation на Server-side rendering или Deferred Static Generation, который будет помедленнее, но все равно быстрее, чем решения на PHP.
Итог
Gatsby.js представляет собой мощный инструмент для разработки высокопроизводительных веб-сайтов. Этот статический сайтогенератор, основанный на React и Node.js, обеспечивает эффективную предварительную генерацию страниц, что приводит к быстрой загрузке и оптимальной производительности. Интеграция с GraphQL, обширной системой плагинов, а также возможностью разделения кода делают Gatsby.js привлекательным выбором для разработчиков, стремящихся к созданию современных и быстрых сайтов.
Да, мы делаем сайты на Gatsby, и на Astro JS или Next JS.
Другие статьи
Исследование. Влияние скорости сайта на SEO