Next.js против Remix: анализ ключевых аспектов и различий

Узнайте, какой из них подходит именно вам, сравнив последние версии Remix и Next.js.

Веб-экосистема React с каждым днем ​​выглядит все лучше. В конце 2021 года Next.js выпустила свой отличный 12-й релиз. Он был наполнен множеством функций и оптимизаций. Однако чуть позже мы увидели, как Remix представил свою последнюю версию. Команда Remix изменила свою стратегию и решила работать бесплатно и с открытым исходным кодом.

Итак, начиная проект в 2022 году, какой из них выбрать? Это трудный выбор, и он оказывает большое влияние на ваше веб-приложение. Каждый фреймворк является самоуверенным и будет определять, как вы думаете и строите свои компоненты.

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

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

Архитектура и философия

Фреймворк Next.js построен на основе NodeJs. Он тесно связан с экосистемой React, что делает его почти ее продолжением. Он пытается использовать свои последние функции на раннем этапе. Чтобы это произошло, команда Vercel тесно сотрудничает с React. В основном они предоставляют абстракции, построенные поверх компонентов React, таких как: next/dynamic, next/head, next/link, …

Их последний выпуск уже включает поддержку:

• Компоненты React на стороне сервера: компоненты без сохранения состояния, которые отображаются на сервере и передаются клиенту.
• Потоковая передача HTML на стороне сервера: постепенная отправка HTML в браузер.

Вы можете включить обе функции в файле конфигурации:

// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true,
    serverComponents: true,
  },
}

Подход от Remix заметно отличается. Они более отделены от экосистемы React и больше ждут стабильных функций React. Он построен на Web Fetch Api (вместо Node), что позволяет приложению работать где угодно. Он фокусируется на максимально возможном использовании сервера. У этого есть два преимущества: более высокая пропускная способность при загрузке данных и возможность обеспечения прогрессивного улучшения.

Еще одно радикальное отличие заключается в том, что Remix пытается максимально полагаться на стандартные функции браузера. Что это значит? Что их страницы на 100% функциональны даже с отключенным JavaScript. Когда доступен JavaScript, весь опыт улучшается.

Их встроенная функция формы является ярким примером этого. Они полагаются на базовую функцию Form браузера. Действия формы всегда публикуются и выполняются на сервере. Это место, где будет происходить логика проверки/перенаправления/базы данных.

Когда доступен JavaScript, произойдет запрос xhr, в противном случае традиционный HTTP Post возьмет дворец.

Единственное, что нам нужно сделать, это экспортировать функцию action на корневую страницу и использовать их встроенные абстракции API форм.

Загрузка данных

Next.js

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

Краткий обзор APIS загрузки Next.js:

• На стороне сервера + на стороне клиента во время выполнения: getInitialProps.
• На стороне сервера только во время сборки: getStaticProps.
• На стороне сервера только во время выполнения getServerSideProps или React Server Components.
• Сторона клиента

Почему такое разнообразие методов? Это ставит разработчика за руль. Фреймворк Next.js имеет в основном цели, ориентированные на SEO, и утверждает, что загрузка всего на сервере может снизить производительность приложения.

Платформа включает в себя популярную функцию Static Sitem Generation. Он имеет некоторые дополнительные улучшения. Если вам нужно периодически обновлять эти страницы SSG, вы можете использовать стратегию stale-while-revalidate в методе getStaticProps. Это создаст сеть с Iпостепенной Sстатической регенерацией. Вам нужен CDN, который поддерживает эту функцию.

Пример ISR в действии:

Ремикс

Видение Remix совсем другое. С их точки зрения, данные всегда должны сначала загружаться на стороне сервера. Поскольку он основан на fetch API, мы можем выполнять код на периферии, используя такие сервисы, как Cloud Flare Workers.

Как это работает? На каждой корневой странице мы можем определить именованную функцию loader, которая будет выполняться на сервере, а затем данные будут доступны через API хука реакции на сервере и клиенте. Next.js, эквивалентный этому поведению, — getInitialProps/getServerSideProps. Однако в реализации Next.js вы можете столкнуться с большим количеством пропеллеров.

Давайте посмотрим на рабочий пример Remix:

Это означает, что макет страницы может быть полностью обработан на сервере и отправлен клиенту параллельно. После того, как все будет загружено, у пользователя не будет загрузочных счетчиков. Единственное предостережение — это временные затраты на получение данных на том же сервере.

Маршрутизация

Когда дело доходит до маршрутизации, обе платформы имеют некоторые сходства. Они полагаются на систему маршрутизации на основе файловой системы. Это становится стандартом, когда дело доходит до фреймворков SSR. Это делает страницу маршрута предсказуемой и допускает некоторую оптимизацию.

Они поддерживают вложенную маршрутизацию и сегменты динамического маршрута. В Next.js маршруты должны быть размещены в каталоге pages.

• pages/index.js → /
• pages/blog/index.js → /blog
• pages/blog/first-post.js → /blog/first-post
• pages/[username]/settings.js → /:username/settings (/foo/settings)

В Remix их нужно поместить в каталог app/routes:

• app/routes/blog.js → /blog
• app/routes/blog/first-post.js → /blog/first-post
• app/routes/invoices/$id/activity.js → /invoices/123/activity

Двигатели у них разные. Фреймворк Remix построен поверх React Router, который имеет 45k starts на GitHub. Remix позволяет создавать вложенные макеты. Это достигается с помощью функции Outlet из React Router v6. Вы можете легко создавать составные страницы и экономить время благодаря кэшированию и загрузке данных.

Вы можете отказаться от такого поведения вложенных URL-адресов макета. Как? Просто используя нотацию . вместо создания папок. Он заменит каждый . на / в URL-адресе. Невложенные макеты — это то, как Next.js отображает свои маршруты.

// nested layout: it will render blog.js + new.js
app/routes/blog/new.js → /blog/new
// unnested layout: will just render blog.new.js
app/routes/blog.new.js → /blog/new

На мой взгляд, Remix имеет преимущество в этой области, а Next.js должен наверстать упущенное.

Дополнительные возможности

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

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

Фреймворк Next.js поддерживает преобразование любой страницы React в страницу AMP. Это полезно, если вы хотите создать новостную веб-страницу.

Заворачивать

Мы видели, как сравниваются Next.js и Remix. Они оба имеют потрясающие функции, обеспечивают высокую производительность и имеют отличное сообщество. Они оба обеспечивают отличные возможности для разработчиков благодаря своим молниеносным компиляторам Rust и Go.

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

Есть несколько сценариев, когда выбор Next.js не вызывает затруднений: когда у вас есть статические сайты или вам нужно использовать AMP. Когда вам нужен адаптивный сайт без JavaScript, вы должны использовать Remix.

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

Спасибо за прочтение. Если вам понравилось то, что вы прочитали, ознакомьтесь также с этими статьями по теме: