В smartive мы всегда видели потенциал генераторов статических сайтов. После использования Wintersmith и Next.js мы недавно перешли на Gatsby.js для сайта нашей компании. Решение, о котором мы не сожалеем. Вот почему.

Как уже упоминалось, мы уже создали веб-сайт нашей компании, используя генераторы статических сайтов. В прошлом году мы, наконец, перешли с нашего старого доброго кастомного PHP-приложения с минимальной логикой или без нее, которое служило нам около двух лет, на Wintersmith. В то время это был один из ведущих генераторов статических сайтов на основе Node.js. Поскольку большинство наших приложений в то время уже были основаны на JavaScript, казалось, что они идеально подходят. Нам очень пригодился тот факт, что наша компания проходила полный ребрендинг в части корпоративного стиля.

После почти года работы в Wintersmith мы столкнулись с его ограничениями. Вот некоторые из основных недостатков того времени:

  • Отсутствие разделения кода, в результате чего клиенту приходится загружать кучу ненужных файлов JavaScript и CSS.
  • Получение внешних ресурсов, таких как сообщения в блогах, было довольно неудобным, а иногда даже невозможно.
  • Оптимизация процесса сборки была практически невозможна и в нашем случае привела к установке Webpack поверх Wintersmith, которая не была на самом деле обслуживаемой.

Реагируйте на помощь!

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

Первое, что привлекло наше внимание, был Next.js, поскольку, казалось, все, кто собирался создавать приложение React, отрисовываемое на стороне сервера, использовали его. После нескольких дней взлома нашего приложения мы столкнулись с некоторыми проблемами, особенно когда дело дошло до рендеринга внешнего интерфейса. Мы выбрали prismic.io для нашей серверной системы, которая обслуживала весь контент. Хотя сначала это казалось правильным, но, поскольку все мы являемся разработчиками, работа над ограничениями этого просто не казалась правильной.

К счастью, в то время Gatsby.j версия 1.0 только вышла, и мы решили попробовать ее во время одного из наших так называемых Hackday. Мы сразу влюбились в простоту системы. Наш первый подход заключался в том, чтобы просто использовать все компоненты, которые мы уже создали для Next.js, и подкрепить их простыми файлами JSON, содержащими контент, который мы хотели обслуживать, с использованием удивительного, но простого механизма извлечения, основанного на GraphQL, который предоставляет Gatsby.js. Это было достигнуто за счет внутреннего использования плагина gatsby-transformer-json. Имейте в виду, что наш контент меняется редко, поэтому всегда было так, как мы хотели (не зная в течение некоторого времени, как мы должны были признаться себе).

Одной из наших основных целей всегда было показывать наши последние сообщения в блогах на Medium. К сожалению, в то время не было плагина для этого, поэтому мы решили написать его сами. К моменту написания я с гордостью могу сказать, что мы успешно сделали это и даже внесли это обратно в сообщество. Не забудьте проверить это, если вас интересует подобное решение.
Единственное, что осталось, - это фактически перестроить и развернуть наш сайт, как только на Medium появится новая запись в блоге. Мы выбрали IFTTT для этой задачи, в основном из-за его простоты. Каждый раз, когда IFTTT получает недавно опубликованное сообщение в блоге, он запускает конвейер GitLab CI с помощью веб-перехватчика, который затем перестраивает и развертывает наше приложение в нашей инфраструктуре Docker Cloud.

Результатом нашей работы с Gatsby.js стал выдающийся показатель Google PageSpeed благодаря встроенным механизмам разделения кода и обработки кеша. Если вам интересно, как построен smartive.ch, вы можете взглянуть на наш код на GitHub.

Мы действительно с нетерпением ждем возможности создавать другие интересные вещи для наших клиентов, используя Gatsby.js!

Особая благодарность Роберту Фогту, который проделал большую часть работы над нашим веб-сайтом и предоставил упомянутый выше плагин Medium.