GatsbyJs — самый популярный генератор статических сайтов (SSG), преодолевающий некоторые ограничения рендеринга на стороне клиента (CSR). Он может изменить способ создания веб-сайтов. Gatsby легко освоить, особенно если вы работали с React, поскольку Gatsby — это оболочка над React. Я выучил и выкатил минимально жизнеспособный продукт для своего хобби-проекта всего за месяц.
Примечание. Большая часть того, что может предложить Гэтсби, не уникальна. Другие SSG также предлагают их, но для ясности я буду придерживаться Gatsby в этой статье.
Пролог
Я фанат React, как и большинство фронтенд-разработчиков. Это полностью изменило способ разработки интерфейса. Я учился в колледже в 2018 году, и в то время React для меня равнялся create-react-app (CRA). CRA обрабатывает маршрутизацию и связывание. Он создает одностраничное приложение (SPA), поэтому я мог просто сосредоточиться на логике сайта.
Будучи студентами, мы создаем веб-сайты для наших ежегодных симпозиумов в колледжах и каждый год используем традиционные страницы, отображаемые на стороне сервера. Мы создавали и обслуживали отдельные страницы для каждого отдела и каждого события на симпозиуме. При рендеринге на стороне сервера каждая страница загружалась бы в свое время, и любому посетителю пришлось бы ждать. Это привело к усталости зрителей, которые, скорее всего, потеряли терпение и покинули сайт, не ознакомившись со всем, что мы могли предложить.
Мы с другом подумали о решении этой проблемы и создали веб-сайт в виде SPA. Мы выбрали React. Мы не пошли на компромисс в отношении качества и оптимизировали для наилучшего опыта, который мы могли осуществить. У нас были изображения WEBP и SVG, мы обслуживали сайт через CDN и использовали разделение кода на основе маршрутов.
Ожидание: сайт будет очень быстрым. Любой посетитель посетит все соответствующие страницы.
Реальность: Первоначальная загрузка заняла намного больше времени. Мобильным устройствам (почти 80% наших целевых пользователей) было сложно отображать страницы.
Если бы я знал о Гэтсби тогда, это было бы очевидным решением этой проблемы. Поэтому я решил сделать следующий лучший шаг: написать о своем опыте, и вот мы здесь.
Почему не рендеринг на стороне клиента (CSR)?
CSR — самый идеальный подход для веб-приложений. А с появлением прогрессивных веб-приложений (PWA) они ведут себя так же, как нативные приложения. Фронтенд-разработчики любят CSR: мы можем обслуживать их через CDN, применять лучшие механизмы кэширования, экономить полосу пропускания и делить нагрузку с клиентом. Звучит как беспроигрышная ситуация для всех, за исключением того, что у нее тоже есть ограничения (как и у всего).
Поисковая оптимизация (SEO)
SEO очень важно для веб-сайтов. Почти все веб-сайты зависят от поискового трафика для ведения своего бизнеса. Хотя Google и Bing заявляют, что могут отображать и понимать некоторый JS-контент, они часто ограничены. Потеря поискового трафика — потеря бизнеса.
Время рендеринга
Мобильные устройства из-за ограниченного аппаратного обеспечения часто плохо справляются с рендерингом на стороне клиента. Статистика говорит, что более 50% пользователей покидают сайты, загрузка которых занимает более трех секунд. Помимо влияния на пользовательский опыт, скорость страницы также является фактором SEO, влияющим на ваш трафик.
Так что, если вы зависите от поискового трафика, использование CSR — плохая идея. Гэтсби решает обе эти проблемы.
Что такое Гэтсби?
Gatsby определяет себя как «бесплатную платформу с открытым исходным кодом, основанную на React, которая помогает разработчикам создавать молниеносно быстрые веб-сайтыиприложения». Это SSG, что означает, что файл, предоставляемый пользователю, не компилируется во время выполнения. Вместо этого они компилируются во время сборки, что экономит много вычислительного времени и мощности. Поскольку они рендерятся во время сборки, вычислительный сервер не нужен: достаточно простого сервера, на котором размещаются файлы: AWS S3, Netlify, Firebase, которые затем можно распространять по CDN.
Что хорошего в Гэтсби?
Вы можете подумать: «По сути, он просто применяет данные к шаблону, а выходной HTML-код записывается в файл по указанному пути. Я могу это сделать самостоятельно. В этом нет ничего хорошего!”
Нет.Вот где момент вау.
Гэтсби визуализирует компонент React с переданными реквизитами и состоянием по умолчанию — и компилирует файл HTML в заданном месте. Это указывает на несколько файлов SCSS и JS. Как только браузер загружает этот HTML-файл, он быстро отображает первоначальную отрисовку, что является причиной очень редкой «первой отрисовки с содержанием».
Тем временем файлы JS и ReactJs загружаются, компоненты React инициируются и прикрепляются к статическому HTML. Затем обработчики событий присоединяются в соответствии с протоколом React. Этот процесс называется гидратацией.
Дальнейшая навигация в дальнейшем происходит с получением данных JSON, скомпилированных для каждой страницы Гэтсби во время сборки. Из-за разделения кода и преимуществ ленивой загрузки некоторые компоненты JS также загружаются по пути. Следовательно, они ведут себя так же, как и CSR.
Если подумать, каждая страница в Gatsby — это отдельный экземпляр React SPA с предварительно обработанной конкретной страницей.
Что еще может сделать Гэтсби?
Плагины
Он имеет обширную экосистему плагинов, которые вы можете использовать для решения большинства задач: создание веб-манифеста, предоставление автономных возможностей, создание карты сайта, подключение к Google Analytics, получение контента из вашего WordPress и т. д. Все, что вам нужно сделать, это установить правильный npm и добавьте его в свой config. Если вы не можете найти нужный плагин, вы можете просто создать свой собственный.
Источник данных
Вы можете вносить данные откуда угодно. Исходные плагины могут сделать это за вас. Это может быть WordPress, любая безголовая CMS, API, ваш локальный JSON или любые файлы уценки. Вы можете трансформировать их в соответствии с вашими требованиями.
Машинопись
Gatsby предоставляет встроенную поддержку машинописного текста. Измените имена файлов с `.js` на `.tsx`, и все будет работать так же хорошо. Вы можете принять его постепенно
GraphQl
GraphQl — это основной формат данных в Gatsby. Это упрощает работу с отношениями, сортировкой и фильтрацией.
Гэтсби строит
У Гэтсби очень короткое время сборки. Вот приблизительная статистика, когда я строил с помощью Macbook Pro 2015.
Данные являются локальными. Поэтому нет необходимости делать какие-либо сетевые запросы.
2K страниц => 50 сек.
20 тыс. страниц => 10 минут
200 тыс. страниц =› Памяти ноутбука не хватило. Но это можно построить в облаке.
Гэтсби Облако
GatsbyJs имеет свою облачную платформу под названием Gatsby Cloud, которая упрощает создание и распространение. Вам просто нужно нажать на Git. Он будет собран и развернут у нашего хостинг-провайдера. Он даже предлагает бесплатный план. У него есть опция предварительного просмотра, которая позволяет протестировать новые обновления перед развертыванием. Он также может провести аудит маяка.
Инкрементная сборка
Время строительства увеличивается пропорционально размеру участка. Для некоторых случаев использования, таких как новостной веб-сайт, где важна скорость обновления, Gatsby нецелесообразен. Это основное ограничение для всех SSG, а не только для Gatsby. Но Gatsby также решает эту проблему с помощью опции «Инкрементная сборка» (она доступна только на платном плане), которая отслеживает изменения во внешних данных и вносит изменения только в эти страницы. Это ускоряет обновление сайта. Гэтсби утверждает, что это в 10–1000 раз быстрее.
Почему это называется GatsbyJs?
Я думаю, что создатель мог быть поклонником Великого Гэтсби. Что тогда привело меня к другому вопросу: это была книга или фильм? Потом я обнаружил, что существует как минимум пять задокументированных версий фильма (спасибо Википедия)
В любом случае, я устал искать ответ. Если вы знаете причину номенклатуры, дайте мне знать в комментариях.
Под редакцией Картика Кумара
