Next.js против React? Это партнерство, а не конкуренция

Комментарии

Современные веб-разработчики не испытывают недостатка в библиотеках и фреймворках JavaScript. Одной из самых распространенных библиотек является React, которая была создана Facebook (теперь Meta) для создания многофункциональных приложений. Приложения React традиционно запускаются в веб-браузерах, но фреймворк Next.js расширяет функциональность React на серверную сторону с помощью среды выполнения JavaScript Node.js.

В этой статье мы рассмотрим Next.js и React, чтобы вы могли решить, подходят ли они для вашего следующего проекта.

Next.js и React: JavaScript на новом уровне

Исследование SlashData, проведенное в 2022 году, показало, что в мире насчитывается более 17 миллионов программистов на JavaScript, возглавляя группу, в которую входят такие популярные языки, как Python и Java. JavaScript может использоваться как на стороне клиента, так и на стороне сервера, и эта универсальность означает, что разработчики могут создавать полноценные приложения, используя один язык программирования.

Chart showing the number of programmers using various languages suggests many are wondering about Next.js vs React. Исследование Slash/Data о языках, используемых программистами в 2022 году. (Источник: Statista)

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

Расширяемость JavaScript означает, что всестороннее знание его наиболее распространенных инструментов является залогом вашего успеха как веб-разработчика.

Что такое Next.js?

Изначально выпущенный в 2016 году компанией Vercel, Next.js - это фреймворк React с открытым исходным кодом, который предоставляет строительные блоки для создания высокопроизводительных веб-приложений. С тех пор на него перешли крупнейшие компании, включая Twitch, TikTok, Uber и другие.

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

Возможность гибридного рендеринга
Автоматическое разделение кода
Оптимизация изображений
Встроенная поддержка препроцессоров CSS и библиотек CSS-in-JS
Встроенная маршрутизация

Эти возможности помогают разработчикам Next.js сэкономить значительное время на настройке и инструментарии. Вы можете сразу перейти к созданию приложения, которое может поддерживать такие проекты, как следующие:

Магазины электронной коммерции
Блоги
Приборные панели
Одностраничные приложения
Взаимодействующие пользовательские интерфейсы
Статические веб-сайты

Что такое React?

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

Некоторые преимущества использования React включают:

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

Next.js против React

Хотя разработчики часто используют Next.js и React для одной и той же цели, между ними есть некоторые фундаментальные различия.

Простота использования

Начать работу с Next.js и React очень просто. Каждый из них требует выполнения отдельных команд в терминале с помощью npx, который является частью npm для Node.js.

Для Next.js самой простой командой является:

npx create-next-app

При отсутствии дополнительных аргументов для create-next-app установка будет проходить в интерактивном режиме. Вам будет предложено ввести имя проекта (которое будет использоваться для каталога проекта), а также указать, хотите ли вы включить поддержку TypeScript и линтера кода ESLint.

Это будет выглядеть примерно так:

Screenshot of a Next.js application being created with npx. Создание приложения Next.js в интерактивном режиме.

При инициализации экземпляра React простейшая команда включает имя каталога проекта:

npx create-react-app new-app

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

Screenshot of a React project being created with npx. Создание проекта React в командной строке терминала.

Хотя оба варианта позволяют легко начать, помните, что Next.js построен поверх React. Поэтому вы не сможете освоить Next.js, не изучив сначала React и не поняв, как он работает. К счастью, React может похвастаться легкой кривой обучения и отлично подходит для новичков.

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

В отличие от этого, Next.js поставляется с предустановленными и предварительно настроенными инструментами. В Next.js любой файл, добавленный в папку pages, автоматически становится маршрутом. Благодаря этой встроенной поддержке, с Next.js легче работать ежедневно, что позволяет сразу же приступить к кодированию логики вашего приложения.

Особенности Next.js и React

Поскольку Next.js основан на React, у них есть общие черты. Однако Next.js идет дальше и включает в себя дополнительные возможности, такие как маршрутизация, разделение кода, предварительный рендеринг и поддержка API прямо из коробки. Эти функции вам придется настраивать самостоятельно при использовании React.

Выборка данных

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

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

