Gatsby против Next.js: узнайте, что больше всего подходит вашему проекту

Я думаю, что большинство из вас, должно быть, работали или хотя бы слышали о Gatsby и Next.js. Но если вы не слышали об этих двух фреймворках, не волнуйтесь. К концу статьи вы получите базовое представление об обеих этих средах. И Gatsby, и Next.js являются фреймворками на основе React, и я могу представить их по отдельности вот так.

Gatsby - это основанный на React генератор статических сайтов, и с помощью его мощной реконфигурации мы можем создать веб-сайт, который использует только статические файлы для невероятно быстрой загрузки страниц, сервис-воркеров, разделения кода, рендеринга на стороне сервера и т. Д. Next.js также основан на React и позволяет нам создавать рендеринг на стороне сервера и статические веб-приложения.

До выпуска Next.js 9.3 было совершенно ясно, что и в каких случаях использовать. Если вам нужно создать статический сайт, например блог, выберите Gatsby. Если вам нужно создать сайт с рендерингом на стороне сервера, например интернет-магазин, выберите Next.js. После выпуска Next.js 9.3 Next.js также поддерживает создание статических сайтов следующего поколения.

Актуальные вопросы: может ли Next.js делать все, что может делать Гэтсби? Заменит ли Next.js Гэтсби? Давайте посмотрим на сильные и слабые стороны обоих фреймворков и посмотрим, когда мы можем использовать Gatsby, а когда - Next.js.

Гэтсби

Во-первых, давайте посмотрим на основные особенности Гэтсби. Как упоминалось ранее, Gatsby - это L-фреймворк на основе React и GraphQ для создания статических сайтов. Он создает веб-страницы, которые получают самые высокие оценки в анализаторах скорости веб-сайтов, путем компиляции приложений React в статический HTML.

Представление

Медленное время отклика - это то, что ненавидят и разработчики, и пользователи. С Gatsby вам не нужно тратить время отдельно на такие улучшения. Gatsby обеспечивает сверхбыстрое время отклика для вашего веб-сайта. Обычно сайты Gatsby в два или три раза быстрее обычных сайтов. Сам фреймворк заботится о производительности, и вам, как разработчику, не нужно беспокоиться о производительности. Все, что вам нужно сделать, это создать исходный код, и Gatsby.js скомпилирует наиболее производительную конфигурацию Webpack для создания вашего сайта. Чтобы повысить производительность вашего веб-сайта, Gatsby следует архитектурному шаблону Google PRPL (push, render, pre-cache, lazy-load). Этот шаблон предназначен для структурирования и обслуживания прогрессивных веб-приложений (PWA). Кроме того, Gatsby поддерживает PWA.

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

Gatsby говорит вам, как вы должны обрабатывать данные в своем приложении, а Next.js позволяет вам решать все. Гэтсби использует GraphQL, язык запросов, похожий на SQL. Используя синтаксис GraphQL, вы можете описать данные, которые вам нужны в вашем компоненте, а затем GraphQL извлечет эти данные для вас. Gatsby делает эти данные доступными в браузере, когда это необходимо вашим компонентам.

import React from "react"
import { graphql } from "gatsby"
export default ({ data }) => (
  <div>
    <h1>Welcome {data.site.siteMetadata.title}</h1>
    <p>Gatsby vs Next.js</p>
  </div>
)
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

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

Экосистема

Gatsby содержит обширную экосистему плагинов, тем и начальных проектов. Плагины Gatsby - это пакеты узлов, которые реализуют API Gatsby. Вы загружаете плагины Gatsby из npm и включаете их в свой gatsby.config.js файл. В Gatsby доступно большое количество плагинов практически для всего, что вам нужно. Кроме того, Gatsby предоставляет вам большое количество тем, и вы можете делиться функциональностью, источниками данных и дизайном в нескольких проектах. Эти темы можно загрузить в виде пакетов npm.

Помимо вышеперечисленных фирменных блюд, Гэтсби предлагает:

  • Простая интеграция данных из таких источников, как CMS, сервисы SaaS, API, базы данных, файловые системы
  • Автоматическая маршрутизация на основе вашей структуры каталогов. Нет необходимости включать дополнительный код для настройки роутера.
  • Предварительно настроенная система сборки на основе Webpack

Но мы должны иметь в виду, что могут быть ситуации, в которых Гэтсби может не подходить. Например, Gatsby - не лучший выбор для более крупных и сложных приложений. Давайте посмотрим на это подробнее в конце статьи.

Next.js

Next.js также является фреймворком на основе React, который поставляется с большим количеством функций, таких как статическая оптимизация, рендеринг на стороне сервера с выборкой данных, система маршрутизации на основе страниц, автоматическое разделение кода, маршрутизация на стороне клиента со страницей. предварительная выборка, встроенная поддержка CSS (и SASS), маршруты API и т. д. Таким образом, кажется, что Next.js может делать почти все. В версии 9.3 создание статических сайтов также доступно с Next.js.

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

В течение долгого времени Next.js использовался как инструмент для отрисовки страниц на стороне сервера. Он динамически генерирует HTML каждый раз, когда приходит новый запрос с использованием сервера. Но, как я уже упоминал выше, теперь вы можете создавать статические сайты с помощью Next.js. Эта функция значительно сократила разрыв между Gatsby и Next.js. Мы можем перечислить некоторые основные особенности Next.js следующим образом.

Повторная загрузка горячего кода

Next.js перезагружает страницу при обнаружении любых изменений, сохраненных на диске.

Автоматическая маршрутизация

Любой URL-адрес сопоставляется с файловой системой и файлами, помещенными в папку pages. Конфигурация не требуется.

Серверный рендеринг

Вы можете визуализировать компоненты React на стороне сервера перед отправкой HTML клиенту.

Совместимость экосистемы

Next.js хорошо сочетается с остальной частью экосистемы JavaScript, Node и React.

Предварительная загрузка

Компонент Link, используемый для связывания разных страниц, поддерживает свойство prefetch, которое автоматически выполняет предварительную выборку ресурсов страницы в фоновом режиме.

Динамические компоненты

Вы можете динамически импортировать модули JavaScript и компоненты React.

Статический экспорт

Используя команду next export, Next.js позволяет экспортировать полностью статический сайт из вашего приложения.

Поддержка TypeScript

Next.js написан на TypeScript и поэтому имеет отличную поддержку TypeScript.

Вы можете найти дополнительные детали и их реализацию в документации Next.js.

Что следует использовать?

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

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

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

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

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

Думаю, теперь у вас есть четкое представление о функциях и использовании Gatsby и Next.js, чтобы выбрать то, что больше всего подходит для ваших проектов. Ваше здоровье!