Отличия Next и React

Перед разработкой веб-приложения необходимо принять решение, какой фреймворк или библиотеку использовать. Не секрет, что React — самая популярная JavaScript библиотека в мире. Хорошим показателем популярности является активность сообщества вокруг определенной темы. И мы видим, что люди охотнее всего задают вопросы и отвечают на них в темах React Однако, если вы решили использовать React для своего веб-приложения, возможно, вы слышали о Next и о том, что в некоторых вещах он лучше, чем React. Рост популярности Next показывает, что разработчики доверяют ему, хотя это относительно новый конкурент по сравнению с другими фреймворками и самим React.

Что такое React?

Прежде чем мы перейдем к сравнению Next и React, нужно получить некоторые базовые знания о React и Next. Библиотека React была создана Facebook в 2011 году, в 2013 году был открыт ее исходный код. Описание React гласило, что это эффективная, гибкая и декларативная JavaScript библиотека для создания интерактивных веб-приложений. React действительно хорош в разработке веб-приложений, которые требуют постоянного изменения данных в пользовательском интерфейсе. Если вы когда-либо разрабатывали веб-сайт с использованием только примитивных технологий, вы знаете, что после нажатия практически любого элемента веб-сайт обновляется. В наше время сложно найти что-то подобное в сети. Основным строительными блоками React приложений являются компоненты. Они отображают данные, когда эти данные изменяются, React обновляет интерфейс и генерирует новые данные. Этот процесс называется рендерингом.

Почему React не фреймворк?

В сети существует множество споров о том, является ли React фреймворком или библиотекой. Это библиотека. Разработчики обычно используют термины «библиотека» и «фреймворк» взаимозаменяемо, однако это не одно и то же. Основными критериями для фреймворков являются:

• Фреймворки предоставляют готовые к использованию инструменты, стандарты и шаблоны для быстрой разработки приложений, а библиотеки — нет.
• Фреймворки контролируют вызов библиотек для нашего кода.
• Фреймворки предоставляют правила и рекомендации по написанию кода и структурированию файлов и папок.
• Фреймворки имеют согласованный API, компиляторы, наборы инструментов и библиотеки внутри.
• Когда вы используете фреймворк, управление инвертируется, т. е. фреймворк управляет потоком и вызывает ваш код, в отличие от библиотек, которые позволяют вам управлять потоком приложения.

React не соответствует этим критериям и, следовательно, не является фреймворком.

Что такое Create React App (CRA)?

Чтобы конкурировать с фреймворками, у React есть специальный фреймворк под названием Create React App (CRA). Он включает в себя структурирование файлов и другие инструменты, чтобы React можно было использовать в качестве фреймворка. Это лучший способ создания нового одностраничного приложения в React. CRA создает окружение для создания веб-приложения на основе React и сразу же оптимизирует ваше приложение для продакшена.

Что такое Next?

Next, созданный Vercel и выпущенный в 2016 году, представляет собой легковесную платформу с открытым исходным кодом. Он был создан на основе React, чтобы сделать его удобнее и добавить дополнительные функции. Он используется для создания оптимизированных и быстрых веб-приложений благодаря server side рендерингу. Next популярен среди фреймворков, отчасти из-за его особенностей:

• Typescript. Этот язык очень популярен, и я бы порекомендовал выучить его, если вы еще этого не сделали.
• Redux. Next полностью поддерживает Redux, что очень нравится разработчикам React.
• Оптимальная скорость. Next умеет рендерить страницы на стороне сервера разными способами. Первый — это привычный рендеринг на стороне сервера (SSR), который позволяет нам извлекать данные и отображать их во время запроса. Второй - статическая генерация, которая использует данные, доступные до запроса, что помогает кэшировать данные и улучшать SEO. Таким образом, поисковые роботы могут взаимодействовать с полностью готовой HTML-страницей. Vercel утверждает, что Next — один из самых быстрых фреймворков.
• Конфигурируемость. Next легко настраивается. Автоматически генерируемые решения для стилей упрощают разработку и предоставляют стартовые шаблоны для запуска вашего проекта.
• Маршрутизация. Создавать маршруты страниц так же просто, как создавать папки.

Отличия Next и React

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

Достоинства React

• Его легче учить, чем Next. React имеет хорошую документацию для быстрого начала работы.
• Для React есть сотни пакетов и инструментов, созданных для облегчения написания кода.
• Сильное сообщество с ~200000 звезд на Github на момент написания статьи значительно упрощает поиск помощи.
• Переиспользуемые компоненты позволяют разработчикам повторно использовать большую часть кода и создавать легко читаемый код.
• Инструмент Create React App позволяет разработчикам быстро и без проблем запускать свои проекты.

Недостатки React

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

Достоинства Next

