Создание сайтов: лендинг, визитка, интернет магазин. Продвижение, поддержка, реклама.

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

Когда речь идет о создании новых проектов на React, перед нами стоит очевидный выбор: NextJS или Create-React-App. Gatsby практически перестал использоваться из-за медленных сборок при масштабировании. Кроме того, NextJS становится всё более удобным генератором статических сайтов.

Фотография Артема Сапегина на Unsplash

В этой статье мы рассмотрим преимущества и недостатки NextJS и Create-React-App, а также обсудим, какие сценарии использования подходят для каждого из них.

Create-React-App

Create-React-App — это набор инструментов, позволяющий создавать новые приложения на React. CRA сохраняет зависимости, такие как webpack и babel внутри react-скриптов. Create-React-App упрощает работу с транспайлерами и бандлерами.

Это значит, что обновить эти «скрытые» зависимости совсем несложно. Необходимо подождать нового релиза react-скриптов и обновиться. Нам не придется возиться с исправлением критических изменений в webpack-конфигурации.

Преимущества использования Create-React-App

Не-упрямый инструмент (unopinionated)

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

Create-React-Apps отрисовывается на стороне клиента

Поскольку мы рендерим Create-React-Apps на стороне клиента, деплой выполняется легко. Мы можем разместить приложение на любом файловом хостинге, например, на S3. С CSR-приложениями намного проще работать!

Недостатки Create-React-App

Cложно настроить

Здесь нет встроенного способа кастомизации приложения. Если вам нужно настроить webpack-конфигурацию, единственный вариант — использовать сторонний инструмент, например, craco или eject. При этом после выполнения команды eject вы потеряете почти все преимущества от использования Create-React-App.

Он абстрагирует сложность

Create-React-App отлично работает до тех пор, пока не придется делать то, что он не поддерживает. Будет тяжко! Скрывая babel- и webpack-конфигурации, Create-React-App упрощает начало работ. Однако это мешает разработчикам узнавать больше о том, как работают эти жизненно важные инструменты.

Негативно влияет на SEO

Поскольку мы рендерим Create-React-Apps на стороне клиента, инструмент сложен для реализации SEO. Create-React-Apps не стоит использовать для e-commerce или маркетинговых задач.

NextJS

Не совсем корректно сравнивать NextJS и Create-React-App, потому что NextJS — нечто большее. В то время как CRA — просто инструмент для создания шаблонов React-приложений, NextJS — это фреймворк для создания React-приложений. Прямо из коробки NextJS предоставляет рендеринг на стороне сервера, создание статических сайтов, serverless-функции и многое другое. Это целый набор инструментов, который дает нам всё необходимое для создания эффективных веб-приложений.

Хотите продвинуться еще дальше при использовании NextJS? Попробуйте HappyKit.

HappyKit обеспечивает NextJS-приложениям повторяющиеся задачи (CRON-таски), очень простую аналитику и флаги функций. Подписаться на бета-версию можно здесь!

Преимущества использования NextJS

NextJS — молниеносный!

Благодаря рендерингу на стороне сервера и генерации статических сайтов, NextJS-приложения работают значительно быстрее. Next берет на себя заботу об оптимизации производительности по умолчанию.

Легкий процесс деплоя

Vercel (компания, создавшая NextJS) упрощает развертывание full-stack React-приложений. Пара щелчков мышью и вы получаете профессиональный пайплайн для деплоя. Он включает предварительные развертывания и развертывание на проде.

NextJS обеспечивает роутинг

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

Легко настроить

NextJS позволяет настраивать конфигурации babel или webpack. Добавить webpack-загрузчики или babel-плагины очень просто!

Недостатки использования NextJS

NextJS — упрямый (opinionated) фреймворк

В NextJS есть только один способ работы с маршрутами, и вы не можете его настраивать под себя. NextJS ограничен своим роутом на основе файла, а динамические маршруты возможны только при использовании NodeJS-сервера.

Когда стоит использовать NextJS?

При создании лендинга

NextJS отлично подходит для создания лендинга и реализации других маркетинговых задач.

Когда SEO имеет значение

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

При создании веб-сайтов

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

Когда стоит использовать Create-React-App?

При создании gated-приложения

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

При создании веб-приложений

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

Надеемся, что эта статья помогла вам решить, подходят ли NextJS и Create-React-App для вашего следующего проекта. Оба этих инструмента очень круты для создания React-приложений. Победителя выбрать не получится: для некоторых случаев лучше использовать NextJS, а для других — Create-React-App.