Next.js или React? Это партнерство, а не соревнование

Опубликовано: 2023-02-07

Для современных веб-разработчиков нет недостатка в библиотеках и фреймворках 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 можно использовать как на стороне клиента, так и на стороне сервера, и эта универсальность означает, что разработчики могут создавать полноценные приложения, используя один язык программирования.

Диаграмма, показывающая количество программистов, использующих различные языки, показывает, что многие задаются вопросом о Next.js и React.
Slash/Data обзор языков, используемых программистами в 2022 году. (Источник: Statista)

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

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

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

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

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

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

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

  • Интернет-магазины
  • Блоги
  • Панели мониторинга
  • Одностраничные приложения
  • Взаимодействие с пользовательскими интерфейсами
  • Статические веб-сайты

Что такое Реакт?

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

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

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

Next.js против реакции

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

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

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

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

 npx create-next-app

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

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

Снимок экрана приложения Next.js, созданного с помощью npx.
Создание приложения Next.js в интерактивном режиме.

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

 npx create-react-app new-app

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

Скриншот проекта React, созданного с помощью 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() . Итак, чтобы создать путь на основе идентификатора сообщения, экспортируйте 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 } } }

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

Разделение кода

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

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

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

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

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </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 не так удобна для навигации.

Вы Team Next.js или Team React? Изучите оба популярных варианта в этом посте . Нажмите, чтобы твитнуть

Резюме

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

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

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

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

Планируете собственное всемирно известное приложение? Изучите подход Kinsta к хостингу приложений Node.js для сервисов, поддерживающих React и Next.js.