Отличия 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 оптимизации и производительности.

Переключение ccs классов

Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.

• Если логическое значение true, имя класса добавляется к элементу react.
• Если логическое значение false имя класса удаляется из элемента react.

Ниже приведен пример, в котором используются React хуки, которые добавляют css класс app в элемент div, когда мы нажимаем кнопку Toggle class. Если мы нажмем эту кнопку еще раз, имя класса будет удалено из элемента div.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : null}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

В компонентах, основанных на классах, вы можете сделать это следующим образом.

// App.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = { isActive: false };

  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  };

  render() {
    const isActive = this.state.isActive;
    return (
      <div className={isActive ? "app" : null}>
        <h1>Hello react</h1>
        <button onClick={this.handleToggle}>Toggle class</button>
      </div>
    );
  }
}

export default App;

Переключение между двумя именами классов

Вместо того, чтобы добавлять или удалять имя класса, мы также можем переключаться между двумя именами классов в приложении React. В приведенном ниже примере по умолчанию класс container добавляется в элемент div, когда мы нажимаем кнопку Toggle class класс container удаляется, а класс app добавляется к элементу.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : "container"}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Добавление имени класса к существующему имени класса

Вы также можете добавить новое имя класса к существующему имени класса следующим образом.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={`app ${isActive ? "danger" : ""}`}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Первоначальный вид html разметки:

<div class="app">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

После нажатия кнопки Toggle class html выглядит следующим образом.

<div class="app danger">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>