Выбор между React, Gatsby и Next.js для вашего внешнего интерфейса

С последними тенденциями в области фронтенд-веб-разработки мы увидели множество дополнений в коллекции фреймворков JavaScript, каждый из которых по-своему уникален, имеет свои преимущества и недостатки.

Таким образом, я хотел взглянуть только на сторону React, проверить основные 2 фреймворка, построенные поверх библиотеки React, и понять, почему кто-то выбирает один против других, и что каждый из них приносит на стол в условия Front-End разработки.

Примечание: В этой статье для простоты я буду сравнивать только основную причину, по которой каждая инфраструктура/библиотека была создана для выполнения/основного типа приложения, для которого используются эти технологии:

• Реагировать -> SPA

• Гэтсби -> ССГ

• Next.js -> ССР

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

• Приложения React -> MPA, SSG или SSR (поскольку Gatsby.js и Next.js были построены поверх React, очевидно, что вы сможете сделать это из приложения CRA, если хотите)

• Next.js -> SSG (Next.js официально поддерживает настройку приложений SSR и SSG)

Во-первых, нам нужно освоиться с тремя важными понятиями:

• SEO (поисковая оптимизация)

• SSR (рендеринг на стороне сервера)

• SSG (генератор статических сайтов)

После этого мы сможем продолжить сравнение и проанализировать плюсы и минусы каждого подхода с точки зрения выбора Front-End технологий (Framework/Library в нашем случае):

1. SEO (поисковая оптимизация)

Возможно, вы уже знакомы с этой концепцией, поскольку в настоящее время она используется повсюду, но если вы этого не сделаете, SEO имеет в виду процесс / оптимизацию веб-сайта, целью которого является повышение рейтинга в поисковой системе Google.

Хорошо оптимизированный веб-сайт с точки зрения SEO, скорее всего, будет указан на первых нескольких страницах Google.

2. SSR (рендеринг на стороне сервера)

SSR относится к способности приложения отображать содержимое на сервере (внутренняя часть) и возвращать всю отображаемую страницу, в отличие от отображения страницы в браузере.

Это похоже на то, как PHP, Ruby, Java и другие серверные языки/фреймворки с самого начала обслуживали контент.

Все данные будут обработаны на сервере, и только после того, как все будет сделано, контент будет отправлен обратно клиенту.

3. SSG (генератор/генерация статических сайтов)

SSG — это инструмент, который позволяет создавать полноценные HTML-страницы на основе предопределенных шаблонов и необработанных данных, подготовленных для рендеринга заранее. В отличие от традиционных CMS, которые управляются базой данных, SSG генерируют контент из статических файлов Markdown/GraphQL без необходимости в базе данных.

Теперь, когда мы немного освоились с этими концепциями, давайте проверим плюсы и минусы каждой упомянутой технологии в сравнении с другими:

Реагировать

Плюсы:

• Поддерживает создание SPA (одностраничных приложений)

• Быстрое время разработки

• Более высокая настраиваемость

• Без мнения

• Отличный универсал

• Огромный рынок разработчиков, знающих React

Минусы:

• Требуется больше усилий для улучшения SEO

• Обычно более медленные приложения

• Большая начальная отрисовка контента, которая может оказаться долгой в процессе загрузки при первом открытии приложения.

Гэтсби

Плюсы:

• Поддерживает SSG и SSR из коробки

• Отличное выступление

• Множество плагинов/сторонних интеграций для использования

• Отлично подходит для SEO

• Более безопасный

• Быстрое время разработки

Минусы:

• Плохо, когда ваше приложение требует много обновлений

• Немного самоуверен в отношении Node.js и GraphQL (хотя можно использовать и пользовательский API)

• Со временем может усложниться из-за необходимости большого количества настроек.

Next.js

Плюсы:

• Поддерживает как SSR, так и SSG из коробки

• Отлично подходит для SEO из-за SSR Хорошая производительность

• Легкий

• Простой процесс настройки

• Легко настраиваемый

Минусы:

• С большим мнением

• Скорее всего, станет чрезвычайно сложным позже в процессе разработки

Какой из них следует использовать?

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

Реагировать

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

Случаи применения:

• В основном все, что доступно только после авторизации

• Платформы управления

• CRM

• Панели инструментов

Гэтсби.js

Всякий раз, когда требуется хорошее SEO и редко меняющийся контент, Gatsby хорошо подходит.

Случаи применения:

• Блоги

• Страницы презентации

• Небольшие приложения электронной коммерции

• Домашние страницы Документы

Next.js

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

Случаи применения:

• Платформы социальных сетей

• Большие приложения для электронной коммерции

• SaaS-приложения

Заключение

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

Всем привет!

Эта статья была впервые опубликована [здесь] (https://medium.com/web-dev-freelancing/react-gatsby-next-js-what-to-choose-for-your-next-apps-frontend-f7aa09529b38)