• Разработчикам не требуется дополнительная настройка для создания приложения SSR, в то время как для React требуется CRA.
• Не нужно беспокоиться о дополнительных инструментах или сборщиках, так как все делается за вас при создании проекта.
• Создан с учетом SEO. SSR улучшает качество страниц для поисковых роботов, которые посещают ваш сайт и собирают данные для поисковых систем.
• Производительность является большим преимуществом Next, поскольку приложения, созданные с его помощью, работают быстро благодаря SSR и статической генерации.
• Next оптимизирует изображения, что улучшает производительность.
• Next имеет собственную структуру папок, что делает процесс разработки интуитивно понятным и простым.

Недостатки Next

• Маршрутизация не такая гибкая, так как у Next есть своя встроенная.
• Без основ React будет сложнее создавать новые проекты.

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

Итоги

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

Содержание туториала по React JSX позволяет вам писать HTML-подобную разметку внутри файла JavaScript, сохраняя логику рендеринга и содержимое в одном месте. Иногда вам может понадобиться добавить немного логики JavaScript или сослаться на динамическое свойство внутри этой разметки. В этой ситуации вы можете использовать фигурные скобки в JSX, чтобы добавить в них JavaScript.

Передача строк в кавычках

Когда нужно передать строковый атрибут в JSX, нужно заключить его в одинарные или двойные кавычки:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="http://example.com/userpic.jpg"
      alt="User Name"
    />
  );
}

Здесь "http://example.com/userpic.jpg" и "User Name" передаются как строки. Но что, если вы хотите динамически указать src или alt? Вы можете использовать JavaScript значение, заменив " и " на { и }:

export default function Avatar() {
  const avatar = 'http://example.com/userpic.jpg';
  const description = 'User Name';
  return <img className="avatar" src={avatar} alt={description} />;
}

Обратите внимание на разницу между className="avatar", который указывает имя CSS класса "avatar", и src={avatar}, который считывает значение переменной JavaScript с именем avatar. Это потому, что фигурные скобки позволяют вам работать с JavaScript прямо в разметке.

Использование фигурных скобок: JavaScript в разметке

JSX — это особый способ написания JavaScript. Это означает, что внутри него можно использовать JavaScript — с помощью фигурных скобок { }. В приведенном ниже примере сначала объявляется имя, name, а затем оно встраивается в фигурные скобки внутри <h1>:

export default function TodoList() {
  const name = 'User Name';

  return <h1>{name}'s To Do List</h1>;
}

Любое выражение JavaScript будет работать между фигурными скобками, включая вызовы функций, таких как formatDate():

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(date);
}

export default function TodoList() {
  return <h1>To Do List for {formatDate(today)}</h1>;
}

Где использовать фигурные скобки

Вы можете использовать фигурные скобки только двумя способами внутри JSX:

1. Как текст непосредственно внутри тега JSX: <h1>{name}'s To Do List</h1> работает, но <{tag}>To Do List</{tag}> работать не будет.
2. Поскольку атрибуты следуют сразу после знака =: src={avatar} будут считывать переменную avatar, но src="{avatar}" передаст строку "{avatar}".

Использование двойных фигурных скобок: CSS и другие объекты в JSX

Помимо строк, чисел и других выражений JavaScript, вы даже можете передавать объекты в JSX. Объекты также обозначаются фигурными скобками, например { name: "User Name", itemsCount: 10 }. Следовательно, чтобы передать объект JS в JSX, вы должны заключить объект в другую пару фигурных скобок: person={{ name: "User Name", itemsCount: 10 }}. Вы можете увидеть это со встроенными стилями CSS в JSX. React не требует от вас использования встроенных стилей (классы CSS отлично подходят для большинства случаев). Но когда вам нужен встроенный стиль, нужно передать объект атрибуту стиля:

export default function TodoList() {
  return (
    <ul
      style={{
        backgroundColor: 'black',
        color: 'pink',
      }}
    >
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

Встроенные (inline) стили записываются в camelCase. Например, HTML <ul style="background-color: black"> в компоненте будет записан как <ul style={{ backgroundColor: 'black' }}>.

Другие примеры JavaScript объектов в фигурных скобках

Вы можете переместить несколько выражений в один объект и ссылаться на них в JSX внутри фигурных скобок:

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://example.com/userpic.jpg"
        alt="userpic"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

В этом примере объект JavaScript person содержит строку имени и объект темы:

const person = {
  name: 'User Name',
  theme: {
    backgroundColor: 'black',
    color: 'pink',
  },
};

Компонент может использовать эти значения из person следующим образом:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

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

Резюме

Теперь вы знаете почти все о JSX:

• Атрибуты JSX внутри кавычек передаются как строки.
• Фигурные скобки позволяют добавить в разметку логику и JavaScript переменные.
• Они работают внутри содержимого тега JSX или сразу после = в атрибутах.
• {{ и }} не являются специальным синтаксисом: это объект JavaScript, спрятанный внутри фигурных скобок JSX.