Статические сайты на React...Должен ли я использовать Next.JS? Но я слышал, что Gatsby тоже ничего. Может, мне стоит использовать его ?

Сравним эти 2 фреймворка.

Fight!

Gatsby & Next - что общего

Используя мощь современных фреймворков и таких инструментов как Webpack и продвинутый CSS, генераторы статических сайтов (далее ГСС) позволяют создавать прекрасные сайты с уникальным контентом, без особых усилий. Оба этих ГСС для React являются лучшими в своем роде.

Серверная сторона 

Итак, мы начинаем немного разбираться в технических вопросах.

Gatsby.JS  - это генератор статических сайтов. Генератор статического сайта генерирует статический HTML во время сборки. Он не использует сервер.

Next.JS - это в основном инструмент для рендеринга страниц на стороне сервера. Он динамически генерирует HTML каждый раз, когда поступает новый запрос с использованием сервера.

Конечно, оба могут вызывать API-интерфейсы на стороне клиента. Принципиальное отличие заключается в том, что Next требует, чтобы сервер мог работать. Gatsby может работать без какого-либо сервера вообще.

Gatsbyпросто генерирует чистый HTML/CSS/JS в build time, тогда как Next создает HTML/CSS/JS в run time. Таким образом, каждый раз, когда приходит новый запрос, он создает новую HTML-страницу с сервера.

Обработка данных

Еще одно фундаментальное отличие инструментов состоит в том, как они обрабатывают данные.

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

Что это вообще значит?

Gatsby использует то, что называется GraphQL. GraphQL - это язык запросов, и если вы знакомы с SQL, он работает очень похожим образом. Используя специальный синтаксис, вы описываете данные, которые вы хотите в своем компоненте, а затем эти данные передаются вам.

Gatsby делает эти данные доступными в браузере, когда они нужны вашим компонентам.

Пример:

import React from "react"
import { graphql } from "gatsby"
export default ({ data }) => (
  <div>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>We're a very cool website you should return to often.</p>
  </div>
)
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }

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

Gatsby также имеет множество плагинов для различных источников данных, которые (теоретически) позволяют легко интегрироваться с разными данными. Примерами плагинов для источников данных являются Contentful, Wordpress, MongoDB и Forestry. Это позволяет вам делать такие вещи, как подключение вашего сайта к CMS и внешний контроль над контентом.

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

... Окей круто.

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

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

Так что выбрать?

Нужно ли вам использовать Gatsby или Next, во многом зависит от вашего варианта проекта, так как на самом деле они оба великолепны.

Когда использовать Next.JS

Если у вас много контента или вы ожидаете, что ваш контент будет расти со временем, статические веб-страницы - не лучшее решение для вас. Причина в том, что создание сайта занимает много времени, если у вас много контента.

При создании очень большого приложения с тысячами страниц его восстановление может быть довольно медленным. 

Так что если у вас есть сайт с контентом, который, как вы ожидаете, будет расти и расти со временем, тогда Next.JS - лучший выбор для вас.

Кроме того, если вам нужна большая свобода доступа к вашим данным, стоит поблагодарить Next.JS.

Здесь стоит упомянуть, что документация для Next - отличная. 

Когда использовать Gatsby.JS

Я склонен, использовать Gatsby, когда я создаю небольшие веб-сайты и блоги. Экосистема идеально подходит для подключения к CMS.

(На мой взгляд) легче начать работать с Gatsby, об этом стоит помнить. Опять же, документация на высоком уровне.

Gatsby также поставляется с некоторыми «начальными» шаблонами, а также с относительно недавно представленными «темами», которые позволяют быстро запустить полностью функционирующее веб-приложение.