Вы собираетесь начать работу над новым проектом приложения и запутались: Создать приложение React или Next.js — в чем разница?

Какой вариант лучше для вас? Учитывая ваши потребности в SEO, SSR, API и производительности.

И они разочаровывающе похожи:

  • они оба позволяют создавать приложения React без необходимости использовать Webpack для их объединения (или необходимости выполнять какое-либо разделение кода)
  • они оба позволяют вам настроить и запустить приложение React в кратчайшие сроки.

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

Итак, в этом посте вы найдете ответы на следующие вопросы:

  • Каковы основные различия между CRA и Next.js?
  • Каковы основные преимущества использования Next.js?
  • Каковы основные преимущества использования приложения Create React?
  • Каковы недостатки Next.js?
  • Каковы недостатки приложения Create React?
  • Когда вы хотели бы использовать один над другим?

1. В чем ключевая разница между CRA и Next.js?

SSR против CSR…

Отсюда и все их различия.

Приложения Next.js обрабатываются на стороне клиента (CSR), но платформа также поддерживает отрисовку на стороне сервера (SSR). Для сравнения, приложения Create React App отображаются только на стороне клиента.

Другими словами:

CRA генерирует HTML-код в клиентском браузере, тогда как Next.js создает его на сервере на основе URL-адреса.

Таким образом, ваша дилемма «Создать реагирующее приложение или Next.js» сводится к тому, соответствует ли статическая страница вашим потребностям или не полностью.

2. Каковы основные преимущества использования Next.js?

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

Почему вы выбрали его?

  • потому что настроить, создать и даже разместить приложение Next.js очень просто: у вас есть пакеты почти для всех ключевых дополнений, требующих конфигурации Webpack (SaSS, CSS, TS…)
  • потому что рендеринг приложений React становится намного проще, независимо от того, откуда поступают данные.
  • потому что вы можете извлечь выгоду из автоматического рендеринга сервера и разделения кода (что повысит производительность)
  • потому что SSR (рендеринг на стороне сервера) существенно повысит производительность вашего приложения.
  • потому что это легкая платформа как для статических, так и для серверных универсальных приложений JS.
  • потому что это хорошо для поисковой оптимизации(поскольку все генерируется с сервера…)

3. Создание приложения React по сравнению с Next.js: каковы основные преимущества использования CRA?

В ходе дебатов «Next.js vs create-react-app», каковы самые веские причины для выбора CRA для создания вашего приложения React?

  • проще развернуть
  • вы можете создать одностраничное приложение React с… нулевой конфигурацией (нет необходимости в трудоемкой настройке)
  • вам не нужно иметь дело с Webpack или Babel
  • это очень просто (пустой div и всего несколько js-файлов) и предоставляет весь необходимый HTML-код для рендеринга вашего приложения на стороне клиента.
  • процесс разработки стал более плавным
  • лучший опыт разработчика

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

4. Каковы недостатки Next.js?

Что может заставить вас дважды подумать, прежде чем выбрать Next.js для создания вашего следующего приложения?

  • тот факт, что это мнение: существует способ ведения дел Next.js, и вы вынуждены… приспосабливаться к нему
  • если вы позже захотите использовать маршрутизатор, отличный от собственного заполненного (или, может быть, добавить Redux), вы обнаружите, что он не такой гибкий

5. Каковы недостатки приложения Create React?

В дебатах «Создание приложения React или Next.js», почему вы исключили CRA?

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

6. Когда вы хотели бы использовать Next.js?

Как правило, используйте Next.js:

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

7. Когда вы хотели бы использовать приложение Create React?

Когда бы вы предпочли его Next.js?

  • когда вам нужно создать приложение React очень быстро; с CRA вы можете пропустить настройку и часть настройки
  • когда вам нужно создать целевую страницу для продукта: приложение Create React значительно упрощает ее сборку.
  • когда вам нужно создать SPA

8. В заключение…

CRA — это просто, а Next.js «соблазняет» вас лучшей производительностью и SEO.

Это одностраничное приложение React, которое вам нужно быстро запустить и запустить, и вам не нужен SSR? Create React App может быть лучшим выбором для вас.

Это быстро загружаемое приложение, которое вы создаете? Является ли производительность критически важной для вас, а SEO — чем-то большим, чем просто приятно иметь?

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