Предварительный рендеринг может относиться к статической генерации сайта (SSG) или рендерингу на стороне сервера (SSR). В SSG HTML-страницы генерируются во время сборки и повторно используются для нескольких запросов. Next.js может генерировать HTML-страницы с данными или без них.

Ниже приведен пример того, как Next.js генерирует страницы без данных:

function App() {
  return <div>Welcome</div>
}
export default App

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

const Posts= ({ posts }) => {
    return (
        <div className={styles.container}>
            {posts.map((post, index) => (
                // render each post
            ))}
        </div>
    );
  };

export const getStaticProps = async () => {
    const posts = getAllPosts();
    return {
        props: { posts },
    };
};

В ситуациях, когда пути страницы зависят от внешних данных, используйте функцию getStaticPaths(). Так, чтобы создать путь на основе ID поста, экспортируйте функцию getStaticPaths() из страницы.

Например, вы можете экспортировать getStaticPaths() из pages/posts/[id].js, как показано ниже.

export getStaticPaths = async()  => {
  // Get all the posts
  const posts = await getAllPosts()

  // Get the paths you want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
  return { paths, fallback: false }
}

getStaticPaths() часто используется в паре с getStaticProps(). В этом примере вы используете getStaticProps() для получения подробной информации об идентификаторе в пути.

export const getStaticProps = async ({ params }) => {
    const post = await getSinglePost(params.id);
    return {
        props: { post }
    };
};

В SSR данные извлекаются в запрошенное время и отправляются в браузер. Чтобы использовать SSR, экспортируйте функцию реквизита getServerSide() из страницы, которую вы хотите отобразить. Сервер вызывает эту функцию при каждом запросе, что делает SSR полезным для страниц, потребляющих динамические данные.

Например, вы можете использовать ее для получения данных из новостного API.

const News = ({ data }) => {
    return (
        // render data
    );
  };

export async function getServerSideProps() {
    const res = await fetch(`https://app-url/data`)
    const data = await res.json()
    return { props: { data } }
}

Данные извлекаются при каждом запросе и передаются компоненту News через props.

Расщепление кода

Расщепление кода - это разделение кода на фрагменты, которые браузер может загружать по требованию. Это уменьшает количество кода, отправляемого в браузер при первоначальной загрузке, поскольку сервер отправляет только то, что нужно пользователю. Такие бандлеры, как Webpack, Rollup и Browserify, поддерживают разделение кода в React.

Next.js поддерживает разделение кода из коробки.

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

Например, в приведенном ниже компоненте Home сервер не будет включать компонент hero в начальный пакет.

const DynamicHero = dynamic(() => import('../components/Hero'), {
  suspense: true,
})

export default function Home() {
  return (
    <Suspense fallback={`Loading...`}>
      <DynamicHero />
    </Suspense>
  )
}

Вместо этого перед загрузкой компонента героя будет отрисован fallback-элемент suspense.

Поддержка API в Next.js по сравнению с React

Функция маршрутизации API в Next.js позволяет вам писать код бэкенда и фронтенда в одной кодовой базе. Любая страница, сохраненная в папке /pages/api/, привязывается к маршруту /api/*, и Next.js рассматривает ее как конечную точку API.

Например, вы можете создать API-маршрут pages/api/user.js, который возвращает имя текущего пользователя следующим образом:

export default function user(req, res) {
    res.status(200).json({ username: 'Jane' });
}

Если вы посетите URL https://app-url/api/user, вы увидите объект имени пользователя.

{
        username: 'Jane'
}

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

Производительность

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

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

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

Поддержка

Поскольку React существует дольше, чем Next.js, у него более обширное сообщество. Однако многие разработчики React переходят на Next.js, поэтому сообщество постоянно растет. Разработчикам легче найти существующие решения проблем, с которыми они сталкиваются, вместо того, чтобы создавать решения с нуля.

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

Резюме

Выбор Next.js или React сводится к требованиям приложения.

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

Благодаря различным вариантам рендеринга Next.js подходит для приложений с рендерингом на стороне сервера или приложений, сочетающих статическую генерацию и рендеринг на стороне сервера Node.js. Кроме того, благодаря функции оптимизации, предоставляемой Next.js, он идеально подходит для сайтов, которые должны быть быстрыми, например, для магазинов электронной коммерции.

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

Поделиться:

Оглавление